精选 · 开放 · 免费
Christopherireland
为摄影师和导演打造的精致作品集，具有严格的编辑克制
PortfolioPhotographicEditorialCleanRefined
01
设计气质 DNA
极简主义编辑式摄影导演
高端印刷杂志版式移植到网络
02
色彩
#000000Ink
#5D5B5BInk soft
#F2F1ECBG
#BBBBBBMuted
rgba(0,0,0,1)Line
在温暖的米白色底上，使用严格的单色墨色，无任何色彩点缀
03
字体
didone-serif · geometric-sans · monospace
- display
96px · 400 - heading
63px · 400 - body
16px · 400
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
充足的垂直间距，头部统一使用 30px 内边距
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
一条 1px 水平线分隔头部与内容区域
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
双栏布局，左侧为文本导航，右侧为大尺寸特写图片
07
动效与交互
200msmicro
300mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
交互状态使用平滑的背景色和透明度过渡
文本链接和分类标题上的微妙过渡 · 直接导航到相应版块
08
组件
- button 基于文本的导航链接，悬停时带简单下划线
- card 无；内容以扁平列表呈现，带有大号分类标题
- chip 无
- input 无
- hero 全宽、以排版为主导的头部，突出摄影师姓名
09
文案语气与禁用清单
- 语气 精致、沉静、专业
- 标题风格 大号、全大写或标题式大小写的衬线字体排版
- 按钮文案 含蓄的文本链接
- 不要使用鲜艳的点缀色 —— 截图显示的是严格的黑白搭配米色的调色板
- 不要使用圆角 —— 截图显示的是完全扁平、矩形的美学
- 不要使用投影 —— 截图显示的是没有深度效果的简洁布局
- 不要使用小而密集的段落 —— 截图显示的是充足的留白和大标题
- 不要为标题使用装饰性无衬线字体 —— 截图使用高对比度衬线字体作为展示
- 不要使用复杂的网格叠加 —— 截图依赖于简单的对齐和留白
- 避免: 明亮色彩
- 避免: 装饰性元素
- 避免: 繁杂背景
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
本网站是为一位名为 Christopher Ireland 的摄影师和导演打造的精致作品集。设计内核建立在严格的编辑克制之上，采用温暖的米白色 (#F2F1EC) 背景和纯粹的单色墨色 (#000000, #5D5B5B)。排版是主要的表现工具，大号展示标题使用 Didone 衬线字体，正文使用几何无衬线字体。布局特点是极其充足的留白和简洁的双栏结构。关键限制包括避免任何鲜艳的色彩点缀，消除圆角或投影以保持扁平、印刷感，以及避免任何复杂的装饰性 UI 组件。整体基调是精致而沉静的。
en · zh-CN · zh-TW · ja · ko