North star · Use deep indigo and generous white space to make friendly pet photography and clear shopping actions the focus.
The page is built on a white canvas with deep indigo as its visual anchor: it carries the logo, oversized headlines, navigation, and primary pill buttons. Soft pink makes the hero feel affectionate and energetic, while teal marks the brand-story section and orange gives the quiz block a strong, distinct band. Product cards sit quietly on pale gray, so colorful supplement packaging provides most of their visual variation. Athletics-Medium gives headlines a broad, rounded, contemporary character; Larsseit-Regular handles practical product copy and navigation, with uppercase letter-spaced navigation labels and a monospace eyebrow for small accents. A wide hero pairs left-aligned messaging and calls to action with a large lifestyle photograph. Product grids, split-image stories, and centered testimonials alternate down the page, with comfortable white space separating each block. Rounded controls and restrained borders keep shopping interactions approachable without adding heavy shadow.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
功能色
页面底色 · Gallery White表层 · Finn Teal表层 2 · Finn Indigo表层 3 · Mist Surface表层 4 · Night Navy主文字 · Finn Indigo次要文字 · Soft Gray弱文字 · Slate Ink描边 · Border Indigo强调 · Finn Teal强调 2 · Quiz Orange
Body copy, navigation, links, buttons, and product details.
Aa 设计
Athletics-Medium
网络字体 · 字重 400 / 500 · 占比 20%
免费替代：Manrope
Display headlines and section titles.
Aa 设计
Monosten
网络字体 · 字重 400 · 占比 2%
免费替代：Space Mono
Small eyebrow and code-style labels.
角色
示例
字号
字重
行高
字距
特大标题
Large display-scale headline treatment for prominent brand messaging.
Finn
133px
400
1
0
一级标题
Primary hero headline, “Hi! We love your dog.”
Finn
96px
400
1.04
0
二级标题
Large section headings such as shop and brand-story titles.
Finn
85px
400
1.18
0
三级标题
Secondary feature and testimonial headings.
Finn
83px
400
1
0
四级标题
Smaller display-style feature headings within editorial sections.
Finn
64px
400
0.72
0
正文
Standard explanatory copy, product details, and section descriptions.
The quick brown fox 敏捷的狐狸
15px
400
1.4
0
辅助文字
Compact product notes, reviewer details, and supporting metadata.
The quick brown fox 敏捷的狐狸
14px
400
1.64
0
导航
Uppercase, letter-spaced navigation and small utility labels.
The quick brown fox 敏捷的狐狸
14px
600
1
0.071em
链接
Inline links and shopping actions.
The quick brown fox 敏捷的狐狸
18px
400
1.4
0.05em
眉题
Small uppercase monospace labels used as a restrained accent.
The quick brown fox 敏捷的狐狸
13px
400
1
0.038em
代码
Technical or compact monospace label styling; not a prominent visible page pattern.
const style = 1;
13px
400
1
0.038em
间距与布局
基准单位 1px · 密度：适中
60px版块间距
9px元素间距
—卡片内边距
1200px内容最大宽度
5px
8px
9px
10px
12px
13px
15px
17px
20px
24px
30px
36px
40px
60px
70px
80px
A comfortable-width storefront uses a broad desktop canvas, with content reaching a measured maximum width of 1200px. The two-column hero balances left-aligned copy and calls to action against right-side lifestyle imagery. Full-width color bands break up the long white page, while product grids arrange cards in repeated columns and editorial features alternate text and photography. Section gaps follow the measured 60px rhythm, with smaller element gaps around 9px. The footer resolves the page into three content columns.
圆角与层次
按钮 · 9999px
卡片 · 20px
图片 · 50%
导航 · 9999px
hairline · nav
The interface is mostly flat: white space and full-width color bands establish hierarchy rather than shadow. Product tiles use pale gray backgrounds and rounded corners, while the quiz card and selected feature cards use a defined indigo outline. Buttons are solid indigo pills, and the measured navigation shadow is a subtle hairline rather than a strong elevation effect.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Announcement bar
A slim dark indigo strip at the top carries centered uppercase free-shipping copy in light text.
Primary pill button
Solid #161345 capsule CTA with light text and a simple arrow; used for shopping and quiz actions.
Hero
Large split layout: oversized indigo headline and paired CTAs on the left, dog-and-owner photography on a pink field to the right.
Product card
Pale #f9f9f9 rounded tile for package photography, product name, orange price, brief copy, and an indigo shop button.
Quiz feature
Bright orange band surrounds a white, dark-outlined panel with a large headline, short explanation, CTA, and dog silhouettes.
Editorial split
Two-column storytelling block combines concise copy with a large lifestyle photograph; the Finn Way section uses teal as its background.
Testimonial panel
Dark indigo section with a light centered headline, circular veterinarian portrait, quote, and compact portrait navigation.
Footer
Deep navy three-column footer with large primary links, smaller utility links, newsletter entry, and white Finn branding.
Imagery · Photography is central: the hero shows a person interacting with a dog against a pink field, while product grids use isolated supplement packaging. Editorial panels include dogs, owners, and lifestyle imagery. Product images are cleanly framed and supported by understated pale surfaces; customer and veterinarian portraits add social proof. The quiz panel uses simple dark dog silhouettes as illustration accents. Imagery is prominent, colorful, and mostly free of decorative overlays.
Anchor headlines and primary actions in Finn Indigo #161345.
Keep the main shopping canvas white and uncluttered.
Use Puppy Pink #ffcfdb for a welcoming lifestyle hero.
Reserve Finn Teal #60c4bf and Quiz Orange #ff7f00 for distinct feature bands.
Show product packaging prominently in quiet, pale cards.
Use rounded pill controls and restrained outlines.
Alternate product grids with photo-led editorial sections.
✕ 不该做
Do not replace the white canvas with a dark all-page background.
Do not use orange as the primary text or navigation color.
Do not add heavy shadows to cards or buttons.
Do not crowd product imagery with extra decoration.
Do not make every section use the same background color.
Do not let small product copy compete with oversized headlines.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Finn storefront page with a bright white canvas and a clear, playful pet-wellness voice. Use Finn Indigo #161345 for headlines, navigation, logos, and primary pill buttons; reserve Puppy Pink #ffcfdb for lifestyle hero moments, Finn Teal #60c4bf for brand-story bands, and Quiz Orange #ff7f00 for a standout interactive feature. Use Gallery White #ffffff and Mist Surface #f9f9f9 to keep product cards clean, with orange pricing and prominent package photography. Set large, rounded-feeling headlines in Athletics-Medium or a close substitute; use Larsseit-Regular or a similar sans for body, links, and controls. Alternate wide photo-led sections and product grids, leave comfortable white space, and use light borders instead of heavy shadows. Keep CTAs direct, rounded, and easy to find.
