--- version: alpha name: On website: "https://www.on.com" description: >- A Swiss performance-running storefront anchored on absolute monochrome — ink `#000000` carries 906 occurrences (420 text, 417 border, 46 gradient) against a `#ffffff` canvas at 323, while the only chromatic moments in the chrome are the browser-default unstyled link colors (bright `#0000ee` at 190 text-and-border occurrences for the activity list, and visited-state brown `#995c00` at 32) that On deliberately surfaces rather than restyles. Type runs the proprietary On sans at a heroic 49.584px h1/h2 with `-0.49584px` tracking against a 12px uppercase On Semi Mono label with `0.72px` tracking — a two-typeface system where the body sans does the editorial weight and the mono carries the category caps. seo: title: "On Running Design System for React — On sans, ink #000000, 17 components" metaDescription: "On's storefront as a DESIGN.md file. On sans 49.584px hero, ink #000000, 19 color tokens, 17 components. For React, Next.js, and AI tools." highlights: - "Hyperlink-blue as accent — On uses the browser-default `#0000ee` (190 occurrences as text and border) for category list items, never restyling it to a brand voltage" - "Heroic h1/h2 parity — display sits at 49.584px / 700 with `-0.49584px` tracking, and the section h2 ('Shop') uses the identical size, not a downscaled tier" - "Two-typeface split — proprietary On sans for body and display, On Semi Mono for 12px uppercase category captions with `0.72px` tracking" - "4px-base radius vocabulary — 24 occurrences of `4px` corners against 8 occurrences of `3px` and 4 of `40px` pill, with a hard `0px` on every photographic tile" - "Footer newsletter inverts the canvas — single `#000000` input with `#666666` placeholder, 64px height, no border, sitting under the otherwise white-canvas chrome" tags: - "E-commerce & Retail" lastUpdated: "2026-05-13" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | On's storefront reads like a Swiss product brochure compiled for the browser. The chrome is reductive to the point of being almost stubborn — ink `#000000` carries 906 occurrences across the captured page (420 as text, 417 as hairline border, 46 inside gradient overlays, plus 18 as shadow), while the canvas runs pure `#ffffff` at 323. Where most performance-running brands inject saturated voltage — neon yellow, signal orange, electric green — to telegraph athletic energy, On withholds entirely. The only chromatic note in the entire chrome is the unstyled hyperlink: bright `#0000ee` reaches 190 occurrences as both text and border, used on the vertical activity list ("Running →", "Road running →", "Marathon →", "Trail running →"), and the visited-link brown `#995c00` reaches 32. These are not brand colors. They are the browser's defaults, surfaced deliberately as a brutalist signal that On trusts the photograph and the type to do every other job. This page packages the storefront into a DESIGN.md file written to the Google Labs open spec. Inside: 19 color tokens grouped into ink, canvas, link, status, and graded-neutral layers; 12 typography roles built around a proprietary On sans display tier at 49.584px / weight 700 with `-0.49584px` letter-spacing, paired with On Semi Mono at 12px uppercase tracked `0.72px` for category caps; a 6-step radius vocabulary anchored on the observed `4px` (24 hits) with a `40px` pill reserved for chips; a 9-step spacing scale extracted from the `8px` (69 hits) and `24px` (26 hits) rhythm; and 17 component entries covering the top nav, the hero portrait with overlay heading, the activity list with right-pointing arrow glyphs, the 4-up product card grid, the swatch picker, the editorial "Stories that move" tile, and the inverted newsletter footer. Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces On's reductive chrome — the heroic h1/h2 parity at 49.584px, the hyperlink-blue activity list, the 4px-cornered product cards on `#ffffff`, the inverted black newsletter input — rather than inventing a generic athletic-template with neon accents and saturated badges. Reference tokens directly when you want one specific value: `{colors.ink}` resolves to `#000000`, `{typography.display-h1}` to On sans 49.584px / 700 / `-0.49584px`, `{colors.link}` to `#0000ee`, and `{rounded.pill}` to 40px. The reason this system rewards study is that most running brands chase velocity through chromatic noise, while On chases it through typographic parity — every section header and every hero shares the same 49.584px ceiling, and the photograph carries the rest. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.on.com" title: "On — official site" description: "The On storefront this DESIGN.md was extracted from on 2026-05-13." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is On's primary brand color?" answer: "On's chrome is built on ink `#000000` at 906 page occurrences (420 text, 417 border, 46 gradient, 18 shadow) against a `#ffffff` canvas at 323. There is no saturated brand voltage. The only chromatic note in the captured page is the browser-default unstyled hyperlink — bright `#0000ee` at 190 occurrences and visited-state `#995c00` at 32 — which On surfaces deliberately on the vertical activity list rather than restyling. The error red `#ed0000` appears twice; the swiper-default `#007aff` is declared on `:root` but never rendered. Treat ink and canvas as the system; treat the hyperlink colors as the only accent and never extend them to non-link chrome." - id: "typography" title: "What typography does On use, and what should I substitute?" answer: "On runs a proprietary On sans (system fallback chain to Noto Sans JP / KR / sans-serif) across every display and body role, plus an On Semi Mono and On Mono for the uppercase category captions. Hero h1 and section h2 share the identical 49.584px / 700 / `-0.49584px` tracking — there is no smaller h2 tier on the homepage. Nav links sit at 20px / 700; body paragraphs at 16px / 400 with `0.2px` tracking; the monospace caption at 12px / 500 / `0.72px` tracking, uppercase. The closest open substitute is Inter Display at weight 700 with `-1%` tracking for the heroic tier, paired with JetBrains Mono or IBM Plex Mono at 12px uppercase tracked `0.72px` for the category caps. Preserve the negative tracking on display — On's optical density depends on it." - id: "hyperlink-blue" title: "Why is the activity list bright blue?" answer: "Bright `#0000ee` is the browser's default unstyled `` color, and On surfaces it intentionally on the 'Running → / Road running → / Marathon →' list — 95 text occurrences and 95 border occurrences, exactly the same count, because each link is also underlined. The visited-state brown `#995c00` reaches 32. On is not styling these as a brand voltage; it is letting the user agent declare them. The signal is brutalist: the only color in the chrome is the color the browser hands you for free. Don't restyle these to a brand hex when reusing the system — the absence of styling is the design." - id: "shape-system" title: "Why are the product cards 4px and not pill or zero?" answer: "On's radius vocabulary runs across six values: `4px` at 24 occurrences (product tile corners, swatch chips, small surfaces), `3px` at 8 (inner-card details), `50%` at 10 (icon buttons, swatch dots), `40px` at 4 (the pill chip used on the editorial tile), `2px` at 1, and `12px` at 1. The product card lands on 4px — soft enough that the photograph doesn't read like a printed catalog, hard enough that the corner never competes with the silhouette of the shoe. The hero photograph itself uses `0px`. There is no 8px or 16px corner anywhere in the system; the jump goes 4 → 12 → 40." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own React running storefront?" answer: "Yes — drop the file into Claude, Cursor, or any AI tool that reads structured design tokens and the agent reproduces On's reductive chrome (heroic 49.584px h1/h2 parity, hyperlink-blue activity list at `#0000ee`, 4px-cornered product cards on `#ffffff`, inverted `#000000` newsletter input at 64px height) rather than inventing a generic athletic template with neon accents. Reference tokens directly when you want one specific value: `{colors.ink}` resolves to `#000000`, `{typography.display-h1}` to On sans 49.584px / 700 / `-0.49584px`, `{colors.link}` to `#0000ee`, `{spacing.lg}` to 24px. Every hex, font, radius, and spacing entry is a quoted literal you can paste into Tailwind config or CSS variables." - id: "known-gaps" title: "What's missing from this DESIGN.md spec?" answer: "Five things, documented in the Known Gaps section: the PDP (product detail page) typography hierarchy beyond the homepage tile is not captured (size selector, add-to-bag CTA placement, fit-finder), the Cyclon subscription flow and the membership-area chrome are not present, hover and focus states are not extracted (On's CSS does not declare them on :root variables the extractor reads), the geo-picker and currency dialog are not visible in the captured page, and the full On sans weight ramp is partially captured — weights 400, 500, and 700 appear, but the 600 demi tier referenced in On's font kit is not present on the homepage. The primary CTA selector returned null because On uses a custom anchor element rather than a `