North star · Keep the interface quiet and precise so full-bleed fashion photography and clearly organized products do the talking.
The visual system is anchored by Gallery White (#ffffff), which carries the header, open content areas, and footer, with Ink (#000000) providing crisp navigation and copy. Soft Stone (#f8f6f5) appears behind product cards, while Oat Paper (#f4edd9) is reserved for a warm promotional band and hairline borders. The homepage alternates clean, light shopping sections with broad, edge-to-edge lifestyle photography; the imagery supplies most of the page’s changing colour and emotional tone. Maison Neue Book is the dominant voice: compact uppercase navigation and captions contrast with more spacious, centered hero messaging. Product displays use orderly columns and minimal framing, preserving attention on garments. Generous white intervals separate dense product rows from large campaign imagery. Buttons and links remain understated rather than looking like heavy UI controls, supporting an editorial storefront that feels calm, direct, and image-led.
Primary family for navigation, headlines, product labels, body copy, and buttons.
Aa 设计
Maison Neue
网络字体 · 字重 400 · 占比 8%
免费替代：Inter
Supporting Maison Neue webfont family, measured as a smaller share of page typography.
Aa 设计
Maison Neue Demi
网络字体 · 字重 600 · 占比 1%
免费替代：Inter
Limited semibold emphasis within the broader Maison Neue family.
角色
示例
字号
字重
行高
字距
特大标题
Large uppercase campaign headline layered over the hero image.
Everlane
60px
500
0.67
0.04em
一级标题
Primary page or campaign title, set plainly with modest tracking.
The quick brown fox 敏捷的狐狸
24px
400
0.96
0.019em
二级标题
Uppercase section headings introducing editorial or shopping content.
The quick brown fox 敏捷的狐狸
23px
400
1.39
0.04em
三级标题
Subsection headings and product-feature titles with light emphasis.
The quick brown fox 敏捷的狐狸
21px
400
1.52
0.04em
四级标题
Compact supporting headings within content sections.
The quick brown fox 敏捷的狐狸
20px
400
1.2
0.03em
正文
Short descriptive copy, product information, and supporting text.
The quick brown fox 敏捷的狐狸
14px
400
1.33
0.02em
辅助文字
Uppercase product captions and compact image labels.
The quick brown fox 敏捷的狐狸
12px
400
1.33
0.02em
按钮
Small uppercase shopping actions and utility calls to action.
The quick brown fox 敏捷的狐狸
10px
400
1.6
0.024em
导航
Uppercase category navigation and top-bar utility links.
The quick brown fox 敏捷的狐狸
12px
400
1.3
0.02em
链接
Inline shopping, editorial, and footer links.
The quick brown fox 敏捷的狐狸
14px
400
1.43
0.02em
眉题
Small uppercase context label above campaign or section headings.
The quick brown fox 敏捷的狐狸
12px
400
1.33
0.04em
间距与布局
基准单位 4px · 密度：适中
48px版块间距
8px元素间距
—卡片内边距
—内容最大宽度
1px
3px
4px
6px
8px
12px
15px
16px
20px
24px
36px
40px
84px
Use a full-width canvas with a slim announcement strip above a clean, horizontal navigation bar. The hero and editorial campaign panels span the viewport, while category and product areas resolve into orderly multi-column rows. Alternate image-led bands with white or softly tinted shopping sections, keeping text aligned to the relevant image or grid. Spacing feels comfortable, with clear separation between major sections and compact product labels. A fixed maximum page width was not measured; preserve the screenshot’s broad, fluid composition rather than imposing an invented value.
圆角与层次
按钮 · 50%
hairline · button
The interface is largely flat, with no meaningful card shadows or raised panels. Product cards use a pale surface and minimal framing, while fine borders and separators provide quiet structure. The hero’s translucent dark gradient helps white copy remain readable over photography; maintain clear layering without adding heavy drop shadows.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Announcement strip
A narrow Slate Blue (#27456e) top band with centered, compact uppercase promotional copy and shopping links.
Primary navigation
White horizontal header with category links at left, centered wordmark, and search, account, and bag utilities at right.
Campaign hero
Full-width lifestyle photograph with centered white campaign text and small shopping links; use a dark image overlay only as needed for legibility.
Editorial image panels
Large adjacent lifestyle or material-led panels with short uppercase titles and low-key text links over the image.
Product card grid
Evenly arranged product imagery on white or Soft Stone (#f8f6f5), with concise uppercase or compact product labels below.
Footer
Light, multi-column link area with small uppercase group labels, subdued supporting text, and a newsletter signup field.
Imagery · Fashion and lifestyle photography is the defining visual content: full-bleed campaign portraits, garment close-ups, store scenes, and product-on-model imagery. Use naturalistic colour and soft, realistic lighting; crop generously so people and materials fill the frame. Hero copy sits directly over photography, while product imagery remains neatly tiled. Avoid decorative illustration or 3D elements that would compete with the photography.
Keep navigation and shopping labels compact and uppercase.
Use Gallery White (#ffffff) as the primary canvas.
Reserve Slate Blue (#27456e) for a restrained promotional strip.
Use Soft Stone (#f8f6f5) behind product cards.
Separate editorial imagery and product grids with comfortable whitespace.
✕ 不该做
Do not add heavy shadows or raised card treatments.
Do not use saturated interface colours beyond measured accents.
Do not clutter image-led sections with long copy.
Do not add rounded card corners; keep framing square and simple.
Do not let product labels overwhelm the product photography.
Do not invent page-width or spacing values beyond the measured system.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Everlane-style fashion storefront page with a restrained, editorial rhythm. Use Gallery White (#ffffff) as the canvas, Ink (#000000) for navigation and copy, Soft Stone (#f8f6f5) for product-card backing, and Oat Paper (#f4edd9) only for a warm promotional band or subtle separators. Keep Slate Blue (#27456e) limited to a slim announcement area. Use Maison Neue Book or a close sans-serif substitute, with compact uppercase navigation and captions, and regular-weight headlines. Pair full-width lifestyle photography with orderly product grids, short shopping links, and generous breathing room. Keep cards flat, edges square, and borders faint. Avoid decorative interface elements, loud colour, and excessive copy; the photography and garments should remain the strongest visual focus.
