North star · Let an uninterrupted black canvas and precise white type do most of the work; use color only to signal hierarchy or action.
The page’s defining move is its near-total black canvas (#000000), which gives the experience a quiet, cinematic feel rather than a conventional SaaS dashboard look. White (#ffffff) carries the principal navigation and headings; muted gray labels recede, while the thin charcoal border is reserved for subtle separation. The violet CTA is the clearest action, with amber appearing as a small, contrasting text or link accent. PPNeueMontreal supplies a clean, contemporary sans-serif voice across the page. Display typography is oversized and tightly tracked, while body copy is light and comfortably led; navigation and eyebrow labels use uppercase styling. The layout is intentionally sparse, with a wide centered content area and generous vertical breathing room. The supplied viewport is mostly black and reveals very little imagery, so preserve the restrained visual field rather than inventing decorative graphics or color bands.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
强调色
表层色
中性色
页面底色 · Obsidian Canvas主文字 · Clean White描边 · Charcoal Hairline强调 · Electric Violet强调 2 · Amber Signal
Site-wide display, headings, body copy, navigation, labels, and links.
角色
示例
字号
字重
行高
字距
特大标题
Oversized brand or hero display text with tight tracking.
Dala
112.5px
400
1.1
-0.04em
一级标题
Primary hero headline.
Dala
78px
400
0.9
0
二级标题
Major section headings.
Dala
48px
400
1.1
0
三级标题
Subsection or feature headings.
Dala
42px
400
1.2
0
四级标题
Smaller supporting headings.
Dala
36px
400
1.2
0
正文
Light-weight explanatory and supporting copy.
The quick brown fox 敏捷的狐狸
18px
200
1.5
0
辅助文字
Compact supporting labels and captions.
The quick brown fox 敏捷的狐狸
15px
400
1.5
0
导航
Uppercase navigation labels with modest letter spacing.
The quick brown fox 敏捷的狐狸
14px
600
1.2
0.025em
链接
Emphasized inline or standalone links.
The quick brown fox 敏捷的狐狸
15px
600
1.5
0
眉题
Small uppercase category or section preface.
The quick brown fox 敏捷的狐狸
12px
600
1.2
0.05em
间距与布局
基准单位 2px · 密度：宽松
120px版块间距
—元素间距
—卡片内边距
1200px内容最大宽度
1px
6px
12px
14px
15px
16px
18px
24px
36px
38px
60px
120px
Use a single-column, spacious composition within a measured maximum content width of 1200px. Keep navigation quiet and near the top edge, with the primary content visually isolated by abundant black space. The measured section rhythm is generous, with a 120px section gap; avoid adding dense card grids or unnecessary bands. Headings and supporting copy should align cleanly, with strong typographic hierarchy rather than decorative containers. The supplied full-page captures are almost entirely black, so preserve large uninterrupted areas.
圆角与层次
按钮 · 9999px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The measured design is essentially flat, with no shadows recorded and no prominent card surfaces. Use the charcoal hairline only for quiet separation, and keep layering minimal. The access button is a solid violet pill, not a raised or shadowed control.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Primary access CTA
Uppercase REQUEST ACCESS label in white on Electric Violet (#8052ff), set in a fully rounded pill without shadow.
Top navigation
Compact navigation on black; primary labels are white, while quieter destinations such as BLOG and MANIFESTO use muted gray.
Display headline
Oversized PPNeueMontreal display treatment with tight negative tracking and a restrained, high-contrast white-on-black presentation.
Text link
Use muted gray for secondary navigation links; reserve amber (#ffb829) for occasional highlighted link text.
Section divider
If separation is needed, use a subtle charcoal hairline (#1a1a1a) rather than a boxed card or bright rule.
Imagery · The supplied first viewport and scaled page captures show very little legible imagery; black dominates and the page reads primarily through typography and sparse interface details. Do not introduce stock photography, illustrative scenes, or decorative 3D elements without evidence. If media is needed for a new page, keep it dark, restrained, and subordinate to the text rather than breaking the monochrome field.
Use white for the main headline and key navigation.
Reserve violet for the primary access action.
Use amber only as a restrained text accent.
Preserve generous black space around content.
Use uppercase styling for navigation and eyebrow labels.
✕ 不该做
Do not introduce unmeasured colors.
Do not add bright section backgrounds or gradients.
Do not turn the layout into a dense card grid.
Do not add shadows or elevated panels.
Do not let secondary links compete with the CTA.
Do not invent prominent imagery absent from the captures.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Dala-style page around an uninterrupted black canvas (#000000) and a sparse, spacious composition. Use PPNeueMontreal, or DM Sans as a free substitute, for the entire interface: large, tightly tracked white headlines; light supporting copy; and compact uppercase navigation. Keep the content within a wide centered area and create hierarchy with typography and generous vertical breathing room, not cards. Use Clean White (#ffffff) for primary text, Quiet Gray (#9a9a9a) for secondary navigation, and Charcoal Hairline (#1a1a1a) only for discreet dividers. Make the primary action a white-on-Electric Violet (#8052ff) rounded pill. Amber Signal (#ffb829) may appear sparingly in a text link. Avoid shadows, colorful bands, and decorative imagery; keep the visual field calm and minimal.
