North star · Keep the interface monochrome and flat, and let tactile product photography provide the page’s warmth and visual variety.
The visual strategy is deliberately quiet: a white canvas and black typography let product photography carry most of the colour and atmosphere. A narrow warm-beige announcement strip adds a subtle note of warmth, while the rest of the interface stays flat and unembellished. F-Grotesk gives the wordmark, navigation and category labels a clean contemporary presence; Maison-Neue-Mono sets compact supporting copy and utility text, lending the editorial details a precise, workshop-like tone. The homepage uses a varied, asymmetric image grid rather than uniform product cards. Large fashion photographs sit beside smaller category images, with short white labels placed over the imagery. Generous white space in the lower brand-information area contrasts with the dense visual browsing above. Thin separators and carefully aligned blocks organize the page without shadows, rounded cards or decorative effects. Keep the interface restrained and let real, warm-toned photography supply the richness.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
强调色
表层色
中性色
页面底色 · Gallery White主文字 · Studio Ink次要文字 · Gallery White描边 · Gallery White
文字
背景
对比度
WCAG
#000000 Studio Ink
#ffffff Gallery White
21:1
AAA
字体
字号阶梯：Custom（比例约 2.044，正文 13px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
F-Grotesk
网络字体 · 字重 400 · 占比 62%
免费替代：Inter
Wordmark, navigation, category labels and larger editorial headings.
Aa 设计
Maison-Neue-Mono
网络字体 · 字重 400 · 占比 38%
免费替代：Space Mono
Compact body copy, utility labels, buttons and small studio information.
角色
示例
字号
字重
行高
字距
特大标题
Oversized editorial display type where prominent brand statements appear.
Glein
111px
400
1.2
0
一级标题
Primary page or brand heading in the information section.
Glein
30px
400
1.2
0
二级标题
Uppercase headings for the studio’s values and materials.
The quick brown fox 敏捷的狐狸
20px
400
1.2
0
正文
Compact monospace descriptions and supporting editorial copy.
The quick brown fox 敏捷的狐狸
13px
400
1.19
0
按钮
Small monospace label for utility controls.
The quick brown fox 敏捷的狐狸
13px
400
1.19
0
导航
Header navigation and the centered Glein wordmark.
The quick brown fox 敏捷的狐狸
15px
400
1.3
0
代码
Monospace utility and studio-detail text.
const style = 1;
13px
400
1.19
0
间距与布局
基准单位 2px · 密度：适中
48px版块间距
8px元素间距
—卡片内边距
—内容最大宽度
7px
8px
10px
11px
13px
18px
20px
26px
30px
36px
42px
91px
156px
200px
The page combines a compact, full-width announcement and navigation header with a long, image-led category mosaic. The shop area uses an asymmetric multi-column composition: broad feature images balance smaller adjacent tiles, with slim white gutters separating them. Category labels sit over the photographs rather than inside boxed cards. A later brand-information band shifts to a more open layout, with the wordmark offset beside a compact grid of editorial statements. The overall rhythm alternates dense browsing imagery with generous white space; no measured maximum width is specified.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is essentially flat: no measured shadows, gradient treatments, or rounded component system. White gutters and subtle hairlines separate content, while the beige announcement strip forms a shallow top band. Image tiles provide depth through their own lighting and composition, not through interface layering.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Announcement strip
A narrow, full-width Warm Parchment band carrying repeating shipping and returns messages in small dark text.
Primary navigation
A spacious white header with shop and studio links, centered Glein wordmark, language choices and basket utility.
Category image tile
Photography-led rectangular tile with a concise white category title and an underlined browse prompt over the image.
Asymmetric category mosaic
A varied grid combining a large garment image with smaller accessory or product tiles, divided by narrow white gutters.
Studio values block
An open white section with a large Glein wordmark alongside compact uppercase statements and monospace descriptions.
Footer information
Small, dark utility links and studio contact details arranged as compact groups on white.
Imagery · Photography is the defining visual material: apparel on models, close product details, accessories, and calm interiors. Images are cropped into varied rectangular tiles, often filling their grid areas edge to edge. Natural light, warm surfaces, and earthy product tones contrast with the white interface. Category titles and small underlined prompts overlay the photographs. No illustration or 3D treatment defines the page.
Use Gallery White (#ffffff) as the dominant interface surface.
Set primary interface text in Studio Ink (#000000).
Reserve Warm Parchment (#ebe6dc) for a restrained announcement accent.
Build browsing around an asymmetric grid of real product photography.
Overlay category labels directly on images with clear contrast.
Pair F-Grotesk display text with Maison-Neue-Mono utility copy.
✕ 不该做
Don’t add gradients, decorative shadows, or rounded-card styling.
Don’t make the interface more colourful than the product imagery.
Don’t force every image into equal-sized product cards.
Don’t replace the editorial photography with generic illustrations.
Don’t use oversized interface chrome that competes with the imagery.
Don’t add unmeasured colour values or spacing specifications.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Glein-style ecommerce page with a restrained, editorial studio feel. Use Gallery White (#ffffff) for the canvas and Studio Ink (#000000) for navigation, headings and copy; use Warm Parchment (#ebe6dc) only as a quiet announcement-band accent. Pair a clean F-Grotesk-like sans serif for navigation and display text with a compact Maison-Neue-Mono-like typewriter face for utility details and body copy. Keep the header clear and low-profile. Make product photography the visual focus in an asymmetric mosaic of varied rectangular tiles, with short readable labels overlaid directly on images. Follow image-heavy browsing with open white editorial content, aligned wordmark and compact brand statements. Favor crisp gutters and flat surfaces; avoid shadows, gradients, rounded cards, invented palette colours and arbitrary measurements.
