On 首页以大幅训练场景摄影开场，搭配清爽的黑白购物界面。醒目的商品图与紧凑的编辑式内容，让运动、装备和探索成为视觉重点。
North star · Let immersive, authentic athletic photography lead, then use restrained black-and-white commerce UI to make browsing effortless.
The page is built around a white canvas and near-black typography, with the brand’s restrained palette letting photography supply most of the color. The first viewport is a full-bleed training image with a transparent, light navigation overlay and white hero copy positioned low over the darker part of the photograph. Below it, white sections use black headings and generous breathing room to organize category imagery, shoe collections, new arrivals, and brand stories. On’s custom sans-serif carries nearly all interface and headline work: larger headings are confident and compact, while body copy remains clear and direct. The mono face is reserved for small uppercase labels and product badges. Repeated image cards and horizontal product rows create a consistent shopping rhythm. Buttons are strongly rounded, generally black or white according to contrast needs. The measured brown accent is limited to small outlined badges; it is not a dominant brand color.
Primary display, navigation, product, and interface sans-serif.
Aa 设计
On Mono
网络字体 · 字重 500 · 占比 3%
免费替代：Roboto Mono
Eyebrows, product badges, and compact metadata.
角色
示例
字号
字重
行高
字距
一级标题
Hero headline and high-impact display text.
On
49.5px
700
1.2
-0.01em
二级标题
Section headings and prominent editorial statements.
On
31px
400
1.3
0
三级标题
Subsection headings and featured content titles.
The quick brown fox 敏捷的狐狸
24px
700
1.2
0
四级标题
Product and compact card headings.
The quick brown fox 敏捷的狐狸
20px
700
1.5
0
正文
Supporting copy, product details, and descriptions.
The quick brown fox 敏捷的狐狸
13.5px
400
1.3
0
辅助文字
Uppercase compact labels and product metadata.
The quick brown fox 敏捷的狐狸
12px
500
1.5
0.12em
按钮
Prominent CTA labels.
The quick brown fox 敏捷的狐狸
20px
700
1.5
0
导航
Primary navigation and utility links.
The quick brown fox 敏捷的狐狸
16px
400
1.5
0.013em
链接
Prominent linked headlines and display links.
On
49.5px
700
1.2
-0.01em
眉题
Short uppercase section or product overlines.
The quick brown fox 敏捷的狐狸
12px
500
1.5
0.12em
代码
Compact uppercase mono labels and metadata.
const style = 1;
12px
500
1.5
0.12em
间距与布局
基准单位 8px · 密度：适中
48px版块间距
8px元素间距
—卡片内边距
—内容最大宽度
4px
8px
12px
16px
24px
32px
48px
64px
81px
Use full-bleed photography for the hero, then transition into broad white shopping sections with centered or left-aligned headings. Arrange category tiles in a multi-column grid, and use horizontal image-led rows for shoe families and new arrivals. Keep cards visually simple and let product imagery carry the detail. The measured page uses comfortable density and an 8px spacing base, with a clear separation between sections. No measured maximum width is available, so derive content width responsively from the viewport rather than imposing an invented fixed value.
圆角与层次
按钮 · 50%
卡片 · 4px
徽标 · 3px
导航 · 2px
链接 · 4px
sm · card
The page is mostly flat: white sections and image cards do the structural work, with little visible separation beyond spacing. Product cards have a subtle measured shadow, while buttons and badges rely on rounded shapes or thin borders rather than depth. Preserve clear text contrast over photography with careful image framing, not heavy overlays.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Hero
Full-bleed training photography with light navigation over the image, white heading and supporting copy, and rounded white shopping CTAs.
Category tiles
Image-led Shoes, Apparel, and Accessories cards arranged in a row, with small white labels near the lower edge.
Category links
Simple black text links grouped beside a lifestyle image to enable discovery by sport and activity.
Product row
Horizontal product imagery on pale fields, with compact product names, details, prices, and small mono badges.
Product badge
Small uppercase On Mono label with a thin #995c00 outline and compact inset padding.
Story cards
Editorial athlete and product imagery presented as a horizontal set of cropped cards with concise white captions.
Imagery · Use high-quality, naturalistic photography of athletes training, wearing products, or moving through real environments. The hero image fills the viewport width and places copy over its darker lower area. Product imagery is isolated against pale, clean backgrounds and arranged in repeatable tiles. Editorial story cards mix close crop portraits, motion, and wider action scenes. Avoid decorative illustration or overly processed effects.
Lead with authentic, movement-focused photography.
Keep the shopping canvas white and the interface typography black.
Place hero copy over a naturally dark area of the image.
Use On-style sans-serif for most interface text.
Reserve the mono face for short uppercase labels.
Use rounded black or white CTAs according to contrast.
Keep product backgrounds pale and visually quiet.
✕ 不该做
Do not introduce bright UI colors beyond the measured palette.
Do not treat the bronze badge color as a primary brand accent.
Do not add gradients as a decorative page-wide background.
Do not crowd product cards with heavy borders or shadows.
Do not place dark text over busy or dark photography.
Do not use generic stock-like illustrations in place of athletic photography.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a responsive commerce page in On’s restrained athletic style. Use Gallery White (#ffffff) as the main shopping canvas and Onyx Ink (#000000) for headings, body text, links, and dark CTAs. Open with full-bleed, authentic training photography; overlay light navigation and place white hero copy where the image is naturally dark. Use large, confident sans-serif headlines, clear compact body copy, and Roboto Mono-like uppercase labels for badges and metadata. Build category and product areas from image-led tiles and horizontal rows with pale Mist Grey (#f6f7f8) or Cloud Grey (#eceef0) image fields. Keep cards mostly flat, with only subtle measured-style elevation. Use Trail Bronze (#995c00) sparingly for small outlined badges. Make the layout responsive, airy, and easy to scan without inventing fixed dimensions.
