A clean, technical, high-contrast Swiss sportswear brand that reads like a performance spec sheet wrapped around full-bleed action photography. The chrome is STRICTLY monochrome — white #ffffff canvas, black #000000 ink, greys #222/#555/#e5e5e5, dark sections #151522 — with all saturated colour confined to the imagery. A custom "On" humanist grotesque (stand-in Inter) sets bold 700 headlines at tight -0.5px tracking, 400 body and 500 buttons, while a companion "On Mono" (stand-in IBM Plex Mono) handles a running commentary of UPPERCASE technical labels at +0.84px: the scrolling promo ticker (a 235s marquee), category chips and circular icon buttons. Buttons are 40px-radius pills, 48px tall at 0 24px, 1px border, in black/white inverse pairs — primary #000 fill hovers to #333333. Cards use a small 4px radius and content stays flat; a subtle multi-layer shadow is reserved for floating chrome, and the only atmosphere is a soft radial product spotlight. Rare tag colours (mint #60bc9d, orange #e15f14, olive #995c00) appear on badges only, never in chrome. Feels technical, precise and athletic-Swiss.
Browse On in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: on.com/en-us (live DOM, computed styles), 2026-07-25. Coverage: home. No brand colour tokens in :root (only layout vars) — the palette is read from computed fills/text. #0000ee appears 140x but is browser-default link colour leaking from unstyled anchors, not brand — excluded. Reduced-motion flag truncated in-run, noted below. Reality check: matches the hint — clean Swiss, technical, high-contrast. Sharpens it: the chrome is strictly monochrome (black / white / grey) with ALL colour living in photography; a custom "On" grotesque pairs with "On Mono" for every technical label (ticker, chips, circular buttons); the rare tag colours (mint / orange / olive) appear only on badges, never in chrome.
A clean, technical, high-contrast Swiss sportswear brand that reads like a performance spec sheet wrapped around full-bleed action photography. Chrome is pure black-and-white with grey supporting tones; the custom "On" grotesque sets bold, tightly-tracked headlines while "On Mono" handles a running commentary of uppercase technical labels — the scrolling promo ticker, category chips, and circular icon buttons. Surfaces are mostly flat with a few very subtle shadows on floating UI; the only atmosphere is a soft radial product spotlight. All saturated colour is confined to the imagery. Feels: technical, precise, high-contrast, athletic-Swiss.
| Token | Hex | Role / usage |
|---|---|---|
| ink | #000000 | primary text, primary button fill |
| dark | #222222 | dark section fill, secondary ink |
| hover-dark | #333333 | primary-button hover fill |
| muted | #555555 | muted text |
| faint | #666666 | tertiary text / captions |
| white | #ffffff | canvas, text over photography, inverse pill |
| grey-surface | #f4f4f4 | light grey surface |
| spotlight-1 | #f6f7f8 | radial product-spotlight mid stop |
| spotlight-2 | #eceef0 | radial product-spotlight outer stop |
| border-grey | #e5e5e5 | hairline / disabled grey |
| ink-navy | #151522 | dark near-black section |
Rare tag colours (badges/category chips only — never chrome):
| Token | Hex | Role / usage |
|---|---|---|
| tag-mint | #60bc9d | eco / feature badge |
| tag-orange | #e15f14 | sale / highlight tag |
| tag-olive | #995c00 | badge border accent |
Rule: keep chrome monochrome — colour belongs to photography and the occasional product tag. Focus ring is a framework blue (#2f7efe), not a brand colour.
Two custom faces: On (a clean humanist grotesque) for everything structural, and On Mono for technical labels, the promo ticker, chips and circular buttons; "On Semi Mono" appears once. Headlines are bold 700 at tight -0.5px tracking; body is 400; buttons 500. Mono labels are UPPERCASE with wide +0.84px tracking. Sizes are fluid (the 50.09 / 31.12px computed values are viewport-scaled).
Specimen substitution: previews load Inter for "On" and IBM Plex Mono
for "On Mono" (one bundled Google Fonts link); the site ships the licensed
On / On Mono faces.
| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (h1/h2) | On | 50/55, fluid | 700 | -0.5px |
| Lead body | On | 31/40 | 400 | normal |
| Nav | On | 20/30 | 700 | normal |
| Button | On | 16/20 | 500 | normal |
| Mono label / ticker | On Mono | 14 | 500 | +0.84px, UPPERCASE |
| Eyebrow / tag | On Mono | 12–14 | 500 | +0.84px, UPPERCASE |
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.