---
title: "On design system"
variant: extended
source: https://www.on.com/en-us/?utm_source=Sailthru&utm_medium=email
captured_at: 2026-10-12
theme: light
industry: fashion
generator: Design DNA (https://four.wiralomi.com/style/on-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# On · Design System

> Swiss performance, framed with restraint

**Theme:** light · **Industry:** fashion · **Source:** https://www.on.com/en-us/?utm_source=Sailthru&utm_medium=email · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

On’s homepage pairs an expansive, cinematic training image with a crisp, monochrome shopping experience. Bold product imagery and compact editorial sections keep the focus on movement, gear, and discovery.

## North star

Let immersive, authentic athletic photography lead, then use restrained black-and-white commerce UI to make browsing effortless.

## Overview

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.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | brand | Main page canvas, product-card fields, white hero copy, and light CTA surfaces. |
| Onyx Ink | `#000000` | `--color-onyx-ink` | brand | Primary text, headings, navigation on light surfaces, links, and dark CTA backgrounds. |
| Trail Bronze | `#995c00` | `--color-trail-bronze` | accent | Small outlined product badges such as bestseller and last-season labels; not a broad UI accent. |
| Night Slate | `#151522` | `--color-night-slate` | surface | Measured dark section surface; use sparingly where a dark band is shown, not as the overall canvas. |
| Concrete Grey | `#999999` | `--color-concrete-grey` | surface | Measured muted section surface; secondary neutral rather than a defining brand color. |
| Mist Grey | `#f6f7f8` | `--color-mist-grey` | neutral | Subtle pale field in inputs and soft image-area gradients. |
| Cloud Grey | `#eceef0` | `--color-cloud-grey` | neutral | Light gradient endpoint behind product imagery; keep it subtle. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#151522` (Night Slate) · `--color-surface-2` → `#999999` (Concrete Grey) · `--color-text` → `#000000` (Onyx Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#995c00` (Trail Bronze) · `--color-accent` → `#995c00` (Trail Bronze)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#151522` | 1.16:1 | fail |
| `#000000` | `#999999` | 7.37:1 | AAA |
| `#ffffff` | `#151522` | 18.07:1 | AAA |
| `#ffffff` | `#999999` | 2.85:1 | fail |
| `#995c00` | `#ffffff` | 5.4:1 | AA |
| `#995c00` | `#151522` | 3.34:1 | AA-large |
| `#995c00` | `#999999` | 1.9:1 | fail |

### Gradients

- `radial-gradient(51.74% 45.16% at 46.65% 38%, rgb(255, 255, 255) 0px, rgb(246, 247, 248) 44.58%, rgb(236, 238, 240))`
- `linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))`
- `linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| On | `--font-body` | webfont | 400, 700 | Primary display, navigation, product, and interface sans-serif. | Inter |
| On Mono | `--font-mono` | webfont | 500 | Eyebrows, product badges, and compact metadata. | Roboto Mono |

- **On:** Use regular and bold weights; headlines are confident and compact, with slightly tight tracking on the largest styles.
- **On Mono:** Medium weight, uppercase, and visibly letter-spaced; reserve for short utility labels.

### Type scale — Augmented Fourth (ratio ≈ 1.384, base 13.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 49.5px | 700 | 1.2 | -0.01em | — | On | Hero headline and high-impact display text. |
| h2 | 31px | 400 | 1.3 | 0 | — | On | Section headings and prominent editorial statements. |
| h3 | 24px | 700 | 1.2 | 0 | — | On | Subsection headings and featured content titles. |
| h4 | 20px | 700 | 1.5 | 0 | — | On | Product and compact card headings. |
| body | 13.5px | 400 | 1.3 | 0 | — | On | Supporting copy, product details, and descriptions. |
| caption | 12px | 500 | 1.5 | 0.12em | uppercase | On Mono | Uppercase compact labels and product metadata. |
| button | 20px | 700 | 1.5 | 0 | — | On | Prominent CTA labels. |
| nav | 16px | 400 | 1.5 | 0.013em | — | On | Primary navigation and utility links. |
| link | 49.5px | 700 | 1.2 | -0.01em | — | On | Prominent linked headlines and display links. |
| eyebrow | 12px | 500 | 1.5 | 0.12em | uppercase | On Mono | Short uppercase section or product overlines. |
| code | 12px | 500 | 1.5 | 0.12em | uppercase | On Mono | Compact uppercase mono labels and metadata. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 12, 16, 24, 32, 48, 64, 81 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width —.

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.

## Shape & elevation

- Radius: button `50%` · card `4px` · badge `3px` · nav `2px` · link `4px` · xs `3px` · sm `4px` · pill `9999px`
- Shadow `sm` (card): `rgba(0, 0, 0, 0.05) 0px 0px 0.5px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

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.

## 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.

## Components

### 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.

### Measured component styles

- **Primary button** (“Continue”): background #000000 · text #ffffff · border 1px solid #000000 · radius 40px · padding 0px 24px · 700 16px On
- **Secondary button** (“Shop men's”): background #ffffff · text #000000 · border 1px solid #ffffff · radius 40px · padding 0px 24px · 700 16px On
- **Link** (“LAST SEASON Cloudpulse 2 HIIT, circuits ”): transparent background · text #0000ee · radius 0px · padding 0px · 400 16px On
- **Input**: background #f2f2f2 · text #666666 · border 1px solid #f2f2f2 · radius 0px · padding 16px 4px 0px 16px · 400 16px On
- **Card**: transparent background · text #0000ee · radius 4px · padding 0px · 400 16px On · shadow rgba(0, 0, 0, 0.05) 0px 0px 0.5px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px
- **Badge** (“BESTSELLER”): transparent background · text #995c00 · border 1px solid #995c00 · radius 3px · padding 1px 4px 0px 4px · 500 12px On Mono · uppercase
- **Navigation item** (“Become a member”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px On

## Do

- 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.

## Don't

- 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.

## Agent prompt

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.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed hero image followed by a long, white shopping canvas with category, product, and story rows. | Shop by category, Browse product carousels, Explore brand stories | Image-overlay headline, Rounded contrasting CTAs, Pale product image fields, Compact uppercase badges |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--f-spinner-color-1: #0000001a;
--f-spinner-color-2: #11181ccc;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/on-com