North star · Build the page as a spacious fashion-editorial collage, using black and white as the canvas and acid green as a sharp, purposeful interruption.
The page uses a deliberately stark palette: a full black opening canvas gives way to expansive white editorial sections, while electric green marks key headings, pull quotes, graphic shapes, and directional symbols. Red appears sparingly on selected collaboration links rather than defining the overall identity. The custom Offwhite sans-serif carries both oversized headings and compact explanatory copy; the hierarchy shifts between emphatic display statements and smaller, restrained narrative text. Layout is asymmetrical and collage-like, with offset portraits, cutout product imagery, rotated photographs, and tape-like graphics rather than conventional cards. Generous white space separates story beats, while occasional vivid green bands create abrupt visual anchors. Photography is predominantly monochrome or muted, helping the green graphics and typography remain the strongest colour signals. The page feels flat and poster-like: overlapping assets provide depth without relying on shadows, rounded corners, or decorative borders.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
强调色
表层色
中性色
功能色
页面底色 · Gallery White表层 · Editorial Black主文字 · Editorial Black次要文字 · Gallery White强调 · Volt Green强调 2 · Alert Red
Site-wide display, headings, narrative copy, captions, and links.
角色
示例
字号
字重
行高
字距
特大标题
Oversized editorial statements and major quote moments.
Off-White
96px
700
1
0
一级标题
Primary story titles and strongest section headings.
Off-White
72px
700
1
0
二级标题
Large supporting headlines and prominent narrative statements.
Off-White
42px
400
1.55
0
三级标题
Secondary editorial headings and section introductions.
Off-White
38px
600
1.55
0
四级标题
Compact story subsection headings.
Off-White
36px
400
1.19
0
正文
Explanatory brand-history paragraphs and supporting copy.
The quick brown fox 敏捷的狐狸
20px
400
1.55
0
辅助文字
Short image notes and small emphasized labels.
The quick brown fox 敏捷的狐狸
18px
600
1.55
0
链接
Large navigation or editorial links, including the ABOUT treatment.
Off-White
38px
600
1.55
0
间距与布局
基准单位 4px · 密度：适中
60px版块间距
—元素间距
—卡片内边距
740px内容最大宽度
40px
45px
60px
75px
120px
Use broad, single-column story bands, with measured content constrained to a 740px maximum width where appropriate. The screenshot shows substantial white space and deliberate offsets rather than a strict, repeated card grid. Combine edge-spanning colour fields with images and text that sit at different alignments; let overlap and asymmetry shape each narrative beat. Keep section transitions distinct, including the long black opening followed by white editorial content. The measured section rhythm uses a 60px section gap and a comfortable density.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The design is predominantly flat: measured data reports no shadows and no radius scale. Separate content through large fields of black, white, and green rather than card borders. Create depth through overlapping, rotated photographs and graphic cutouts, keeping edges crisp and avoiding UI-like containers.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Menu control
A small, unobtrusive three-line control sits at the upper-right of the black opening; retain the high-contrast graphic treatment.
Editorial links
Large semibold Offwhite links use Volt Green (#00fb34); selected collaboration links use Alert Red (#ff0000).
Story heading
Use expressive Offwhite sans-serif headings, often in Volt Green, positioned as part of the editorial composition rather than inside cards.
Pull-quote band
Set centered black quotation text against a full-width Volt Green field for a bold interruption between image-led passages.
Photo collage
Layer offset monochrome portraits and product cutouts with geometric green backplates; preserve clean, unrounded edges.
Tape graphic
Use yellow printed-tape imagery as a story-specific graphic motif, not as a core interface colour.
Imagery · Use fashion and founder photography as editorial cutouts and large monochrome portraits, interspersed with apparel product imagery. Mix isolated objects, angled photo panels, and overlapping assets with bright green graphic backplates and tape-like motifs. Keep photography muted or grayscale where possible so vivid green remains the dominant visual accent.
Keep the opening field stark and predominantly black.
Use #00fb34 for selective emphasis, not for every element.
Set long-form stories on expansive white space.
Let photographs and cutouts overlap asymmetrically.
Mix oversized headings with compact narrative copy.
Use monochrome imagery to protect the palette’s contrast.
✕ 不该做
Do not add rounded-card UI or drop shadows.
Do not turn the layout into a regular card grid.
Do not use red as a broad background or primary accent.
Do not crowd the whitespace between story beats.
Do not make every heading the same size or colour.
Do not introduce unmeasured colours into the core palette.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Create a new fashion-editorial page in Off-White’s visual language. Use Editorial Black (#000000) and Gallery White (#ffffff) as the primary canvases, with Volt Green (#00fb34) reserved for important headings, graphic shapes, links, and quote bands. Apply Alert Red (#ff0000) only to an occasional collaboration-style link. Use a clean sans-serif close to the measured Offwhite font, balancing large bold statements with compact regular body copy. Compose the page as spacious, asymmetrical editorial storytelling rather than a conventional grid: layer monochrome fashion photography, product cutouts, and crisp geometric graphics. Keep surfaces flat, corners square, and separation dependent on colour fields and whitespace rather than shadows or cards. Make every section feel like a distinct poster-like story beat.
