North star · Keep the interface nearly invisible so oversized type and immersive project media lead on a continuous black canvas.
The page is built around a pure black canvas (#000000), allowing full-bleed media and long vertical project sequences to feel like one uninterrupted portfolio. Lausanne is used throughout in a light, unembellished sans-serif voice: the hero statement is exceptionally large and tightly tracked, while navigation and captions remain small and quiet. Most interface text is soft gray (#cacaca); project names switch to coral (#ff7777), giving the otherwise monochrome presentation a recognizable editorial accent. A muted gray (#727272) appears in fine footer rules and subdued details rather than as a broad surface color. The opening uses atmospheric grayscale motion imagery, followed by client marks and a small abstract media moment. Project entries are image-led, stacked in a single column, with titles and concise project links close to each frame. The overall rhythm is spacious and deliberate, with minimal chrome, no decorative cards, and a simple signup footer.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
中性色
功能色
页面底色 · Studio Black主文字 · Soft Silver次要文字 · Quiet Graphite描边 · Quiet Graphite强调 · Coral Signal
文字
背景
对比度
WCAG
#cacaca Soft Silver
#000000 Studio Black
12.81:1
AAA
#727272 Quiet Graphite
#000000 Studio Black
4.37:1
AA-large
#ff7777 Coral Signal
#000000 Studio Black
8.16:1
AAA
字体
字号阶梯：Custom（比例约 4.167，正文 18px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Lausanne
网络字体 · 字重 400 · 占比 100%
免费替代：DM Sans
All page typography, from the hero statement and project titles to navigation, links, and footer details.
角色
示例
字号
字重
行高
字距
特大标题
Oversized hero statement and the prominent all-projects link.
Channel Studio
75px
400
0.9
-0.02em
正文
Introductory company statement and general supporting copy.
The quick brown fox 敏捷的狐狸
18px
400
normal
0
辅助文字
Small client labels, project context, and footer details.
The quick brown fox 敏捷的狐狸
13px
400
1.19
0
导航
Compact primary navigation beside the studio mark.
The quick brown fox 敏捷的狐狸
16px
400
0.9
0
链接
Project titles and associated project navigation links.
The quick brown fox 敏捷的狐狸
18px
400
normal
0
间距与布局
基准单位 2px · 密度：适中
57px版块间距
—元素间距
—卡片内边距
1402px内容最大宽度
8px
9px
10px
13px
16px
19px
20px
40px
57px
64px
94px
192px
Use a single-column, vertically scrolling composition with full-bleed media inside a measured maximum content width of 1402px. Align copy and project titles to the start edge; keep navigation compact near the upper-left. The page alternates a media-led opening and short studio introduction with a long sequence of image-dominant project entries. Section spacing follows a comfortable, deliberate rhythm rather than a dense grid. Keep the footer low-key and separated from the final project by generous black space.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
Keep the interface flat: measured data shows no shadows, gradients, or rounded card system. The black canvas itself separates sections, and thin muted-gray footer rules provide the clearest interface boundary. Media supplies depth through its own lighting, color, and motion; avoid adding overlays, raised panels, or ornamental borders.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Compact header
Place the studio mark and a small, soft-gray navigation group near the upper-left; keep the header visually subordinate to the hero.
Hero statement
Set the company positioning as oversized, regular-weight Lausanne text over full-bleed atmospheric media.
Client and studio introduction
Pair a large gray statement with a small client label, client marks, and supporting video or abstract media on black.
Project entry
Stack a coral project title and a small gray project link with a wide, image-led project frame.
All-projects link
Use a large soft-gray text link and a simple arrow as the transition after the featured work.
Signup footer
Keep the email signup, understated divider, copyright, and social links compact and quiet against black.
Imagery · Treat imagery and video as the dominant visual material: the opening is soft-focus grayscale motion, while project frames range from sculpture and architecture to landscapes and technology. Preserve each asset’s distinct color and tonal character rather than forcing a uniform filter. Frame projects as wide, near-full-width images, with small titles and links immediately adjacent. Abstract particles and client marks appear as supporting media, not as interface decoration.
Use Studio Black as the uninterrupted page canvas.
Set typography in Lausanne or a close, clean sans-serif substitute.
Reserve Coral Signal for project-title emphasis.
Let project imagery occupy most of each portfolio entry.
Keep navigation and supporting labels visually quiet.
Use generous vertical breathing room between page moments.
✕ 不该做
Do not introduce bright filled buttons or extra accent colors.
Do not place project imagery in rounded cards.
Do not add shadows, gradients, or decorative elevation.
Do not turn the single-column portfolio into a dense grid.
Do not apply a uniform color filter to varied project media.
Do not let footer details compete with the work.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new creative-studio page using the Channel Studio visual language. Keep a continuous Studio Black (#000000) canvas, with Soft Silver (#cacaca) for navigation, body copy, and links. Use Coral Signal (#ff7777) sparingly for project titles, and Quiet Graphite (#727272) only for subdued rules or secondary details. Set everything in Lausanne, or a close alternative such as DM Sans, using regular weight and restrained, tightly tracked display typography. Favor a single-column flow, full-width project imagery, large editorial statements, and generous vertical pauses. Keep controls flat and understated: no cards, shadows, gradients, or rounded decoration. Make media the expressive layer, with interface elements remaining minimal and legible.
