North star · Let oversized wine-brown typography define the composition, and preserve generous, quiet space around every supporting element.
The first viewport is a quiet, full-bleed canvas: measured data specifies #ffffff, while the screenshot renders it as a subtly warm off-white texture. Keep the measured palette strictly to #ffffff and #472425; the latter is the defining dark, wine-brown ink for the oversized name, role statement, and compact copy. Typography carries the page: a very large, uppercase display headline occupies the upper-left, with a second oversized statement anchored toward the lower-right. Small uppercase introductory copy sits low on the left, while a narrow vertical navigation and theme toggle stay near the upper-right. The composition is intentionally asymmetric, with broad open areas separating these elements. Use NeueHaasDisplay for the display voice and SFUIDisplay for supporting text. The screenshot shows no photography; a delicate radial starburst is a minor decorative mark. Avoid adding unmeasured colors, gradients, shadows, or card treatments.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
表层色
页面底色 · Gallery White主文字 · Wine Ink描边 · Gallery White
文字
背景
对比度
WCAG
#472425 Wine Ink
#ffffff Gallery White
13.57:1
AAA
字体
字号阶梯：Custom（比例约 8.684，正文 19px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
SFUIDisplay
网络字体 · 字重 400 / 300 · 占比 86%
免费替代：Inter
Navigation, body copy, captions, buttons, and links
Aa 设计
NeueHaasDisplay
网络字体 · 字重 400 · 占比 14%
免费替代：Inter
Oversized display name and statement
角色
示例
字号
字重
行高
字距
特大标题
Oversized uppercase name and creative-director headline
Leonid Kostetskyi
165px
400
0.86
-0.025em
正文
Short uppercase introduction and supporting statements
The quick brown fox 敏捷的狐狸
19px
400
1
0
辅助文字
Small uppercase utility labels and minor copy
The quick brown fox 敏捷的狐狸
12px
400
1
0
按钮
Compact uppercase theme controls
The quick brown fox 敏捷的狐狸
12px
400
1
0
导航
Small, vertically arranged page navigation
The quick brown fox 敏捷的狐狸
12px
400
1
0
链接
Uppercase text links and portfolio navigation
The quick brown fox 敏捷的狐狸
19px
400
1
0
间距与布局
基准单位 1px · 密度：适中
58px版块间距
—元素间距
—卡片内边距
1299px内容最大宽度
2px
6px
9px
58px
71px
113px
125px
The measured page max width is 1299px, with a comfortable density and a section gap of 58px. In the screenshot, the opening viewport reads as a full-bleed composition: the name starts at the upper-left, navigation is tucked into the upper-right, a small introduction sits lower-left, and the oversized role statement occupies the lower-right. Maintain this offset, asymmetric arrangement and broad open field rather than forcing content into cards or centered columns.
圆角与层次
按钮 · 50%
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The measured design has no shadows or gradients and no card surfaces. Keep the page visually flat: the white canvas meets text directly, with no layered panels. The measured border color is white and appears on small circular controls; avoid inventing visible separators or elevation effects.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Vertical page navigation
A compact stack of Home, About, Projects, Awards, and Contacts near the upper-right, set in restrained dark text.
Display name
A two-line, uppercase personal name in oversized NeueHaasDisplay, aligned to the upper-left and colored #472425.
Role statement
A large, two-line uppercase creative-director statement anchored toward the lower-right, visually balancing the name.
Introductory copy
A small uppercase service statement positioned low on the left, separate from the main display typography.
Theme toggle
Small uppercase DARK THEME and LIGHT THEME text controls placed below the right-side navigation.
Decorative starburst
A restrained radial line ornament near the lower-left; it remains secondary to the typography.
Imagery · The measured section reports no image or video elements in the opening viewport. The screenshot is predominantly typography and open canvas, with a small fine-line radial starburst near the lower-left. Treat this mark as understated decoration, not as a photography or illustration system; do not introduce product mockups or prominent imagery.
Make the display headline oversized and uppercase.
Preserve the asymmetric left-right composition.
Keep navigation and utility copy compact.
Leave broad areas of uncluttered negative space.
✕ 不该做
Do not add colors outside the measured palette.
Do not center every element into a uniform column.
Do not add cards, shadows, or gradients.
Do not let decorative graphics compete with the headline.
Do not enlarge navigation to display scale.
Do not fill the open canvas with unmeasured imagery.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new portfolio page in this visual language. Use Gallery White (#ffffff) for the full-page canvas and Wine Ink (#472425) for the main text, links, and navigation. Make the design typography-led: use an oversized uppercase display headline with tight tracking and compressed line spacing, then balance it with a second large statement offset toward the opposite side. Arrange compact navigation at the upper-right and a small uppercase introduction toward the lower-left. Preserve broad negative space and an intentionally asymmetric composition. Use NeueHaasDisplay or a close free sans-serif substitute for display text, and SFUIDisplay or Inter for utility text. Keep the surface flat, with no cards, shadows, gradients, or invented palette colors. Any ornament should remain delicate and secondary.
