North star · Keep the interface nearly monochrome and let centered, editorial lifestyle media provide the page’s visual impact.
The page is defined by a black canvas (#000000) that occupies nearly the entire viewport, giving the monochrome campaign video room to command attention. White (#ffffff) carries the main navigation, links, outlines and primary text; muted gray (#afafaf) is reserved for the thin announcement ticker and subdued supporting navigation. The dark charcoal surface (#131313) belongs to media rather than functioning as a broad section band. Typography uses NeueHaasGroteskTP55R throughout: regular-weight sans serif, uppercase labels and compact supporting copy contrast with a large, tightly led uppercase display heading elsewhere in the system. The header stays horizontal and spare, with brand, centered category links and cart aligned along a fine divider. Below it, a portrait-oriented monochrome lifestyle video sits centered with generous black space around it. Spacing is comfortable but composition remains deliberately sparse; outlined controls and hairlines provide structure without shadows or decorative color.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
表层色
中性色
页面底色 · Deep Canvas表层 · Gallery White表层 2 · Media Charcoal主文字 · Gallery White次要文字 · Quiet Gray描边 · Quiet Gray
文字
背景
对比度
WCAG
#ffffff Gallery White
#000000 Deep Canvas
21:1
AAA
#ffffff Gallery White
#131313 Media Charcoal
18.58:1
AAA
#afafaf Quiet Gray
#000000 Deep Canvas
9.57:1
AAA
#afafaf Quiet Gray
#ffffff Gallery White
2.19:1
不达标
#afafaf Quiet Gray
#131313 Media Charcoal
8.47:1
AAA
字体
字号阶梯：Custom（比例约 1.964，正文 14px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
NeueHaasGroteskTP55R
网络字体 · 字重 400 · 占比 100%
免费替代：Inter
Site-wide type for navigation, promotional strips, headings, body copy, buttons and links.
角色
示例
字号
字重
行高
字距
一级标题
Large uppercase campaign or page headline, used sparingly.
CHAIBOY
54px
400
0.89
0
二级标题
Compact uppercase section headings.
The quick brown fox 敏捷的狐狸
18px
400
1.11
0
正文
Uppercase supporting and descriptive copy.
The quick brown fox 敏捷的狐狸
14px
400
1.29
0
辅助文字
Small uppercase labels and secondary details.
The quick brown fox 敏捷的狐狸
11px
400
1.27
0
按钮
Uppercase text within white outlined CTA controls.
The quick brown fox 敏捷的狐狸
14px
400
1.29
0
导航
Uppercase category, cart and promotional navigation.
The quick brown fox 敏捷的狐狸
14px
400
1.29
0
链接
Uppercase inline actions and product links.
The quick brown fox 敏捷的狐狸
14px
400
1.29
0
间距与布局
基准单位 1px · 密度：适中
42px版块间距
—元素间距
—卡片内边距
1420px内容最大宽度
1px
2px
4px
5px
6px
7px
9px
10px
15px
16px
42px
78px
90px
Use a full-width black canvas with a slim repeating announcement ticker above a single horizontal navigation row. Place the brand at the left, category links near the center and cart at the right, separated from content by a fine rule. The measured page max width is 1420px. In the first viewport, center portrait media beneath the header and preserve broad black margins on both sides. The composition is comfortable and intentionally sparse; avoid cards or dense multi-column content.
圆角与层次
按钮 · 5px
导航 · 4px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The design is flat, with no measured shadows or gradients. Separate the announcement strip, header and content through contrast and thin rules rather than raised panels. CTA buttons use a one-pixel white outline and a subtle measured radius; media rests directly against the black canvas without a card frame.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Announcement ticker
A repeating uppercase promotional strip in #afafaf, with small compact copy and subdued order or shop controls.
Primary navigation
A single horizontal row: CHAIBOY at left, category links centered, and CART at right; separated from the page by a thin rule.
Transparent button with white uppercase text and a 1px white border; measured button radius is 5px.
Promotional nav control
Small uppercase ORDER NOW control using #afafaf fill and border with white text; measured radius is 4px.
Product action link
Simple uppercase white ADD link without a filled background or card-like treatment.
Imagery · Use lifestyle photography or video with an editorial fashion sensibility. The visible campaign is portrait-oriented, centered, and treated in black and white; people and street details provide the narrative while surrounding black space keeps the frame distinct. Prefer cinematic, natural moments over isolated product renders. Keep image colors restrained so media supports, rather than disrupts, the monochrome identity.
Use white for primary navigation and outlined actions.
Keep promotional ticker text muted gray.
Center portrait campaign media within broad negative space.
Use uppercase regular-weight sans-serif typography.
Separate header and content with restrained hairlines.
✕ 不该做
Do not introduce bright accent colors.
Do not add shadows or decorative gradients.
Do not surround every item with a card.
Do not crowd the centered media with extra content.
Do not use heavy or lowercase display typography.
Do not turn the announcement strip into a dominant hero.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new CHAIBOY-style page with a black (#000000) canvas and a sparse fashion-editorial composition. Use NeueHaasGroteskTP55R or a close free sans-serif substitute, in regular weight and predominantly uppercase. Place a restrained promotional ticker in Quiet Gray (#afafaf) above a horizontal header with the brand left, category navigation centered, and cart right; use a fine divider below. Make Gallery White (#ffffff) the primary text and link color, and use it for transparent, thin-outlined CTAs. Center portrait lifestyle video or monochrome photography with generous black negative space. Treat Media Charcoal (#131313) as a subtle media surface, not a broad decorative band. Keep the layout flat, avoid shadows and gradients, and let imagery carry the visual emphasis. Preserve comfortable spacing and concise navigation.
