North star · Let oversized, light serif headlines lead across a restrained dark canvas, and treat vivid color as content imagery rather than interface chrome.
The page is built around a near-black and charcoal foundation: #000000 anchors the full-bleed opening video, while #1d1d1d carries the long run of studio content. White is reserved for high-contrast display text, navigation, and key controls; the muted metal tone appears sparingly in the footer. The opening’s bright gradients and colorful portfolio artwork belong to embedded media, not the core interface palette. Feature Deck supplies the light, high-contrast serif headlines, creating a distinctly editorial counterpoint to Söhne’s quiet sans-serif navigation, labels, and body copy. The hero places a large left-aligned statement beneath centered motion; subsequent two-column text blocks and a broad specialty list alternate with a tall, staggered project gallery. Generous dark breathing room separates these sections. The overall layout stays flat and unboxed, using imagery and contrast rather than shadows or card borders to establish hierarchy.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
表层色
中性色
页面底色 · Charcoal Canvas表层 · Studio White表层 2 · Stage Black主文字 · Studio White次要文字 · Charcoal Canvas描边 · Studio White
Navigation, body copy, small labels, buttons, and links.
Aa 设计
Feature Deck
网络字体 · 字重 300 · 占比 13%
免费替代：Cormorant Garamond
Display, h1, and h2 editorial headlines.
角色
示例
字号
字重
行高
字距
特大标题
Oversized opening statement and other highest-impact editorial headlines.
Athletics
116px
300
1.05
-0.009em
一级标题
Primary section statements, including the studio proposition.
Athletics
82px
300
1.1
-0.018em
二级标题
Large secondary editorial headings and principle statements.
Athletics
72px
300
1.1
0
三级标题
Small section headings and supporting labels.
The quick brown fox 敏捷的狐狸
22px
300
1.3
0
正文
Studio descriptions, explanatory paragraphs, and footer copy.
The quick brown fox 敏捷的狐狸
17px
300
1.3
0
按钮
Newsletter Subscribe button label.
The quick brown fox 敏捷的狐狸
17px
300
1.3
0
导航
Primary navigation and footer navigation links.
The quick brown fox 敏捷的狐狸
17px
300
1.3
0
链接
Prominent inline links such as approach and portfolio actions.
The quick brown fox 敏捷的狐狸
22px
300
1.3
0
间距与布局
基准单位 8px · 密度：适中
48px版块间距
5px元素间距
—卡片内边距
1392px内容最大宽度
5px
9px
12px
16px
20px
22px
24px
32px
48px
64px
128px
144px
The measured page max width is 1392px, with the hero and video extending edge to edge. The hero statement and section headings align to the left, while studio introduction and process content use two-column arrangements. A long specialty list and staggered vertical portfolio gallery create a deliberate change of pace. Content remains relatively comfortable in density, with generous dark intervals between sections; the client marks form a compact horizontal band. Follow the measured spacing scale and section gap rather than adding arbitrary dimensions.
圆角与层次
按钮 · 9999px
链接 · 9999px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is predominantly flat: no measured shadows, card system, or persistent border treatment defines the page. Contrast between black and charcoal sections, white type, and the media itself establishes hierarchy. Use the observed pill-shaped actions, while keeping text links unboxed and input treatment restrained. Do not add elevation effects to portfolio previews.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Primary navigation
Athletics wordmark sits at the left, with Work, About, Approach, Careers, and Contact aligned on the right over the dark canvas.
Hero
Full-bleed black video area pairs a centered brand mark with a large, left-aligned light serif headline.
Studio text split
A small sans-serif section label introduces a large serif statement on the left and concise supporting copy on the right.
Specialties list
Four lettered disciplines appear as a wide, spacious list with large serif names against charcoal.
Work gallery
Project artwork is presented as a tall, staggered sequence of tilted previews, followed by a lavender pill-shaped View All Work action.
Client marks
A compact horizontal strip of client logos sits on the charcoal canvas, with no prominent card containers.
Newsletter form
Footer form combines a small email prompt, understated input with a bottom hairline, and a white pill Subscribe button.
Imagery · A full-bleed video anchors the hero, with a large animated or dimensional Athletics mark above the headline. The work section uses staggered, perspective-tilted project previews, each retaining its own vivid client palette; these are embedded portfolio media, not interface color tokens. Later, a small team photograph sits alongside the principles copy. Keep image edges clean and avoid decorative frames.
Use #000000 for the full-bleed hero and #1d1d1d for the main content field.
Set major statements in a light editorial serif with generous scale.
Keep navigation, labels, and supporting copy in restrained sans-serif type.
Use white for key type and clear controls against dark surfaces.
Let project artwork retain its own vivid colors without recoloring the interface.
Separate content with generous dark breathing room and varied section layouts.
✕ 不该做
Do not turn the charcoal page into a light or colorful interface.
Do not use portfolio artwork colors as global UI accents.
Do not wrap every content group in a card or add drop shadows.
Do not make the main headlines bold, uppercase, or sans-serif.
Do not crowd the page with dense copy or tightly stacked sections.
Do not add borders around media that are absent from the reference.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Athletics-style brand studio page with a restrained dark editorial system. Use Stage Black (#000000) for a full-bleed motion-led hero and Charcoal Canvas (#1d1d1d) for the main content. Set high-impact statements in a light, high-contrast serif similar to Feature Deck; use a quiet Söhne-like sans-serif for navigation, labels, paragraphs, and controls. Keep primary text Studio White (#ffffff), reserving Metal Haze (#d6d5d0) for subtle footer detail. Organize the page with left-aligned oversized statements, two-column studio copy, a spacious specialty list, and a staggered gallery of vivid project media. Let imagery provide the color, not interface chrome. Favor broad dark intervals, flat surfaces, minimal borders, and pill-shaped calls to action. Avoid shadows, generic card grids, and arbitrary extra accents.
