North star · Use restrained navy and warm pale surfaces to frame tactile bedding photography, with editorial headlines and practical shopping controls.
The visual system anchors the store in deep navy #283455, used for the announcement and bundle bands, headings, navigation, links, and primary actions. Gallery White #fdfaf8 keeps the header and shopping areas bright, while cream and cool blue-gray surfaces distinguish editorial and promotional sections without breaking the calm palette. Warm bedding photography supplies most of the page’s color and texture; product images sit on restrained pale backdrops, while full-bleed lifestyle scenes carry campaign moments. Large serif display headlines contrast with compact, friendly BrandonText for navigation, product details, and controls. The long homepage alternates immersive banners with horizontal product and category browsing, using a spacious overall rhythm and dense information only in product cards and the footer. Borders are quiet and shadows minimal, so imagery, color blocks, and typography create hierarchy rather than stacked effects.
Compact body emphasis, product links, buttons, and uppercase eyebrow labels.
Aa 设计
BrandonTextWeb-Regular
网络字体 · 字重 400 · 占比 40%
免费替代：Nunito Sans
Navigation, supporting copy, captions, and form text.
Aa 设计
ToledoTS-Bold
网络字体 · 字重 400 · 占比 5%
免费替代：DM Serif Display
Display headings, including hero and editorial section titles.
角色
示例
字号
字重
行高
字距
一级标题
Primary campaign headline over the hero image.
Brooklinen
45px
400
1.15
0
二级标题
Major editorial and promotional section headings.
Brooklinen
36px
400
1.15
0
三级标题
Subsection and supporting campaign headings.
Brooklinen
30px
400
1.15
0
四级标题
Card or smaller editorial headings.
The quick brown fox 敏捷的狐狸
24px
400
normal
-0.01em
正文
Product details and emphasized short body copy.
The quick brown fox 敏捷的狐狸
14px
400
normal
-0.01em
辅助文字
Small labels, ratings, and supporting metadata.
The quick brown fox 敏捷的狐狸
12px
400
normal
-0.01em
按钮
Shopping actions and outlined secondary controls.
The quick brown fox 敏捷的狐狸
14px
400
1
-0.01em
导航
Main product navigation and footer navigation.
The quick brown fox 敏捷的狐狸
18px
400
0.78
-0.01em
链接
Product names and inline shopping or support links.
The quick brown fox 敏捷的狐狸
14px
400
normal
-0.01em
眉题
Compact uppercase labels above content.
The quick brown fox 敏捷的狐狸
14px
400
normal
0.12em
间距与布局
基准单位 4px · 密度：宽松
40px版块间距
40px元素间距
—卡片内边距
1312px内容最大宽度
1px
2px
3px
4px
5px
6px
8px
10px
12px
14px
16px
20px
24px
36px
40px
64px
The desktop page uses a wide, centered commerce canvas, with the measured content maximum at 1312px. A horizontal header leads into broad campaign bands and full-width lifestyle imagery; below, product and category carousels form repeated horizontal grids. Editorial and promotional sections alternate with product browsing to create a clear long-page rhythm. Keep generous separation between major blocks, but allow card details, swatches, footer links, and utility controls to remain compact. The footer switches to multiple aligned columns with a newsletter form.
圆角与层次
按钮 · 4px
输入框 · 20px
卡片 · 16px
图片 · 2px
导航 · 50%
inset · media
inset · other
sm · other
The interface is mostly flat: color bands, photographs, and pale section surfaces provide the layering. Use thin, low-contrast #dddddd outlines for restrained controls and only subtle shadowing where needed. Avoid pronounced card shadows or stacked panels; keep product cards visually open against their background.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Announcement strip
A narrow #283455 band above the main header, with centered light promotional link text and small side chevrons.
Commerce navigation
Bright header with wordmark, horizontal category links, search, account, and bag utilities; navigation uses BrandonTextWeb-Regular.
Campaign banner
Full-width lifestyle photo with centered headline, supporting copy, and paired shopping actions; dark overlay protects legibility.
Product carousel
Horizontal product cards on a pale field, with product imagery, compact names and pricing, ratings, swatches, and carousel arrows.
Category tiles
Photo-led category cards with concise labels overlaid near the bottom and horizontal browsing controls.
Newsletter footer
Multi-column footer on a cool pale surface, pairing store and support links with a rounded email field and signup action.
Imagery · Use tactile, natural-light bedroom and bedding photography as the primary visual material. Hero and campaign moments use wide, immersive scenes with centered text and actions; product collections isolate folded bedding or apparel on pale, quiet backdrops. Keep real fabric texture, lived-in styling, and varied warm and cool linens. No illustration-led visual language is evident; small product color swatches serve as utility details.
Anchor interface chrome and primary actions in #283455.
Keep shopping canvases bright with #fdfaf8.
Let bedding photography provide most visual richness.
Alternate immersive campaigns with scannable product rows.
Use serif display headlines against BrandonText utility copy.
Keep borders and elevation restrained.
Reserve green for small promotional callouts.
✕ 不该做
Do not replace the calm palette with saturated interface colors.
Do not put dense copy over busy photography without contrast support.
Do not use heavy shadows to separate every card.
Do not turn product grids into oversized editorial panels.
Do not use all-caps for long headings or body copy.
Do not make the footer feel like a separate unrelated brand.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Brooklinen-style commerce page with a calm, editorial bedding-store character. Use Midnight Linen (#283455) for navigation, headings, links, and primary actions; Gallery White (#fdfaf8) for the main canvas; Warm Muslin (#f9f3ed) and Misty Blue (#dde3ec) for occasional section bands. Use Soft Graphite (#6e6e6e) for secondary copy, Quiet Stitch (#dddddd) for subtle borders, and only tiny Sage Leaf (#417823) promotional accents. Pair a refined serif display face with a friendly compact sans for navigation, product details, and controls. Build a spacious wide layout that alternates full-width lifestyle campaigns with horizontal product and category browsing. Feature warm, tactile bedroom photography, legible text overlays, restrained controls, product swatches, and a structured multi-column footer. Keep surfaces flat and shadows minimal.
