Art & design movements · 1950s–1970s
Swiss / International
A design system built on the grid, neutral grotesque type, and the belief that objectivity and clarity are the highest virtues of visual communication.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(99.5% 0 0) - --fg
oklch(8% 0 0) - --muted
oklch(42% 0 0) - --surface
oklch(99.5% 0 0) - --surface-2
oklch(95% 0 0) - --border
oklch(82% 0 0) - --accent
oklch(48% 0.24 26) - --accent-fg
oklch(99.5% 0 0) - --focus
oklch(48% 0.24 26)
| Token | Value |
|---|---|
| --font-body | 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', system-ui, sans-serif |
| --font-display | 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', system-ui, sans-serif |
| --font-mono | 'Helvetica Neue', Helvetica, Arial, monospace |
| --radius | 0px |
| --radius-sm | 0px |
| --shadow | none |
| --shadow-lg | 0 8px 24px oklch(0% 0 0 / 0.18) |
:root {
--bg: oklch(99.5% 0 0);
--fg: oklch(8% 0 0);
--muted: oklch(42% 0 0);
--surface: oklch(99.5% 0 0);
--surface-2: oklch(95% 0 0);
--border: oklch(82% 0 0);
--accent: oklch(48% 0.24 26);
--accent-fg: oklch(99.5% 0 0);
--focus: oklch(48% 0.24 26);
--font-body: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', system-ui, sans-serif;
--font-display: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', system-ui, sans-serif;
--font-mono: 'Helvetica Neue', Helvetica, Arial, monospace;
--radius: 0px;
--radius-sm: 0px;
--shadow: none;
--shadow-lg: 0 8px 24px oklch(0% 0 0 / 0.18);
}Where it came from
Origin: Basel and Zürich, Switzerland
Developed at schools in Basel and Zürich in the early 1950s, often called the International Typographic Style. Key figures include Josef Müller-Brockmann, Armin Hofmann and Emil Ruder, who formalised the grid as a rational framework for print. Helvetica was designed in 1957 and became its typographic emblem. The style moved from print to signage — the New York City subway system uses a version of it — and shaped corporate identity design through the 1960s and 1970s before becoming the default language of serious institutional communication.
How to spot it
- Mathematical column grid with strong vertical and horizontal alignment
- Helvetica or another neutral grotesque at all sizes and weights
- Photography over illustration — objective, documentary, uncropped
- Asymmetric layout within the grid; generous white space
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Information hierarchy is immediately legible | Cold and impersonal when applied without warmth |
| Ages well — reads as confident and restrained, not dated | Overdone in tech — "Swiss" is a cliché for SaaS |
| Scales from business card to billboard without breaking | Punishing for decorative or playful brands |
In the wild
- New York MTA wayfinding system
- Swiss PTT postal identity
- Müller-Brockmann concert poster series
Use it when
Clarity is the product — reports, dashboards, documentation, anything where visual noise is a cost.