North star · Let one monumental serif identity sit within generous space, and use the blue atmospheric field as imagery rather than an unsupported CSS color token.
The visual identity is defined by the contrast between an immersive blue-gradient opening and a broad, clean white content field. The screenshot’s gradient blends saturated cobalt and periwinkle into a very pale lavender-white; those hues are visible in the hero artwork, not in the measured CSS palette, so treat them as image or media colors rather than inventing brand tokens. The white measured canvas frames the later reference content. A very large, delicate high-contrast serif wordmark anchors the hero, with a small circular typographic detail orbiting its edge; a compact white pill CTA sits below. Typography pairs the display face _NewYork with DM Sans for supporting content. The page is centered and unusually spacious, allowing the opening identity to feel like an immersive title card and the lower section to read as a quiet editorial pause. Keep controls and decoration subordinate to the wordmark and atmospheric color field.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
中性色
页面底色 · Canvas White主文字 · Canvas White描边 · Canvas White
字体
字号阶梯：Custom（比例约 1.778，正文 20px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
DM Sans
网络字体 · 字重 400 / 700 · 占比 94%
免费替代：DM Sans
Supporting headings, body copy, and links in the reference content.
Aa 设计
_NewYork
网络字体 · 字重 400 · 占比 6%
免费替代：Cormorant Garamond
Oversized ATMOS wordmark and uppercase primary heading.
角色
示例
字号
字重
行高
字距
特大标题
Oversized ATMOS wordmark in the immersive opening.
ATMOS
200px
400
1.15
0
一级标题
Uppercase primary section heading.
ATMOS
50px
400
1.15
0
二级标题
Bold uppercase section labels such as REFERENCES.
ATMOS
30px
700
1.15
0
三级标题
Supporting editorial headings and resource titles.
The quick brown fox 敏捷的狐狸
25px
400
1.5
0
正文
Introductory copy and explanatory reference text.
The quick brown fox 敏捷的狐狸
20px
400
1.5
0
链接
Resource links and the Leeroy's Playground attribution.
The quick brown fox 敏捷的狐狸
20px
400
1.5
0
间距与布局
基准单位 2px · 密度：宽松
100px版块间距
—元素间距
—卡片内边距
684px内容最大宽度
10px
20px
30px
42px
50px
100px
134px
The measured content uses a single-column structure with a spacious density and a 684px maximum content width. The opening reads as a centered, full-screen title card, with the wordmark and CTA aligned on the central axis. Below it, the page transitions to a large white field; the measured section begins at the left edge of its content alignment and groups an introductory paragraph with a references heading and links. Preserve generous vertical pauses and avoid adding a dense grid or unnecessary navigation.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The visual language is largely flat: no measured shadows, gradients, or card treatments are reported in CSS. The hero’s apparent depth comes from its gradient artwork, not stacked UI. Keep the reference area on white, use minimal framing, and avoid introducing borders or shadows absent from the evidence.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
ATMOS wordmark
Oversized, centered high-contrast serif lettering in white over the blue gradient, accompanied by a small circular type detail.
Explore CTA
Compact white pill-shaped control below the wordmark, with small serif label and strong contrast against the gradient.
References introduction
A restrained editorial intro in DM Sans, setting context for the aviation resources.
References heading
Uppercase section label using bold DM Sans, aligned with the content column.
Resource links
Three measured text links in regular DM Sans; keep them simple and integrated into the white content area.
Imagery · The opening is dominated by a full-bleed atmospheric gradient rather than visible photography: saturated blue fades through periwinkle into pale lavender. Treat this as hero artwork or a media treatment, since the measured palette contains only white. Overlay the fine serif wordmark and small circular typographic ornament; keep the rest of the page imagery quiet.
Keep the wordmark serif delicate and high contrast.
Use DM Sans for supporting content and links.
Preserve generous white space between major areas.
Keep resource content in a narrow single column.
✕ 不该做
Do not treat screenshot gradient hues as measured CSS palette tokens.
Do not add a dense navigation bar over the hero.
Do not crowd the wordmark with supporting copy.
Do not introduce unmeasured shadows or card borders.
Do not turn the reference links into a busy card grid.
Do not replace the quiet white content field with colored panels.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in ATMOS’s immersive editorial style. Use Canvas White (#ffffff) as the measured page and content canvas. Create an atmospheric hero using a blue-to-periwinkle-to-pale gradient as artwork, not as a claimed measured CSS token; center a large, refined serif wordmark and a small white pill CTA. Use a Cormorant Garamond-like display face for the identity and DM Sans for headings, body copy, and links. Keep the hero sparse, with ample breathing room and a subtle circular typographic detail if useful. Transition into a quiet, narrow single-column white content section with an uppercase bold label, short introduction, and simple text links. Favor flat surfaces and restrained controls; avoid added shadows, borders, dense grids, or decorative UI that competes with the title.
