On Design System

Overview

On's storefront is built on a single, almost stubbornly reductive idea: the chrome carries no color, and the photograph carries everything. Ink #000000 lands 906 times on the captured page (420 as text, 417 as hairline border, 46 inside gradient overlays, 18 as shadow); canvas #ffffff lands 323. Across the hero portrait, the activity list, the Shop heading, the 4-up product grid, and the editorial "Stories that move" tile, the same monochrome chrome reappears in identical proportions — only the photograph and the copy change. Where most performance-running brands inject neon yellow, signal orange, or electric green to telegraph athletic energy, On withholds entirely and lets the shoe photograph be the only colored object on the page.

Hyperlink as accent: the only chromatic note in the chrome is the browser-default unstyled <a> color. Bright #0000ee reaches 190 occurrences (95 text, 95 border, because every link is also underlined) on the vertical activity list — "Running →", "Road running →", "Marathon →", "Trail running →", "Lifestyle →", "Hiking and outdoor →", "Tennis →", "Training and gym →". Visited brown #995c00 reaches 32. These are not styled. On is declaring that the only color in the system is the color the user agent provides for free, and the activity list is the one place it surfaces. Restyling the link would erase the move.

Heroic h1/h2 parity: the hero heading "Bloom. A new shade to move in." and the section heading "Shop" both sit at 49.584px / weight 700 / -0.49584px letter-spacing — identical tokens. There is no downscaled h2 tier on the homepage. The 30.8px tier exists only for paragraph-shaped link copy, and the 24.176px tier exists for sub-section labels. Unlike the convention of a 64–48–32–24 display ramp, On flattens the top two tiers into a single ceiling — the section header carries the same weight as the campaign.

Colors

• Ink (#000000) — frequency 906. Used as text (420), border (417), shadow (18), gradient (46), bg (5). The load-bearing token: every headline, every hairline, every body line, and the inverted newsletter input fill.
• Canvas (#ffffff) — frequency 323. Used as text (131), bg (11), border (135), gradient (46). The page surface and the on-image text color for the hero portrait.
• Hyperlink (#0000ee) — frequency 190. Used as text (95), border (95). The browser's default unstyled <a> color, surfaced deliberately on the activity list as the only saturated accent.
• Link-visited (#995c00) — frequency 32. Used as text (16), border (16). The browser's default visited-state brown; appears on activity items the user has already opened.
• Ink-secondary (#333333) — frequency 22. Used as text (11), border (11). Body paragraph copy in the geo-availability message; the workhorse soft-text role.
• Surface-gradient-pale (#eceef0) — frequency 10. Used as gradient (10). Product-card photographic backdrop and the soft gradient under swatch chips.
• Status-error (#ed0000) — frequency 2. Used as text (1), border (1). Form validation only; never decorative.
• Ink-tertiary (#999999) — frequency 1. Used as bg (1). Disabled-state placeholder fill.
• Ink-graphite (#151522) — frequency 1. Used as bg (1). A near-black with a violet cast on one editorial overlay.
• Ink-mute (#666666) — frequency 1. Used as text (1). The newsletter input placeholder color.
• Swiper-theme (#007aff) — declared on :root via --swiper-theme-color. Never rendered in the captured page; reserved for the product-carousel pagination dots.

Typography

On runs a proprietary On sans (system fallback to Noto Sans JP / Noto Sans KR / sans-serif) across every display and body role, plus On Semi Mono and On Mono for the 12px uppercase category captions and the 20px uppercase mono-lg tier. Hero h1 and section h2 share the identical 49.584px / weight 700 / -0.49584px letter-spacing — a heroic display ceiling that flattens the top of the type hierarchy into one tier. Below the ceiling, the system uses 30.8px / 400 for paragraph-shaped link copy, 24.176px / 700 for sub-section labels, 20px / 700 for nav links, and a 15.312px / 400 body tier (with a 15.312px / 700 strong variant) for product names and meta. Body-md sits at 16px / 400 with 0.2px tracking — the only positive tracking value in the body tier.

The mono pair carries the brand's Swiss-engineering signal. On Semi Mono at 12px / 500 uppercase with 0.72px tracking renders the category caps below each product card (e.g. "Cloudsurfer", "Cloud", "CloudX", "Cloudboom"), and On Mono at 20px / 400 uppercase with 1.2px tracking carries the larger editorial labels. Substitution path: Inter Display at weight 700 with -1% tracking for the heroic 49.584px tier, paired with JetBrains Mono or IBM Plex Mono at 12px uppercase tracked 0.72px for the captions.

Layout

The page runs on a 12-column grid inside a roughly 1440px maximum content width, with section padding extracted as 0px 47.952px (≈ 48px) horizontal gutters. Vertical rhythm follows an 8px base — the spacing array shows 69 occurrences of 8px, 26 of 24px, 17 of 4px, and 8 of 12px. The dominant section break is 81.104px (the section spacing token), which separates the hero portrait from the Shop heading and the activity list from the product grid. Inside cards, the rhythm tightens to 4px / 7px / 8px. The activity list sits as a vertical column at roughly 33% page width, with each link receiving 4px 0px vertical padding — a paragraph-shaped stack rather than a grid of pills.

Elevation & Depth

Depth is achieved by photography and hairlines rather than shadow. The captured page declares #000000 shadow 18 times — exclusively on the announcement banner pill and the geo-availability dialog, never on cards or buttons. Surface elevation comes from three devices: a #eceef0 gradient backdrop behind each product photograph (10 occurrences), a 1px #000000 hairline border between the top-nav and the hero overlay, and the inverted black newsletter section that drops the user into a dark band at the page foot. Where most retailers ladder a card with a 0/2/8/24px shadow scale, On runs flat — the photograph carries the weight, the gradient backdrop carries the soft separation, and the hairline carries every other line of demarcation.

Shapes

Six radius values appear in the captured page: 4px at 24 occurrences (the dominant corner — product tiles, swatch chips, small surfaces), 3px at 8 (inner-card details and the announcement-bar pill stroke), 50% at 10 (icon buttons and swatch dots), 40px at 4 (the mono-pill tag used on the editorial tile), 2px at 1, and 12px at 1. The product card lands on 4px — soft enough that the photograph does not read like a printed catalog, hard enough that the corner never competes with the silhouette of the shoe. The hero portrait itself sits at 0px. The jump goes 4 → 12 → 40; there is no 8px, 16px, 24px, or 32px corner anywhere in the chrome.

Components

• top-nav: {colors.canvas} background, {colors.ink} text, {typography.nav-link} at 20px / 700, 0px radius, 56px height, no border.
• nav-link-on-image: transparent fill, {colors.on-ink} text for the nav links that sit over the hero photograph.
• hero-frame: full-bleed 0px-cornered black overlay scrim; the photograph beneath carries every other color note.
• hero-heading: 49.584px / 700 {colors.on-ink} typeset directly onto the portrait — captured at 109px rendered height for "Bloom. A new shade to move in."
• section-heading: identical 49.584px / 700 tier to the hero, used on "Shop" and "New arrivals" — flattens the h1/h2 ceiling.
• button-primary: {colors.ink} fill, {colors.on-ink} text, 4px radius, 12/24px padding, 44px height. Used for the hero "Explore" CTA.
• button-secondary-on-image: {colors.canvas} fill, {colors.ink} text, otherwise identical to primary — sits beside the primary on the hero scrim.
• activity-link: the brutalist move — 49.584px / 700 in {colors.link} #0000ee with underline, padded 4px 0px per line.
• activity-link-visited: identical to activity-link but text shifts to {colors.link-visited} #995c00 once visited.
• mono-category-cap: 12px On Semi Mono uppercase with 0.72px tracking, used as the small label under each product image ("Cloudsurfer", "Cloud", etc.).
• product-card: {colors.canvas} surface, 4px radius, no border, sits in the 4-up grid.
• product-card-image: {colors.surface-gradient-pale} #eceef0 photographic backdrop with a 4px radius — the only place the gradient pale appears.
• swatch-chip: small 4px-cornered swatch picker with a 1px {colors.ink} border.
• swatch-dot: 9999px circular swatch indicator filled with {colors.ink} at 12px height.
• editorial-tile: the "Stories that move" surface — {typography.heading-md} at 24.176px / 700 inside a 4px-cornered tile with 16px padding.
• mono-pill-tag: 12px On Semi Mono uppercase inside a 40px pill — the one place a pill geometry appears in the system, reserved for editorial category tags.
• newsletter-input: the inverted-canvas signature — {colors.ink} fill, {colors.ink-mute} placeholder, 64px height, 0px radius, no border. Sits inside the black footer band.

Do's and Don'ts

• Don't restyle the activity-list links from #0000ee to a brand voltage — the unstyled browser default is the design. Restyling erases the brutalist signal.
• Don't ladder a 64–48–32–24 display ramp. On's display ceiling is a single 49.584px tier shared by h1 and h2; the next tier is 30.8px / weight 400, not 32px / 700.
• Don't use #eceef0 as a chip or button background — it is a gradient-only token (10 occurrences, all as gradient) reserved for the product-image backdrop. For light surfaces, use {colors.canvas} #ffffff.
• Don't add a drop shadow to the product card. On's depth comes from the #eceef0 photographic gradient and a 1px ink hairline; the card itself is shadowless.
• Don't soften the newsletter input to a 4px or 8px corner. The 64px-tall 0px-radius black field is the system's one inversion — corner-radius would push it toward a generic input.
• Don't apply the 40px pill geometry to a primary CTA. The pill is reserved for editorial mono tags; primary buttons sit at 4px.
• Do keep On Semi Mono at 12px / 0.72px tracking, uppercase, for every category cap. The Swiss-engineering signal lives in the mono tier — collapsing it to the body sans erases the brand's voice.
• Do preserve the negative -0.49584px tracking on the 49.584px display tier when substituting a different sans. On's optical density depends on it.

Known Gaps

• PDP not captured — product detail page typography (size selector, add-to-bag CTA placement, fit-finder) is not part of the homepage capture.
• Cyclon subscription flow and membership chrome are not present in the captured page; the recurring-rental Cyclon shoes have a dedicated visual treatment that isn't documented here.
• Hover and focus states are not extracted — On's CSS does not surface them on the :root variable cascade the extractor reads.
• Geo-picker and currency dialog are not visible in the captured page (the geo-availability message that triggered the #333333 body paragraph is the closest analog).
• On sans weight 600 referenced in On's font kit is not present on the homepage — weights 400, 500, and 700 are extracted but the demi tier is not.
• Primary CTA selector returned null — On uses a custom anchor element rather than a <button> for the hero call-to-action, so the extractor's primary-button probe captured nothing; the button-primary token above is reconstructed from the visible "Explore" CTA in the screenshot.