North star · Let calm monochrome commerce UI frame large, muted campaign photography without competing with it.
The visual system is built on white canvas, black text, and restrained pale-gray product surfaces. Full-width campaign photography supplies the warmth and tonal variation; the palette’s muted clothing and studio backgrounds define the mood more than interface color. Favorit is used throughout, with measured medium headings, compact navigation and button labels, and regular-weight product details. The page alternates spacious, full-bleed editorial imagery with dense horizontal product rails. Centered campaign copy sits directly over photography, while product sections return to white backgrounds and left-aligned headings. Thin borders and rectangular controls keep the interface crisp rather than decorative. New badges use a soft gray fill, and quick-add controls invert to black with white text. Maintain a clear contrast between immersive brand imagery and highly legible, practical shopping UI.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
功能色
页面底色 · Gallery White表层 · Mist Gray主文字 · Soft Ink次要文字 · Gallery White描边 · Fine Line
Site-wide type for headings, body copy, product details, navigation, links, and buttons.
角色
示例
字号
字重
行高
字距
一级标题
Primary campaign headline over hero photography.
Adanola
36px
500
1.33
0
二级标题
Section headings such as New & Trending.
Adanola
30px
500
1.2
0
三级标题
Product names and prominent smaller headings.
The quick brown fox 敏捷的狐狸
20px
700
1.4
0
正文
Product details and supporting store copy.
The quick brown fox 敏捷的狐狸
14px
400
1.33
0
辅助文字
Compact product labels and secondary metadata.
The quick brown fox 敏捷的狐狸
12px
400
1.33
0
按钮
Shop, view-all, and quick-add controls.
The quick brown fox 敏捷的狐狸
12px
500
1.33
0
导航
Header category links and footer navigation labels.
The quick brown fox 敏捷的狐狸
12px
400
1.33
0
链接
Product names, utility links, and promotional text.
The quick brown fox 敏捷的狐狸
12px
400
1.33
0
间距与布局
基准单位 4px · 密度：适中
54px版块间距
8px元素间距
94px卡片内边距
1392px内容最大宽度
2px
4px
6px
8px
10px
12px
16px
24px
The page uses full-width campaign panels interleaved with constrained shopping sections. Measured page max width is 1392px, with product rails arranged as dense multi-column rows and section headings aligned to the left. Hero copy is centered over the image; product and footer content is predominantly left-aligned. Section spacing is comfortable, with a measured 54px section gap and 8px element gap. Keep the layout responsive while preserving the contrast between expansive image bands and compact merchandise grids.
圆角与层次
按钮 · 4px
导航 · 4px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is mostly flat, with no measured shadows. Use white space, subtle hairlines, and image boundaries to separate regions rather than raised cards. Product cards sit directly on the page; gray badges and black quick-add buttons provide the limited layering and contrast.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Announcement bar
A narrow black strip above the white header, with centered white delivery copy.
Store navigation
White horizontal header with compact black category links, centered wordmark, and utility icons.
Campaign hero
Full-bleed photography with centered headline and a compact, high-contrast shopping CTA.
Product rail
Horizontal multi-item merchandise carousel with image, compact name and price, color options, and quick-add.
New badge
Small rectangular pale-gray badge with black text, placed over product imagery.
Quick Add
Black rectangular product action with white Favorit text; measured label uses 12px bold.
Footer
White multi-column link area with bold wordmark, compact category lists, and fine divider.
Imagery · Photography is the primary visual expression: editorial models wear neutral, dark, and muted activewear in soft studio settings. Campaign panels use full-bleed compositions with centered white or dark copy, while product cards show individual looks against pale backgrounds. Measured page sections include video in the fabric story. Favor natural poses, muted grading, and uncluttered framing; interface illustrations are not a defining element.
Use white space and black type as the default interface foundation.
Give campaign photography the dominant visual area.
Keep navigation and shopping labels compact and clear.
Use black filled controls for quick-add actions.
Keep product cards flat with restrained gray badges.
Alternate image-led storytelling with practical product rails.
✕ 不该做
Do not introduce a bright interface accent palette.
Do not add shadows or decorative card elevation.
Do not place dense copy over campaign photography.
Do not round controls beyond the measured minimal treatment.
Do not let product UI overpower the photography.
Do not treat gradient sample colors as core brand colors.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a fashion storefront page in Adanola’s restrained editorial style. Use Gallery White (#ffffff) as the canvas and Soft Ink (#000000) for navigation, headings, product details, and primary actions. Keep Mist Gray (#e5e7eb) to subtle product surfaces or badges; use Fine Line (#f2f2f2) only for delicate separators. Treat Stone Haze (#dfe2e1) and Slate Blue (#283b4e) as incidental measured gradient colors, not a required brand treatment. Use Favorit or a close sans-serif substitute, compact labels, and medium-weight headings. Arrange a clean header, full-bleed muted campaign image, product rail, and editorial content bands. Keep product cards flat, with concise details and black quick-add controls. Let photography carry the color and mood; keep the interface quiet, direct, and legible.
