North star · Keep the interface quiet and monochrome so full-bleed fashion photography and its editorial overlays lead the experience.
The page uses a white canvas and near-monochrome interface so the campaign photography carries nearly all of the visual colour. Black anchors the navigation, service strip, icons and key text; muted greys appear in secondary copy and fine footer rules. The images supply the warm leather, autumnal brown, cream and occasional cool neutrals, but these are photographic content rather than a reusable brand palette. A compact sans-serif utility system sits above oversized campaign imagery. The hero overlays a large, high-contrast editorial headline and supporting copy directly on the photograph, while later blocks alternate split category tiles with wide collection banners. The composition is deliberately image-led, using edge-to-edge media and narrow white separators instead of decorative containers. Repeated, clearly framed promotional areas create a steady browsing rhythm, while the header and footer remain practical and understated.
Measured interface font for navigation, body text, captions and headings.
角色
示例
字号
字重
行高
字距
一级标题
Large uppercase campaign or page heading; campaign lettering may be image artwork.
Cider
36px
700
1.14
0
正文
Bold uppercase promotional labels and compact emphasis copy.
The quick brown fox 敏捷的狐狸
14px
700
1.15
0
辅助文字
Small supporting copy and secondary campaign details.
The quick brown fox 敏捷的狐狸
12px
400
1.33
0
导航
Regular-weight storefront navigation and utility links.
The quick brown fox 敏捷的狐狸
14px
400
1.43
0
间距与布局
基准单位 4px · 密度：适中
48px版块间距
8px元素间距
—卡片内边距
1416px内容最大宽度
1px
4px
5px
8px
10px
12px
16px
20px
24px
48px
The measured page uses a comfortable-density layout with a maximum content width of 1416px, close to the viewport width shown. A compact horizontal header centers the Cider wordmark between navigation and utility controls; a narrow black service strip sits directly beneath. The hero and subsequent campaign blocks use full-bleed media, with split tiles and wide banners creating varied alignment. White separators define image boundaries. The measured spacing scale is built around a 4px base, with a 48px section gap; preserve generous campaign breathing room without adding arbitrary card padding.
圆角与层次
输入框 · 2px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The measured system reports no shadows, and the screenshots reinforce a flat, print-like presentation. Separate content with white space, image boundaries and restrained hairlines rather than raised cards. Keep the header and service strip clearly stacked, but avoid unnecessary depth effects or decorative containers.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Utility header
White horizontal bar with menu and category links at left, centered Cider wordmark, and search plus compact account, wishlist and shopping icons at right.
Service announcement strip
Slim black band immediately beneath the header, using small white shipping and returns messages arranged across the bar.
Campaign hero
Full-width fashion image with a large white editorial headline, short supporting line and outlined shop CTA overlaid near the left edge.
Split category tiles
Adjacent edge-to-edge campaign images with centered white uppercase category labels and narrow white separation.
Collection banner
Wide image-led promotion with oversized collection lettering and a small contrasting shop action embedded in the composition.
Footer and app links
White footer with grouped company and help links, app-store actions, signup and social details, separated by fine grey rules.
Imagery · Fashion photography is the dominant visual system: large campaign portraits, styling details, and seasonal category imagery fill nearly the entire page. The first hero frames a reclining model across a warm leather setting, with white editorial copy and a bordered CTA overlaid on the left. Later promotions alternate paired portrait tiles and panoramic collection artwork. Treat these colours as image-specific, not UI tokens.
Let campaign photography dominate each promotional block.
Use restrained sans-serif typography for interface copy.
Place concise campaign copy directly over imagery when legible.
Use white separators to define image-grid boundaries.
Keep utility navigation compact and easy to scan.
✕ 不该做
Do not treat photographed browns as brand colour tokens.
Do not add gradients or decorative colour accents.
Do not place every campaign inside a rounded card.
Do not add shadows to the flat storefront surfaces.
Do not let interface chrome compete with the imagery.
Do not invent spacing or radii beyond measured values.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Cider-style fashion storefront page with a clean, white Gallery White (#ffffff) canvas and restrained Runway Ink (#000000) interface. Keep navigation compact, with a centered wordmark, utility controls, and a slim dark service strip. Use full-bleed fashion photography as the primary content; treat warm campaign colours as image content, not brand tokens. Arrange promotions as a large editorial hero, split category tiles, and wide collection banners, separated by crisp white boundaries. Use Helvetica Neue or a close sans-serif substitute such as Inter, with regular navigation, bold uppercase promotional labels, and strong editorial headings. Keep the layout flat: no shadows, no ornamental gradients, and only quiet rules such as Quiet Line (#e5e5e5) in supporting areas. Make the imagery and concise overlays the focus.
