North star · Pair warm, open editorial space with expressive olive-ink type and selective lime shopping cues.
The page is anchored by a warm peach canvas (#f6e6d9) and deep olive-ink typography (#3c422e), creating a tactile, food-forward foundation. Acid lime (#d1e030) marks prominent promotional bands and shopping actions, while the softer green and yellow accents appear in selected sections and details. Large condensed Garamond headlines contrast with the typewriter-like body face, giving product stories a distinctive, printed editorial character. The layout alternates broad, calm stretches of canvas with vivid bands, grouped product cards, and occasional full-bleed photography. Product imagery is clear and appetizing; illustrations add hand-drawn personality rather than competing with the products. The overall composition is spacious, yet not sterile: repeated labels, playful copy, thin rules, and oversized brand lettering keep the page lively. Keep the measured palette intact and treat darker screenshot colors as photographic content, not brand surfaces.
Body copy, navigation, buttons, links, and small product text
Aa 设计
ITC Garamond Condensed
网络字体 · 字重 400 / 500 · 占比 13%
免费替代：Cormorant Garamond
Display headlines, section titles, and prominent product names
Aa 设计
Apercu
网络字体 · 字重 400 · 占比 2%
免费替代：DM Sans
Small uppercase captions and compact labels
角色
示例
字号
字重
行高
字距
特大标题
Oversized brand wordmark-style statements and major display moments.
GRAZA
120px
400
1
-0.03em
一级标题
Hero headline and primary page-level statement.
GRAZA
102px
500
0.9
-0.021em
二级标题
Large section headlines and editorial statements.
GRAZA
72px
400
1
-0.03em
三级标题
Product names and prominent subsection headings.
GRAZA
48px
400
1
0
四级标题
Secondary product and editorial headings.
GRAZA
46px
400
1
-0.031em
正文
Product descriptions, explanatory copy, and supporting stories.
The quick brown fox 敏捷的狐狸
16px
400
1.5
0
辅助文字
Uppercase category, product, and metadata labels.
The quick brown fox 敏捷的狐狸
13px
400
1
0
按钮
Shopping actions and prominent interactive controls.
The quick brown fox 敏捷的狐狸
16px
500
1.5
0
导航
Header navigation and compact menu labels.
The quick brown fox 敏捷的狐狸
16px
500
1.5
0
链接
Uppercase inline and section-level shopping links.
The quick brown fox 敏捷的狐狸
16px
500
1
0
间距与布局
基准单位 4px · 密度：宽松
35px版块间距
68px元素间距
—卡片内边距
1380px内容最大宽度
4px
8px
10px
12px
16px
20px
24px
30px
32px
35px
36px
40px
48px
60px
68px
The measured page max width is 1380px, with a spacious density and a 4px base spacing unit. The homepage uses a long vertical sequence of mostly full-width sections, shifting from a cinematic full-bleed hero to centered product storytelling, multi-column product cards, and a broad content feed. Product groupings use three columns; the footer divides into three areas. Preserve broad open canvas stretches between denser bands, and use centered or left-aligned headings according to each section rather than imposing one alignment throughout.
圆角与层次
按钮 · 10px
输入框 · 8px
卡片 · 20px
图片 · 20px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The system reads mostly flat, with color bands and imagery doing the work of separating sections. Use fine olive-ink outlines and occasional dashed card borders instead of pronounced shadows. Cards and media have measured rounded treatments, while the header can layer over photography. Preserve clear contrast between flat peach canvas, lime bands, and image-led regions.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Overlay navigation
Place the GRAZA wordmark at the left and compact shopping links, utility icons, and a pale rounded cart control over hero photography.
Lime shopping CTA
Use a high-contrast #d1e030 pill-shaped action with olive-ink text and a fine outline for primary shopping prompts.
Editorial product card
Group bottle photography, uppercase category and price captions, condensed product name, and short typewriter description on the peach canvas.
Outline product link
Use olive-ink text and a fine or dashed outline for secondary product actions; keep typography direct and compact.
Illustrated fact panel
Pair a hand-drawn olive-themed illustration with a brief fact and small navigation controls in a spacious canvas section.
Newsletter form
Use a bordered email input, typewriter-style text, and a small bright green submit cue in the footer.
Social image feed
Show a horizontal row of varied food and lifestyle thumbnails beneath a small editorial heading and follow link.
Imagery · Use appetizing, natural-light product and food photography, including close-up cooking scenes and clear bottle imagery. Hero and sourcing sections can use full-bleed video or photography with a darkened overlay and light text. Keep product images framed cleanly within light cards. Hand-drawn olive and character illustrations provide small, playful narrative moments; they are illustrative, not the source of the core palette.
Reserve #d1e030 for high-priority promotional moments.
Set large headlines in a condensed editorial serif.
Pair product photography with concise typewriter-style copy.
Let illustrations add personality without displacing product imagery.
✕ 不该做
Do not turn photographic shadow colors into interface palette colors.
Do not use lime as a continuous page background.
Do not crowd the open editorial sections with dense copy.
Do not replace the distinct headline and body type contrast with one font.
Do not add heavy shadows or glossy interface effects.
Do not make product cards look like generic dashboard tiles.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new GRAZA-style food and beverage page with Peach Paper (#f6e6d9) as the main canvas and Olive Ink (#3c422e) for text and outlines. Use Citrus Lime (#d1e030) selectively for primary shopping actions and promotional bands; keep Herb Green (#9eef80) and Marigold Pop (#fbd535) as smaller accents. Set display headlines in a condensed editorial serif and body, navigation, and buttons in a typewriter-like monospace; use a clean sans for small uppercase captions. Alternate spacious editorial sections with product photography, structured bottle cards, and occasional full-bleed food imagery. Add simple hand-drawn illustrations as supporting details. Favor flat color fields, thin borders, rounded controls, and open section rhythm. Make shopping links obvious without making the page feel like a conventional storefront template.
