# On (On Running) — Marketing site Design Spec

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

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

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

## 3. Typography Rules

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 |

## 4. Component Stylings

Buttons are **40px-radius pills**, 48px tall, `0 24px` padding, On 16/500, with a
1px border. They come in inverse pairs: primary is #000000 fill with white text;
on photography the primary inverts to a #ffffff fill with black text; the
secondary is a transparent outline (1px #000 on light, 1px #fff on dark). Mono
chips and circular icon buttons (50% radius) carry uppercase On Mono labels.
Cards use a small 4px radius. Chrome/floating UI carries a very subtle multi-layer
shadow; content is otherwise flat.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary pill | #000 fill, #fff, 40px, 1px #000 | bg + border #333333 | ring #2f7efe 0 0 0 .25rem, outline transparent | — | grey #e5e5e5 |
| Inverse pill | #fff fill, #000, 40px, 1px #fff | (darkens) | ring #2f7efe | — | — |
| Outline pill | transparent, 1px #000 | fills to ink | ring #2f7efe | — | — |
| Mono chip / icon | On Mono 14/500 UPPER, 50% radius | bg 0.2s ease | ring #2f7efe | — | — |

Focus note: the ring is a generic framework blue (#2f7efe). For brand fit prefer
a black ring (`0 0 0 2px #000`); recorded as an observed default, not a token.

## 5. Layout Principles

A scrolling On Mono promo ticker sits above the nav. The nav is a three-part bar:
logo left, centred Shop / Activities / Explore links, utility icons (search, cart,
AI, account) right — white over the photographic hero. Heroes are full-bleed
action photography with bottom-left headline + sub + two pill CTAs. Below,
content is a responsive product grid on white, with subtle radial spotlights
behind featured products.

## 6. Depth & Elevation

Radius scale: 1px, 2px, 3px, **4px** (cards, dominant), 12px, 20px, **40px**
(pills), **50%** (circular icon buttons). Shadows: subtle and multi-layer, e.g.
`rgba(0,0,0,.05) 0 0 .5px, rgba(0,0,0,.1) …` on floating chrome — most content is
flat. Borders are 1px (#000 / #fff / #e5e5e5). Depth is mostly colour and a light
shadow on chrome, not heavy elevation.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| background | 0.2s | ease | button/row hover fills (dominant, 132x) |
| color | 0.2s | ease | link hover |
| transform | 0.3s | cubic-bezier(0.87, 0, 0.13, 1) | hover lift / reveals |
| grid-template-rows, opacity | 0.1s | ease-out | accordions |
| fill | 0.5s | cubic-bezier(0.25, 1, 0.5, 1) | icon fills |

House feel: quick 0.2s ease colour changes plus a strong
`cubic-bezier(0.87,0,0.13,1)` for transforms. Signature animation: the promo
`_ticker_` marquee at **235s linear infinite**. Many `@keyframes` observed —
slide-in-from-top/right/bottom, display-fade-in/slide, shimmer, spinners — and a
Swiper carousel (swiper-preloader keyframes). No global animation library flag.
`prefers-reduced-motion`: not captured (value truncated this run).

## 8. Backgrounds, Effects & WebGL

Mostly solid fills. One meaningful gradient: a product spotlight
`radial-gradient(51.74% 45.16% at 46.65% 38%, #ffffff, #f6f7f8 44.58%, #eceef0)`.
Full-bleed product/lifestyle photography carries the imagery (rasterLayers). No
background video, no canvas/WebGL, no grain, no backdrop-filter. Atmosphere is
photography plus the soft radial spotlight.

## 9. Do's and Don'ts

### Do
- Keep chrome strictly monochrome; put all colour in photography.
- Set headlines in the On grotesque at 700 with -0.5px tracking.
- Use On Mono for every technical label — ticker, chips, circular buttons — UPPERCASE at +0.84px.
- Use 40px-radius pill buttons in black/white inverse pairs; hover primary to #333333.
- Keep cards at a small 4px radius; reserve subtle shadows for floating chrome only.
- Add a running promo ticker as a signature marquee.

### Don't
- Don't add a chrome accent colour — tag colours (mint/orange) stay on badges.
- Don't set body or nav in the mono face; mono is for labels only.
- Don't use heavy drop shadows on content; content is flat.
- Don't loosen headline tracking — it stays tight (-0.5px).

## 10. Responsive Behavior

Dense px breakpoint ladder plus one container query. Layout-carrying steps:

| Breakpoint | What changes |
|---|---|
| max 400 / 425 / 476px | small-phone stacking + type scale-down |
| 550px | phone → large-phone |
| 750 / 768px | tablet: nav + grid columns |
| 1024px | desktop layout |
| 1200 / 1280px | wide product grid |
| 1440 / 1540 / 1800 / 2500px | wide/ultra-wide capping |

Also present: 426, 530, 549, 551, 600, 767, 769, 890, 896, 1023. No dark-scheme
blocks (`darkSchemeBlocks:0`); no theme toggle. `containerQueries:1`. Mobile
collapses centred nav links into a menu.

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Text `#000000` · Muted `#555555` · Border `#e5e5e5` · Dark section `#151522` · No chrome accent
- Font: On grotesque (Inter stand-in) + On Mono (IBM Plex Mono) · Body: 16px+ · Radius: 40px pills / 4px cards / 50% icons · Control height: 48px
- Focus: framework `#2f7efe` ring — prefer `0 0 0 2px #000` · Hover: primary → #333333, background 0.2s ease

<on-running_design_language>
Clean, technical, high-contrast Swiss sportswear brand. Strictly monochrome
chrome — white #ffffff canvas, black #000000 ink, greys #222/#555/#e5e5e5, dark
sections #151522 — with ALL colour confined to full-bleed action photography.
Two custom faces: an "On" humanist grotesque (stand-in Inter) for bold 700
headlines at tight -0.5px tracking, 400 body and 500 buttons; and "On Mono"
(stand-in IBM Plex Mono) for every technical label — the scrolling promo ticker,
category chips, circular icon buttons — set UPPERCASE at +0.84px. Buttons are
40px-radius pills, 48px tall, 0 24px, 1px border, in black/white inverse pairs;
primary #000 fill hovers to #333. Cards use a small 4px radius; shadows are
subtle and reserved for floating chrome, content is flat. Motion: quick 0.2s ease
colour changes, transform 0.3s cubic-bezier(.87,0,.13,1), and a signature 235s
marquee ticker; a Swiper carousel. Feels: technical, precise, athletic-Swiss.
Avoid: a chrome accent colour, mono for body text, heavy shadows on content,
loosening the tight headline tracking, treating #0000ee link-blue as brand.
</on-running_design_language>