---
version: alpha
name: "On Running"
description: "Swiss performance precision. Pure black-and-white canvas with On Diatype's clean grotesque and monospaced label language — engineered restraint that lets product photography carry all the emotion."

colors:
  background: "#ffffff"
  surface: "#f6f7f8"
  # surface is rgb(246,247,248) — the radial gradient mid-stop used for product imagery backgrounds
  ink: "#000000"
  ink-secondary: "#666666"
  # ink-secondary is the placeholder/muted text color found on email input fields
  on-primary: "#ffffff"
  primary: "#000000"
  primary-container: "#0f0f0f"
  # primary-container is the hover/focus deepened black (#0f0f0f) — almost identical to ink
  border: "#222222"
  border-subtle: "#d1d1d1"
  # border-subtle is #d1d1d1 approximating the rgba(0,0,0,0.05) input border — Google format requires hex
  focus-ring: "#2f7efe"
  # focus-ring is rgb(47,126,254) — the blue outline on focused inputs
  warning: "#995c00"
  # warning is the sale/badge amber color rgb(153,92,0) — used for promotional labels like "NEW"
  shadow-soft: "#1a1a1a"
  # shadow-soft flattened from rgba(0,0,0,0.1) overlay tint — Google format requires hex

typography:
  display-hero:
    fontFamily: "On, IBM Plex Sans, ui-sans-serif, system-ui, sans-serif"
    fontSize: 53px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.53px
  display:
    fontFamily: "On, IBM Plex Sans, ui-sans-serif, system-ui, sans-serif"
    fontSize: 33px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.33px
  heading-section:
    fontFamily: "On, IBM Plex Sans, ui-sans-serif, system-ui, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.29
    letterSpacing: 0px
  heading-sub:
    fontFamily: "On, IBM Plex Sans, ui-sans-serif, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  body-large:
    fontFamily: "On, IBM Plex Sans, ui-sans-serif, system-ui, sans-serif"
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "On, IBM Plex Sans, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-medium:
    fontFamily: "On, IBM Plex Sans, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  nav-link:
    fontFamily: "On, IBM Plex Sans, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  button-ui:
    fontFamily: "On, IBM Plex Sans, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  label-mono:
    fontFamily: "On Semi Mono, IBM Plex Mono, menlo, consolas, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.72px
  caption:
    fontFamily: "On, IBM Plex Sans, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 40px
  4xl: 48px
  5xl: 64px

rounded:
  none: 0px
  sm: 2px
  md: 4px
  lg: 40px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.lg}"
    padding: 14px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.lg}"
    padding: 14px 24px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.lg}"
    padding: 14px 24px
    borderColor: "{colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.lg}"
    padding: 14px 24px
  button-icon:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.pill}"
    padding: 0px
    size: 40px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 0px
  card-elevated:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 16px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 16px
  badge:
    backgroundColor: "{colors.background}"
    textColor: "{colors.warning}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.sm}"
    padding: 2px 0px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
---

# On Running Design System

## Overview

On Running builds its digital presence on an uncompromising Swiss principle: let performance speak through restraint. The site operates on a near-monochromatic canvas — pure white (`{colors.background}`) against absolute black (`{colors.ink}`) — so that hero photography and product color carry every emotional beat. Nothing in the interface competes with the imagery. A reddish-brown action scene, a lavender tennis court composition, an alpine trail at golden hour: each photograph lands with full force because the surrounding UI has been stripped to its structural minimum.

The typographic language is On's most distinctive asset. On Diatype — a custom grotesque in Standard, Mono, and Semi-Mono cuts — runs the entire interface. Headlines arrive at 53px with −0.53px tracking and a tight 1.1 line-height: cool, engineered, Swiss-precision. Below the fold, a quieter body voice takes over at 16–26px with generous 1.5 line-height. The genuinely unusual move is the label system: On Semi Mono uppercase at 12px with 0.72px letter-spacing handles all product tags, badges, and categorical labels. This typographic tier — drawn from typewriter tradition — gives On's commerce layer a technical, gear-catalog sensibility that feels true to the brand's runner-engineer DNA.

Shape language is equally precise. Buttons arrive at 40px radius — large enough to read as pill-like but not completely unbounded — paired with 4px radius on product thumbnails and category tabs, and sharp 0px on inputs and informational containers. The system is not binary (pill or nothing) but rather a three-tier hierarchy: round for actions, micro-rounded for navigation and imagery, flat for data entry. Elevation is whisper-quiet: a two-layer box shadow (`0px 0.5px rgba(0,0,0,0.05), 0px 2px 4px rgba(0,0,0,0.1)`) appears exclusively on floating panels like the login overlay. Everything else is flat.

**Key Characteristics:**
- Pure black (`{colors.ink}`) and white (`{colors.background}`) UI canvas — product photography provides all chromatic expression
- On Diatype custom grotesque in three cuts: Standard (body/display), Mono (technical labels), Semi-Mono (caps labels)
- Display headlines at 53px/700/−0.53px tracking: the Swiss-engineer voice
- Monospaced uppercase label layer (`{typography.label-mono}`) — 12px, 0.72px tracking — for product badges and category identifiers
- 40px border-radius on all primary and secondary buttons — pill-like but not fully unbounded
- 4px radius for product thumbnails, navigation tabs, and categorical pills
- Flat 0px radius for all data-entry elements and informational cards
- 8px base spacing grid; section gaps at 40–64px
- Amber `{colors.warning}` (#995c00) is the only chromatic UI accent — used exclusively for promotional labels
- Radial gradient surface (`{colors.surface}`) for product photography backgrounds — white center to soft grey edge
- Light touch shadow system (two-layer, max 0.1 opacity) — reserved for elevated panels only
- Radix UI primitives underlying interactive components

## Colors

### Primary Canvas
- **Pure White** (`{colors.background}`): Page background, button surfaces, nav bar. The dominant field.
- **Near-Black** (`{colors.ink}`): Primary text, CTA backgrounds, icon fills. Used at full strength — no tinting.
- **Soft Grey Gradient** (`{colors.surface}`): Product card and photography backgrounds. A radial gradient from white center to #eceeef edge, approximated as #f6f7f8 in token form.

### Text
- **Black** (`{colors.ink}`): All headings, body copy, nav links. Maximum contrast, no compromise.
- **Mid Grey** (`{colors.ink-secondary}`): Placeholder text and muted helper copy. Approximately #666666.

### Interaction
- **Focus Blue** (`{colors.focus-ring}`): Keyboard focus ring on form inputs — `0 0 0 0.375rem #2f7efe`. The one chromatic UI accent that serves accessibility rather than brand.
- **Deep Black** (`{colors.primary-container}`): Hover state for primary button backgrounds.

### Semantic
- **Amber** (`{colors.warning}`): Product status labels — "NEW", "TRAIL" badges. RGB(153, 92, 0). The only warm accent in the entire palette.

### Borders & Shadows
- **Dark Border** (`{colors.border}`): Button outlines and active UI borders. Near-black.
- **Subtle Border** (`{colors.border-subtle}`): Input edges and dividers. Approximated from near-transparent black.
- **Shadow Tint** (`{colors.shadow-soft}`): Flattened from rgba(0,0,0,0.1) — the base for the two-layer card shadow.

## Typography

### Font Family
- **Primary (On Diatype Standard)**: Substitute Google Font: `IBM Plex Sans`. Full fallback: `On, IBM Plex Sans, ui-sans-serif, system-ui, sans-serif`. Used for all display, body, navigation, and button text.
- **Monospaced label (On Diatype Semi-Mono / Mono)**: Substitute Google Font: `IBM Plex Mono`. Full fallback: `On Semi Mono, IBM Plex Mono, menlo, consolas, monospace`. Used exclusively for uppercase product labels, category tags, and size identifiers.

### Hierarchy

The complete type scale lives in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | Primary hero headlines — 53px, weight 700, −0.53px tracking |
| `display` | Secondary hero and campaign section headers — 33px |
| `heading-section` | Section titles and feature callouts — 28px |
| `heading-sub` | Card titles, product names, sub-section labels — 20px |
| `body-large` | Editorial lead-in paragraphs and taglines — 26px |
| `body` | Product descriptions, nav flyouts, form helper text — 16px |
| `body-medium` | Emphasized body copy, links within body — 16px/500 |
| `nav-link` | Primary navigation links — 16px/500 |
| `button-ui` | All button labels — 16px/500 |
| `label-mono` | Uppercase product tags, badges, size indicators — 12px Semi-Mono |
| `caption` | Price copy, metadata, legal footnotes — 14px |

### Principles
- Single typeface family (On Diatype) with three optical cuts — variety through cut, not through mixing families
- Weight range is narrow: 400 for reading, 500 for interaction, 700 for display — no intermediate weights in body contexts
- Tracking is negative at large sizes (−0.53px at 53px) and positive in the mono label tier (+0.72px at 12px) — the system compresses display and opens labels
- The monospaced uppercase tier (`{typography.label-mono}`) is a signature differentiator: it reads like gear specification, not marketing copy
- Line-heights stay tight at display (1.1–1.2) and open at body (1.5) — no intermediate softness

## Layout

### Spacing System
The complete spacing scale lives in the `spacing:` token block above. Base unit: `{spacing.sm}` (8px).

Spacing is disciplined and 8px-anchored. Micro-gaps (4px) exist only for icon padding and form detail. Section transitions use 40–64px gutters — enough to separate content categories without resorting to divider lines. The system avoids "comfortable but not generous" mid-range values; it goes from tight (4–12px) to architectural (40–64px) with minimal middle ground.

### Grid & Container
- Max content width: 1440px, centered with 24px horizontal padding at desktop
- Product grid: 4-column on desktop, 2-column on tablet, 1-column on mobile
- Hero sections: full-bleed photography with text overlaid at lower-left (Swiss editorial convention)
- Navigation: compact top bar (~64px) with logo top-left, category links center, utility icons right

### Whitespace Philosophy
- Whitespace is not decorative — it is structural. Sections breathe at 40–64px; components sit tight at 8–16px
- Product photography is the primary page element; whitespace frames it, not the reverse
- The visual rhythm alternates: dense product grid → full-bleed hero → dense grid. No padding-heavy editorial interstitials

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Default for product cards, navigation, all body content |
| Subtle (Level 1) | `0 0 0.5px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.1)` | Floating UI panels: login overlay, cookie sheet, Radix popovers |
| Elevated (Level 2) | `0 0 3px rgba(0,0,0,0.05), 0 12px 24px rgba(0,0,0,0.1)` | High-priority modals and dialogs |
| Focus Ring | `0 0 0 6px {colors.focus-ring}` | Keyboard focus on form inputs and interactive controls |

**Shadow Philosophy**: On Running's elevation model is nearly invisible. Shadows appear on one category of element — floating overlaid panels — and nowhere else. Product cards are flat: no hover lift, no ambient shadow. The effect is a page that feels printed rather than layered. When a panel does float (a login sheet, a cookie consent modal), it uses a two-layer shadow at very low opacity (0.05 and 0.10) that suggests depth without announcing it. This matches the brand's Swiss engineering sensibility: structural decisions are precise and purposeful, never decorative.

## Shapes

The complete radius scale lives in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Form inputs, informational containers, sharp editorial cards |
| `sm` | 2px | UI detail elements — toggle switches, small interactive chips |
| `md` | 4px | Product thumbnails, navigation tabs, category pills |
| `lg` | 40px | All primary and secondary buttons — the signature pill-adjacent shape |
| `pill` | 9999px | Circular icon buttons (Previous/Next controls) |

The system is a three-tier hierarchy: flat for data (0px), micro-rounded for navigation and imagery (4px), and assertively rounded for actions (40px). The 40px radius is the visual signature — large enough to feel like a pill at standard button heights but with enough visible arc to distinguish itself from the `50%` circle buttons that flank it in the UI. Nothing between 4px and 40px exists in the system.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants
- **`button-primary`** — Black fill, white text, 40px radius. The dominant action button. Used for primary e-commerce CTAs like "Add to cart" and "Continue".
- **`button-primary-hover`** — Darkens to `{colors.primary-container}` (#0f0f0f) on hover. Near-imperceptible shift maintains the black identity while responding to interaction.
- **`button-secondary`** — White fill with black border, 40px radius, black text. Used for secondary options like "Shop women's" alongside a primary. Inverts on hover to black fill.
- **`button-secondary-hover`** — Full black fill inversion. Hover turns the outlined button into its primary sibling — decisive interaction language.
- **`button-icon`** — Circular (50% / `{rounded.pill}`), 40×40px. White background with black icon. Used for carousel Previous/Next controls.

### Cards
- **`card`** — Flat, 4px radius, no padding. Product photography fills edge to edge within the rounded boundary.
- **`card-elevated`** — 4px radius with 16px interior padding. Used for form containers and floating overlay panels.

### Inputs
- **`input`** — Semi-transparent surface background, 0px radius (sharp), flat border. Floating label pattern with label above field.
- **`input-focus`** — Same geometry, gains a `{colors.focus-ring}` outline box-shadow at 6px spread. The only focus indicator in the system.

### Badges
- **`badge`** — Uppercase amber text (`{colors.warning}`), On Semi-Mono 12px with 0.72px tracking. No fill, no border. Appears above product names as a specification-style label. Reads like a gear code, not a promotional sticker.

### Navigation
- **`nav-bar`** — White bar, compact (~64px). Logo top-left, three category links (Shop / Activities / Explore) center, search/bag/account icons right. On hover, nav links fade between states over 0.3s ease-out (opacity + color). Sticky on scroll.

## Do's and Don'ts

### Do
- Use `{colors.ink}` (#000000) for all primary buttons — no tinted or softened blacks
- Apply 40px radius (`{rounded.lg}`) to every interactive button regardless of size; the radius is non-negotiable brand identity
- Keep product card imagery flat (0px radius or `{rounded.md}` 4px) — never apply the large button radius to images
- Use `{typography.label-mono}` with uppercase transform for all product status tags, size indicators, and categorical labels
- Let hero photography be full-bleed and edge-to-edge — the UI's job is to frame, not to compete
- Reserve `{colors.warning}` (#995c00) exclusively for product label badges — never as a general accent or hover state
- Maintain the 8px base grid — spacing values outside the scale (e.g., 10px, 15px) belong to legacy components only
- Use `{colors.focus-ring}` as the focus indicator on all interactive elements — do not replace with a border-based focus style

### Don't
- Don't introduce any chromatic color into the UI chrome (backgrounds, borders, nav) — `{colors.warning}` is the only permitted non-neutral UI color
- Don't add hover lift effects or card shadows — On's product cards are flat surfaces, not floating tiles
- Don't mix weight 400 and 700 in adjacent copy — use 500 (`{typography.body-medium}`) as the bridge when emphasis is needed without display weight
- Don't use On Mono / On Semi Mono for body copy or headings — the monospaced cuts are exclusively for uppercase label contexts
- Don't apply `{rounded.lg}` (40px) to anything that isn't a button — images, cards, and form elements live at 0px or 4px
- Don't use border-radius between 4px and 40px — the in-between range is absent from the system and would read as a foreign shape
- Don't soften button borders for secondary variants — the 1px solid `{colors.border}` on outlined buttons must stay sharp and dark
- Don't deploy `{colors.focus-ring}` as a decorative accent — it exists only to satisfy keyboard navigation accessibility

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <425px | Single column, full-bleed hero, stacked nav |
| Mobile | 425–768px | Single column with edge padding, hamburger navigation |
| Tablet | 768–1024px | 2-column product grid, category links visible |
| Desktop | 1024–1440px | 4-column product grid, full horizontal navigation, hero at full height |
| Large Desktop | >1440px | Max-width container centered at 1440px, side margins grow |

### Touch Targets
- Primary buttons at 14px vertical padding meet 44px touch height with the 16px line-height
- Circular icon buttons are 40×40px — borderline for WCAG 2.5.5; rely on additional tap padding
- Product cards are fully tappable surfaces — no small hit target risk

### Collapsing Strategy
- Navigation collapses to a hamburger below 768px; search and bag icons remain visible
- Hero display text scales from 53px → 36px → 28px as viewport narrows
- 4-column product grids collapse: 4-col → 2-col at 768px → 1-col at 425px
- Section gaps compress from 64px to 40px to 24px at mobile
- 40px button radius preserved at all breakpoints — the shape identity does not adapt

### Image Behavior
- Product card images use a radial gradient background (`{colors.surface}`) — white center fading to soft grey — ensuring the product reads cleanly regardless of shoe colorway
- Hero images: full-bleed at all breakpoints, art-directed crops between desktop (landscape) and mobile (portrait)
- Lazy loading on product grid images; a `{colors.surface}` grey placeholder fills before load

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (#ffffff)
- Primary text: `{colors.ink}` (#000000)
- CTA background: `{colors.primary}` (#000000)
- CTA text: `{colors.on-primary}` (#ffffff)
- Secondary text: `{colors.ink-secondary}` (#666666)
- Border: `{colors.border}` (#222222)
- Badge / label accent: `{colors.warning}` (#995c00)
- Focus ring: `{colors.focus-ring}` (#2f7efe)

### Example Component Prompts

1. **Primary CTA Button**: background `{colors.primary}` (#000000), text `{colors.on-primary}` (#ffffff), border-radius 40px (`{rounded.lg}`), padding 14px 24px, font On/IBM Plex Sans 500 16px. Hover: background `{colors.primary-container}` (#0f0f0f), 0.2s ease transition on background and color.

2. **Product Card Grid**: 4-column grid, 8px gap between cards. Each card: background `{colors.surface}` (#f6f7f8) for imagery area, 4px border-radius (`{rounded.md}`), flat (no shadow). Product name below in On 700 16px `{colors.ink}`. Price in On 400 16px `{colors.ink}`. Above name: uppercase `{colors.warning}` (#995c00) label in On Semi-Mono 500 12px, 0.72px letter-spacing if applicable.

3. **Hero Section**: Full-bleed photography, text anchored lower-left. Headline in On 700 53px `{colors.ink}` with −0.53px letter-spacing, line-height 1.1. Sub-headline in On 400 26px, line-height 1.5. Two buttons side by side: primary (black fill, 40px radius) and secondary (white fill, black 1px border, 40px radius).

4. **Email Capture Input**: background rgba(0,0,0,0.05) approximated as `{colors.surface}`, sharp 0px radius (`{rounded.none}`), padding 16px. Floating label above field in `{typography.caption}`. On focus: `0 0 0 6px {colors.focus-ring}` box-shadow, 1px solid black border.

5. **Navigation Bar**: White (`{colors.background}`) sticky bar, 64px height. On logomark 54×54px left. Center: "Shop", "Activities", "Explore" in On 500 16px `{colors.ink}`, 24px gap between. Right: search, bag, account SVG icons in `{colors.ink}`. Nav link hover: color and opacity shift over 0.3s ease-out.

### Iteration Guide

1. Start with a pure white (`{colors.background}`) canvas and place black (`{colors.ink}`) text — the baseline is maximum contrast with zero decoration
2. Every button gets 40px radius (`{rounded.lg}`) — this is the shape signature; do not soften or harden it
3. Chromatic accent rule: `{colors.warning}` (#995c00) for product label badges only; `{colors.focus-ring}` (#2f7efe) for keyboard focus only — everything else is black and white
4. Typography hierarchy is size and weight only: display at 700, body at 400 or 500, labels at On Semi-Mono uppercase
5. Product imagery rests on a radial gradient surface (`{colors.surface}`) — never a flat white or solid grey background
6. Shadows appear only on floating panels (max opacity 0.10) — flat everywhere else
7. The label tier (`{typography.label-mono}`) is the system's personality detail: when in doubt about badge, tag, or size copy, apply uppercase Semi-Mono at 12px/0.72px

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by On Running. Brand names and trademarks belong to their respective owners.