Digital era · 2010s–present
Swiss Modern
The International Typographic Style rebuilt for screen: strict grid, neutral grotesque, maximum white space, and one disciplined accent.
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% 0 0) - --fg
oklch(11% 0 0) - --muted
oklch(50% 0 0) - --surface
oklch(100% 0 0) - --surface-2
oklch(96.5% 0 0) - --border
oklch(90% 0 0) - --accent
oklch(62% 0.24 50) - --accent-fg
oklch(99% 0 0) - --focus
oklch(62% 0.24 50)
| Token | Value |
|---|---|
| --font-body | 'Inter Tight', 'Inter', system-ui, sans-serif |
| --font-display | 'Inter Tight', 'Inter', system-ui, sans-serif |
| --font-mono | ui-monospace, 'SFMono-Regular', monospace |
| --radius | 6px |
| --radius-sm | 4px |
| --shadow | 0 1px 2px oklch(0% 0 0 / 0.06), 0 0 0 1px oklch(0% 0 0 / 0.04) |
| --shadow-lg | 0 8px 24px oklch(0% 0 0 / 0.1), 0 0 0 1px oklch(0% 0 0 / 0.05) |
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
:root {
--bg: oklch(99% 0 0);
--fg: oklch(11% 0 0);
--muted: oklch(50% 0 0);
--surface: oklch(100% 0 0);
--surface-2: oklch(96.5% 0 0);
--border: oklch(90% 0 0);
--accent: oklch(62% 0.24 50);
--accent-fg: oklch(99% 0 0);
--focus: oklch(62% 0.24 50);
--font-body: 'Inter Tight', 'Inter', system-ui, sans-serif;
--font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
--font-mono: ui-monospace, 'SFMono-Regular', monospace;
--radius: 6px;
--radius-sm: 4px;
--shadow: 0 1px 2px oklch(0% 0 0 / 0.06), 0 0 0 1px oklch(0% 0 0 / 0.04);
--shadow-lg: 0 8px 24px oklch(0% 0 0 / 0.1), 0 0 0 1px oklch(0% 0 0 / 0.05);
}Where it came from
Origin: Contemporary web and branding studios applying International Style principles
As web typography matured — variable fonts, system font stacks that include Helvetica, CSS grid — it became possible to reproduce the rigour of the Swiss poster in a browser. Studios and design tools brought grid systems to the web. Swiss Modern is the contemporary iteration: it respects the grid, uses a neutral grotesque or variable typeface, keeps the palette near-monochrome, and uses the accent with surgical restraint rather than nowhere or everywhere.
How to spot it
- Strict column grid with visible vertical rhythm
- Neutral grotesque at varied weights (Inter, Helvetica Neue, Aktiv Grotesk)
- Near-monochrome palette with one accent used only for calls to action
- Photography integrated into the grid, not floating free
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Extremely versatile — works for any industry at any scale | Can feel cold and corporate for consumer products |
| Time-resistant: grid + neutral type ages better than almost any trend | Requires genuine discipline: one ornamental detour breaks the system |
| A few type sizes and two colours cover everything | 'Swiss' is now a design-community cliché for 'we know design history' |
In the wild
- Stripe's documentation site
- Vercel's marketing website
- Linear's branding
Use it when
B2B SaaS, developer tools, financial products — anywhere clarity and longevity outweigh expressiveness.