North star · Keep the interface quiet and spacious so oversized type and project photography carry the visual impact.
The portfolio uses a restrained near-monochrome interface to let project imagery supply most of the visual colour. The opening hero places fine white navigation and copy over a full-bleed photograph, with an oversized Helvetica Neue title extending beyond the viewport. Elsewhere, white content sections use black, regular-weight typography, generous empty space and left-aligned project descriptions. Small metadata labels sit apart from the larger narrative copy, making each case study easy to scan without adding boxes or decorative UI. Project images appear as broad, standalone bands between text sections; their own palettes belong to the featured work rather than the site chrome. Black and charcoal surfaces occur in the opening and project sequence, while image panels may sit against a pale grey band. The layout is deliberately sparse: typography and photography provide hierarchy, and transitions rely on whitespace rather than borders, cards, or shadows. Large email and social links form a typographic closing gesture.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
表层色
中性色
功能色
页面底色 · Gallery White表层 · Night Charcoal表层 2 · Mist Grey主文字 · Pure Ink次要文字 · Soft Ink弱文字 · Gallery White
文字
背景
对比度
WCAG
#000000 Pure Ink
#ffffff Gallery White
21:1
AAA
#000000 Pure Ink
#101011 Night Charcoal
1.1:1
不达标
#000000 Pure Ink
#ededed Mist Grey
17.94:1
AAA
#020202 Soft Ink
#ffffff Gallery White
20.75:1
AAA
#020202 Soft Ink
#101011 Night Charcoal
1.09:1
不达标
#020202 Soft Ink
#ededed Mist Grey
17.72:1
AAA
字体
字号阶梯：Custom（比例约 2.12，正文 17px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Helvetica Neue
系统字体 · 字重 400 · 占比 100%
免费替代：Inter
Display titles, project headings, descriptions, metadata, and links throughout the portfolio.
角色
示例
字号
字重
行高
字距
特大标题
Oversized opening title layered over the hero photograph.
Charlie Phipps
162px
400
0.9
-0.012em
一级标题
Primary portfolio and project narrative headings.
Charlie Phipps
155px
400
1
-0.01em
二级标题
Section and project titles, including prominent supporting headings.
Charlie Phipps
63.5px
400
1
-0.024em
正文
Project descriptions and the introductory designer statement.
The quick brown fox 敏捷的狐狸
17px
400
1.2
-0.012em
辅助文字
Small project metadata, roles, navigation, and footer details.
The quick brown fox 敏捷的狐狸
15.5px
400
1
-0.013em
链接
Oversized email call-to-action and prominent text links.
Charlie Phipps
155px
400
1
-0.01em
间距与布局
基准单位 1px · 密度：适中
39px版块间距
—元素间距
—卡片内边距
1388px内容最大宽度
2px
6px
8px
9px
10px
13px
15px
26px
The measured content max width is 1388px, with a comfortable, open density and a measured section gap of 39px. Use a single-column full-bleed hero, followed by broad white content regions that arrange small project metadata beside larger left-aligned descriptions. Project imagery spans wide horizontal bands between text blocks. The page alternates spacious narrative areas and image-led pauses; avoid enclosing content in cards. The footer returns to large typographic links and a fine, low-key information row.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The page is predominantly flat, with no measured shadows or radius scale. Separate text and image sections through whitespace and changes between white, charcoal, and pale grey backgrounds rather than card borders. Any depth comes from the photography and its depicted screens or physical settings, not interface elevation.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Overlay navigation
Small white links sit over the full-bleed hero photograph, contrasting with the extremely large title below.
Hero title
Oversized, regular Helvetica Neue display lettering stretches across the hero and can extend beyond the viewport edge.
Project metadata
Small uppercase project number, client, year, and role labels sit apart from the main description.
Project narrative
Large regular-weight black text is left aligned in open white sections, with a simple arrow link following the copy.
Project image band
Broad standalone project photographs divide text sections; a pale grey band can provide a quiet backdrop.
Contact links
Email and social links appear as oversized black typography in the closing section.
Footer information
A compact row of portfolio, work, and date details closes the page with restrained text and a subtle dividing line.
Imagery · Photography is the dominant visual material: full-bleed hero imagery and wide project photographs show digital work in real-world contexts. Keep images large and rectangular, with minimal framing and no decorative treatment. The photography may carry strong colours, but those tones belong to individual projects, not the persistent interface palette. The measured project area also includes mockups within the imagery.
Use Helvetica Neue or a close neutral sans-serif substitute.
Keep the interface near-monochrome outside project photography.
Let the hero title extend broadly across the image.
Separate project metadata from the larger narrative copy.
Use open white sections and generous visual pauses.
Present project images as broad, unframed bands.
✕ 不该做
Do not add gradients, shadows, or decorative card treatments.
Do not turn project photography into small thumbnails.
Do not introduce a persistent bright accent colour.
Do not make metadata compete with the project narrative.
Do not compress the sections into a dense grid.
Do not mistake colours inside project imagery for interface colours.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a designer portfolio page with a quiet editorial feel. Use Gallery White (#ffffff) for open content areas, Night Charcoal (#101011) for dark sections, and Soft Ink (#020202) or Pure Ink (#000000) for typography. Reserve Mist Grey (#ededed) for a restrained image-stage band; the other measured greys should remain subtle secondary text. Use regular-weight Helvetica Neue, or Inter as a free substitute, with tight tracking for oversized titles and small understated metadata. Start with a full-bleed photograph and fine overlaid navigation. Arrange each case study with separated labels, a large left-aligned description, a simple arrow link, and a broad project image. Keep spacing generous, layouts flat, and transitions driven by whitespace. Use vivid colour only when it comes from the featured project imagery.
