North star · Keep the interface visually quiet and let oversized, authentic fashion photography provide the page’s strongest expression.
GANNI’s homepage pairs a nearly all-white commerce canvas with high-impact fashion photography. The opening hero is a full-bleed campaign image in warm, earthy tones, with oversized white branding and a small, centered discovery prompt layered over the photograph. The palette stays restrained in interface areas: black anchors the wordmark, navigation, product names and primary quick-buy actions; muted gray is reserved for secondary copy and search treatment. A pale warm off-white marks the footer, while the measured light gray appears as a subtle interface or gradient detail rather than a defining brand color. Helvetica Neue For Ganni is used throughout, with compact navigation and product text, understated headings, and uppercase button labels. Below the hero, the page alternates multi-column product carousels, category-link grids, and larger editorial campaign panels. Broad white intervals keep these dense shopping modules from feeling crowded. The result is a flat, image-led storefront with minimal framing and little decorative chrome.
Site-wide interface type for navigation, headings, body copy, product details, captions, and buttons.
角色
示例
字号
字重
行高
字距
一级标题
Hero and section headings, restrained in size and medium weight.
The quick brown fox 敏捷的狐狸
18px
500
normal
0
正文
Product descriptions and primary supporting copy.
The quick brown fox 敏捷的狐狸
14px
500
normal
0
辅助文字
Small supporting labels and secondary product details.
The quick brown fox 敏捷的狐狸
12px
400
1.4
0
按钮
Compact uppercase action labels, including quick-buy controls.
The quick brown fox 敏捷的狐狸
11px
400
normal
0.02em
导航
Header navigation and promotional shipping message.
The quick brown fox 敏捷的狐狸
14px
400
1
0
链接
Product names, color selectors, and category links.
The quick brown fox 敏捷的狐狸
14px
400
normal
0
间距与布局
基准单位 2px · 密度：适中
50px版块间距
20px元素间距
—卡片内边距
1400px内容最大宽度
1px
2px
4px
5px
10px
14px
15px
20px
24px
A full-width canvas with a measured page maximum width of 1400px supports the broad campaign imagery and shopping modules. The header is a compact horizontal band, with wordmark and category navigation aligned left and search and utility icons aligned right. A single-column full-bleed hero leads into repeated four- and five-column product carousels, category-link blocks, and two-column editorial features. Sections retain a comfortable rhythm with generous white separation; product areas remain orderly and information-dense without strong card frames.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The measured system is predominantly flat: white sections sit directly on the canvas, with no detected shadow system or meaningful radius scale. Separate content through whitespace and image placement rather than raised cards. Keep borders and hairlines sparse and understated; the black quick-buy button is a clear functional contrast, not a floating element.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Store header
White horizontal header with black GANNI wordmark, compact category links, search field, and outline utility icons.
Shipping announcement
Short centered shipping message in a narrow strip above the main navigation.
Campaign hero
Full-bleed lifestyle image with oversized white brand lettering and a small discovery link overlaid near the bottom.
Product carousel
Four- or five-column product presentation with concise names, prices, color choices, and black quick-buy actions.
Category links
Simple multi-column category destinations with headings and dot-separated links, presented on white.
Editorial feature
Large fashion image with a short campaign title and restrained Discover action.
Footer and signup
Warm off-white footer area with newsletter inputs and dense multi-column informational links.
Imagery · Use full-bleed, high-resolution fashion campaign photography for hero and collaboration moments, cropped close enough to emphasize garments, accessories, and styling. Product carousels use consistent catalog imagery with color choices and concise names nearby. Warm browns and neutrals in the photography are image content, not interface palette tokens. Favor real editorial photography over illustration, 3D, or decorative graphics.
Let full-bleed fashion photography lead the hero and editorial sections.
Use #000000 for primary text and prominent quick-buy actions.
Keep navigation and product labels compact and easy to scan.
Repeat consistent multi-column product modules.
Use whitespace instead of shadows to separate sections.
✕ 不该做
Do not turn warm campaign-image colors into interface accents.
Do not add decorative gradients as a dominant visual treatment.
Do not use heavy card borders or drop shadows.
Do not let navigation compete with the hero imagery.
Do not substitute generic illustrations for fashion photography.
Do not invent additional typefaces, colors, or radius styles.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new GANNI-style fashion storefront page with a quiet #ffffff Gallery White canvas and restrained #000000 Ink typography. Use Helvetica Neue For Ganni or a close sans-serif substitute such as Inter, keeping navigation, product information, and controls compact. Start with a narrow shipping announcement and a clean header, then give authentic fashion photography a full-bleed editorial hero with a minimal overlaid discovery action. Organize shopping content into repeated multi-column product carousels and simple category links, separated by generous white space. Use #686a6a Quiet Slate only for secondary interface copy and reserve #f8f8f5 Warm Porcelain for a soft footer surface. Keep components flat, corners square, borders sparse, and product actions high contrast. Treat warm colors within photographs as imagery rather than UI tokens.
