North star · Keep the interface quiet and typographic so one cinematic photograph and a few oversized editorial labels carry the page.
The page uses a warm off-white canvas (#f2f1ec) as an almost uninterrupted field, keeping attention on the typography and the featured photograph. Black anchors the large nameplate, category links and small utility text; muted grays distinguish the introductory line and supporting heading text without adding decorative color. Playfair Display supplies the expressive editorial voice, appearing in the very large centered masthead and the oversized category labels. Rubik is reserved for compact, practical copy such as the photographer’s role and project descriptor. The header spans the page and ends with a thin dark divider. Below it, the content sits within a centered, constrained frame: brief text and an About link occupy the upper row, then large category links sit opposite a landscape photograph. The image’s amber and deep brown tones are photographic content, not interface colors. Spacious gaps, flat surfaces and minimal ornament keep the composition calm and gallery-like.
Compact supporting copy, role labels, links and navigation text.
Aa 设计
Playfair Display
网络字体 · 字重 400 · 占比 37%
免费替代：Cormorant Garamond
Oversized centered masthead and large project-category labels.
角色
示例
字号
字重
行高
字距
特大标题
Oversized centered nameplate at the top of the page.
CHRISTOPHER IRELAND CREATIVE
95px
400
1
0.01em
一级标题
Large editorial project-category labels in the main content.
CHRISTOPHER IRELAND CREATIVE
62px
400
normal
0.01em
正文
Photographer role and brief project descriptor.
The quick brown fox 敏捷的狐狸
16px
400
1.5
0
链接
About and other understated text links.
The quick brown fox 敏捷的狐狸
16px
400
1.5
0
间距与布局
基准单位 2px · 密度：适中
48px版块间距
11px元素间距
—卡片内边距
1102px内容最大宽度
8px
11px
14px
30px
48px
A centered content frame uses the measured 1102px maximum width within a wider page canvas. The top nameplate is centered, while its small role label sits toward the right; a fine horizontal rule separates this header from the content. Beneath it, a small intro line and compact About link form a top row. The main area is a two-column split: large stacked category links on the left and one landscape photograph on the right. Comfortable whitespace and clear vertical separation keep density low.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is essentially flat: no visible card shadows, gradients or rounded containers. A thin horizontal divider gives the header a restrained boundary, while spacing establishes hierarchy between the masthead and content. The photograph provides the only strong visual depth through its own lighting and tonal contrast.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Masthead
Large centered Playfair Display nameplate in black on the warm canvas, with a small Rubik photographer-and-director label aligned beneath toward the right.
Header divider
A thin dark horizontal rule spans the viewport beneath the masthead, separating identity from the portfolio content.
Intro line
Muted Rubik text lists campaigns, documentary films and long-form photography in a compact line.
About link
Small black Rubik text link positioned opposite the introductory line; keep it understated and underlined.
Category links
Large Playfair Display labels for Commercial, Creative and Community, arranged vertically with small plus signs beside them.
Featured photograph
A wide rectangular documentary-style photograph occupies the right side of the main split layout, without a card frame or shadow.
Imagery · Use cinematic, naturalistic photography rather than illustration or interface mockups. The featured landscape image is a rectangular crop with warm indoor light, deep shadows and an intimate documentary mood. Keep the photograph visually substantial and aligned beside the category list, with no decorative frame or color treatment added by the interface. Its amber and brown palette belongs to the image, not the brand palette.
Use Gallery Ivory (#f2f1ec) as the dominant page canvas.
Reserve Playfair Display for the masthead and prominent category labels.
Keep supporting copy compact and set it in Rubik.
Pair the stacked category links with a substantial landscape photograph.
Use black sparingly for strong text and simple link emphasis.
Let generous whitespace provide hierarchy instead of card styling.
✕ 不该做
Do not add bright interface accents or gradients.
Do not treat the photograph’s amber tones as brand colors.
Do not enclose content in rounded cards or add shadows.
Do not center every content element; preserve the asymmetric split.
Do not make utility text compete with the editorial display type.
Do not add decorative icons beyond restrained plus markers.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new portfolio page in this quiet editorial style. Use Gallery Ivory (#f2f1ec) as the broad canvas, Print Black (#000000) for the main nameplate and links, and Soft Charcoal (#5d5b5b) for subdued supporting copy; use Graphite Heading (#333332) only where secondary headings need distinction. Set oversized identity and section labels in Playfair Display, with compact practical text in Rubik. Keep a centered, constrained content frame, a full-width hairline below the header, and an asymmetric main composition pairing stacked editorial links with a large landscape photograph. Preserve generous whitespace and flat surfaces. Let image lighting supply any warm tones; do not introduce decorative brand accents, shadows, rounded cards or gradients.
