Yung Studio 首页以近乎纯黑的画布、简洁白色文字和醒目的项目影像呈现工作室作品。编辑式作品流留出充足空间，让案例成为主角，并用少量彩色卡片点缀页面。
North star · Keep the canvas black and typography restrained so colorful project media, not interface chrome, commands attention.
The page is anchored by a pure black (#000000) canvas, with white (#ffffff) type and fine outlines establishing a crisp, high-contrast frame. The opening statement is large but restrained, aligned to the left; compact navigation sits above it, and a small text link provides the only immediate action. The portfolio feed shifts visual emphasis to media: a broad white project card sits beside a tall, pale-gold (#d4c98f) editorial card, while a vivid blue (#6083ff) card appears elsewhere as a deliberate accent. PolySans carries the headings, navigation, and body copy with clean, unembellished shapes; PolySans Mono is reserved for tiny uppercase code-like labels. The page has a compact, controlled rhythm, but its long black intervals make the featured projects feel isolated and deliberate. Rounded card corners soften the otherwise square, gallery-like composition.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
页面底色 · Studio Black表层 · Muted Gold表层 2 · Soft Silver主文字 · Gallery White次要文字 · Studio Black弱文字 · Soft Silver描边 · Gallery White强调 · Electric Blue强调 2 · Muted Gold强调 3 · Signal Green
Display, headings, body, navigation, links, and card copy
Aa 设计
__polySansMono_2d6016
网络字体 · 字重 400 · 占比 12%
免费替代：IBM Plex Mono
Small code-like labels
角色
示例
字号
字重
行高
字距
特大标题
Large introductory or statement headlines.
Yung Studio
60px
400
1.1
0
一级标题
Primary page and major section headings.
Yung Studio
40px
400
1.1
0
二级标题
Secondary section headings and feature titles.
Yung Studio
28px
400
1.3
0
三级标题
Emphasized card or subsection headings.
The quick brown fox 敏捷的狐狸
24px
600
1.33
0
正文
Project descriptions and supporting editorial copy.
The quick brown fox 敏捷的狐狸
18px
400
1.56
0
辅助文字
Dates, metadata, and compact supporting labels.
The quick brown fox 敏捷的狐狸
16px
400
1.5
0
导航
Small uppercase labels in the primary navigation.
The quick brown fox 敏捷的狐狸
12px
600
1
0
链接
Text actions such as About Us and Contact Us.
The quick brown fox 敏捷的狐狸
16px
400
1.5
0
代码
Tiny uppercase monospace project or category labels.
const style = 1;
10px
400
1
0
间距与布局
基准单位 4px · 密度：紧凑
36px版块间距
10px元素间距
16px卡片内边距
1368px内容最大宽度
4px
7px
8px
9px
10px
12px
13px
16px
20px
32px
36px
40px
Use a dark, nearly full-bleed canvas with content aligned to the left and a measured maximum width of 1368px. The header is compact and spans the upper area; navigation and outlined studio/contact controls sit opposite the wordmark. The introduction is short, followed by a portfolio feed with asymmetrical media cards. Keep sections separated by generous black negative space rather than visible bands. The overall density is compact within individual cards, while the page rhythm alternates concise content with large open stretches.
圆角与层次
按钮 · 10px
卡片 · 10px
导航 · 6px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is largely flat, with no measured shadows or gradients. Use fine white outlines for navigation controls and a subtle horizontal hairline near the footer. Layer card copy directly over or beneath project media as shown, using rounded corners to distinguish image-led surfaces from the black canvas.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Header navigation
White wordmark and compact uppercase navigation sit on black; outlined Studio and Contact controls use white strokes and rounded corners.
Intro statement
A left-aligned, multi-line white headline is followed by a small About Us link with an arrow.
Featured project card
A broad rounded media card uses a white caption panel with black title and supporting copy.
Editorial project card
A tall media-led card uses a pale-gold (#d4c98f) text surface, dark copy, and compact date/category metadata.
Sound control
An outlined dark control overlays project media, with uppercase ENABLE SOUND text.
Footer
A compact navigation and copyright area returns to black, with a thin horizontal divider and small links.
Imagery · Project imagery is the main color source: vivid, varied photographic and motion-led work appears inside rounded cards. The lead skin-science image is a wide crop, paired with a taller audiovisual project card. Keep media framed cleanly and allow its own colors and graphics to remain prominent; do not add decorative illustration to the surrounding black interface.
Keep primary interface text white and high contrast.
Let project imagery supply most visual variety.
Use asymmetrical card sizes in the work feed.
Keep navigation compact and uppercase.
Reserve bright colors for project surfaces and media.
✕ 不该做
Do not fill the page with colored section bands.
Do not add gradients or decorative shadows.
Do not make every project card the same shape.
Do not crowd the introductory headline with controls.
Do not treat illustration colors as global interface colors.
Do not add oversized, colorful button styling.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Yung Studio-style page on a #000000 canvas, using white (#ffffff) for clear typography, navigation, and hairline outlines. Keep the header compact and the introductory statement left-aligned, then let large project imagery drive the page. Arrange portfolio cards asymmetrically, with a broad lead card and selected contrasting surfaces such as Muted Gold (#d4c98f) or Electric Blue (#6083ff); use Signal Green (#00d57b) only when supported by the project media. Set most interface text in a clean sans such as Inter, with a monospace face for tiny uppercase metadata. Keep card corners softly rounded, shadows absent, and content rhythm spacious through black negative space. Use concise copy, restrained controls, and a thin footer divider. Avoid gradients, excess decoration, and uniform card layouts.
