A monochrome Swiss-performance system where one black ink is text, button, and brand mark on a white canvas — pill-shaped controls, flat hairline surfaces, and a single seafoam-mint accent.
One proprietary grotesque (substituted here with Hanken Grotesk). Hierarchy comes from size and weight — 400 body, 500 labels and buttons, 700 headings — with tight negative tracking on the display size.
Product tiles are nearly square and flat — the shoe sits on a soft radial grey backdrop rather than a drop shadow. A thin hairline and whitespace do the separating; hover lifts a whisper-soft shadow.
An 8px base with a 4px substep, scaling to unusually generous ~64px page gutters that give the desktop its gallery-like calm.
Two opposite behaviours: containers stay near-square at 2–4px, while every button and control goes fully round. That square-surface / round-control tension is the signature.
| Name | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Gutters tighten to ~22px; grids fall to 1–2 columns; the split hero stacks. |
| Tablet | 768–1023px | Four-up product grids become two-up; the 64px gutters ease in. |
| Laptop | 1024–1279px | Full four-column grids return with generous gutters. |
| Desktop | ≥ 1280px | Edge-to-edge split hero; max content width with wide 64px gutters. |
On's responsive instinct is subtraction — it drops gutters and columns rather than rearranging components, so the calm monochrome character holds at every width.
On has no pricing table — this demonstrates the card pattern with a plausible On Membership (which in reality is free to join).
The table pattern, shown as a recent-orders view.
| Order | Item | Channel | Status | When |
|---|---|---|---|---|
| #ON-48213 | Cloudmonster 2 | on.com | Shipped | 2h ago |
| #ON-48198 | Cloudsurfer | App | Packing | Today |
| #ON-48176 | Cloudtilt | on.com | Shipped | Yesterday |
| #ON-48120 | Cloudnova | Retail | Processing | 2 days ago |
| #ON-48097 | Cloudpulse | App | Delivered | 3 days ago |
Sign-in and create-account, in On's quiet form styling.