North star · Keep the interface nearly invisible so a single cinematic work frame commands attention.
The page uses a near-black canvas (#121212) as a quiet surround for a centered landscape video frame, leaving generous negative space to make the graded footage the focal point. Navigation sits along the top edge: a pale wordmark on the left and a compact row of uppercase links on the right. The warm ivory text (#f9f9df) stays legible without the starkness of pure white. A small outlined “SEE MORE WORK” control sits at the lower right, using a subdued dark fill and fine grey border. Suisse Intl provides an even, contemporary sans-serif voice; uppercase labels and tight navigation tracking give the interface a precise studio feel. Project-card browns and deep blues are sampled accents rather than a page-wide colour system, appearing mainly within media or card surfaces. The composition feels spacious and cinematic, with flat geometry, minimal ornament and no visible shadows.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
页面底色 · Studio Black表层 · Inverse White表层 2 · Ochre Frame表层 3 · Deep Fjord表层 4 · Umber Shade主文字 · Warm Ivory描边 · Charcoal Line强调 · Ochre Frame强调 2 · Deep Fjord强调 3 · Midnight Blue
Uppercase utility labels and compact text around the featured work.
The quick brown fox 敏捷的狐狸
14px
400
1
0
导航
Top-row section links, set uppercase with slightly tight tracking.
The quick brown fox 敏捷的狐狸
16px
400
1
-0.02em
间距与布局
基准单位 4px · 密度：适中
—版块间距
20px元素间距
—卡片内边距
1400px内容最大宽度
4px
8px
10px
12px
20px
A full-bleed, dark stage holds a restrained top navigation and a centered landscape media frame. The wordmark anchors the left edge while section links align to the right; a secondary work link sits near the lower-right edge. The measured page max width is 1400px, with a comfortable overall density and a 20px element gap. The broad empty canvas is a defining part of the composition, not unused space. Keep the media and controls aligned cleanly, with no visible card grid in the opening view.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is largely flat: no measured shadows or rounded corners. Use the dark canvas as the main layer and let media sit cleanly within it. The “SEE MORE WORK” control is differentiated by a thin #40403b border and a restrained dark fill, not by shadow or pronounced elevation.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation
A compact row of uppercase links—WORK, COLOURISTS, STUDIOS, ABOUT, CONTACT—aligned opposite the KeepGrading wordmark.
Featured work frame
A centered, landscape video or image frame surrounded by generous near-black negative space.
See more work control
Uppercase 14px Suisse Intl label in warm ivory, with a dark fill and 1px #40403b border.
Project media tiles
Unrounded project surfaces may sample ochre, brown, or deep blue tones; keep these colours contained within work imagery.
Imagery · Moving-image work is the central visual material: a landscape video frame shows a close human portrait against a textured outdoor setting. Keep footage cinematic and colour-graded, with subdued, warm earth tones against the near-black page. The screenshot includes many image and video assets, so project visuals should feel like selected work rather than decorative illustrations. Avoid overlays that compete with the footage.
Let one landscape work frame lead the composition.
Use a fine #40403b border for secondary controls.
✕ 不该做
Don’t fill the canvas with bright section colours.
Don’t add shadows or rounded-card styling.
Don’t let project-derived browns become global UI accents.
Don’t crowd the hero with explanatory copy.
Don’t use oversized, decorative typography.
Don’t overlay controls on top of the main footage.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new creative-studio page in KeepGrading’s restrained cinematic style. Use Studio Black (#121212) as the dominant canvas and Warm Ivory (#f9f9df) for navigation and essential labels. Set Suisse Intl or a close sans-serif substitute such as Inter in regular weight; keep interface text uppercase and navigation tracking tight. Place a compact top navigation opposite the wordmark, then give a single landscape video or image frame generous breathing room. Treat Ochre Frame (#67491a), Deep Fjord (#123150), and the other brown-blue samples as project-media colours only, not broad UI fills. Use flat geometry, no shadows or rounded corners, and reserve Charcoal Line (#40403b) for a subtle outlined secondary action. Prioritize the work over copy and ornament.
