1.14 · Aesthetic

Swiss / International
Style.

Helvetica, a brutal 12-column grid, a single red accent, asymmetric balance. The aesthetic that defined 20th-century corporate design.

What it is

The Swiss / International Typographic Style emerged from 1950s Zurich and Basel design schools. Its principles: rigorous grid systems, sans-serif typefaces (Helvetica, Univers, Akzidenz-Grotesk), asymmetric layout, photography over illustration, and a strict color palette — usually black and white with one accent (almost always red). Used today by Apple, Massimo Vignelli's work, the entire Wallpaper magazine ecosystem, and modern brands like Mubi and A24.

How it works

The page is built on a 12-column CSS Grid with consistent gutters and visible (or invisible) row baselines. Content blocks of varying sizes are placed asymmetrically across the grid — some span 7 columns, some 3, some 5 — but always snap to grid lines. Typography is a single sans family used at multiple weights (Inter or Helvetica), with hairline horizontal rules separating sections. One color (deep red #e63946) is used sparingly to highlight one piece of metadata or one keyword in the headline. Everything else is black on white.

12-column gridCSS Grid with grid-template-columns:repeat(12,1fr) — the foundation
One typefaceInter / Helvetica used at multiple weights (300, 400, 700, 900)
Black + white + 1 redThe classic Swiss palette — never more than three colors
Asymmetric balanceSpans of 7+5, 8+4, 3+3+3+3 — never 6+6 centered

Live demo

Click "Show grid" in the top-right to reveal the underlying 12-column structure.

Live
Wallpaper* · Issue 304 — June 2026
€ 12.50 · Architecture special
A brutal
kind of
order.
Plate 04 — Concrete
01 / Essay
The grid as morality

How rigorous structure became a political idea in postwar Zurich.

02 / Survey
100 typefaces

A century of sans-serifs from Akzidenz to Inter and back.

03 / Profile
Vignelli's last desk

A visit to the office that designed New York's subway map.

04 / Catalog
Stationery, ranked

The 40 best notebooks shipping with proper grid paper.

Copy this prompt

Prompt · 1.14 Swiss / International Style
Build a Swiss/International Style magazine cover layout. Background pure white, text black, ONE accent color (deep red #e63946) used sparingly. Use only Helvetica (or Inter at multiple weights — 300/400/700/900). Build a 12-column CSS Grid (grid-template-columns:repeat(12,1fr), grid-template-rows:repeat(6,1fr), gap:12px). Place content asymmetrically: top-left metadata "Wallpaper* · Issue 304" spans columns 1-7 above a black top border; top-right price tag "€ 12.50 · Architecture special" spans columns 8-12 above a RED top border; the huge masthead headline "A brutal kind of order." spans 8 columns and 3 rows (font-weight:900 mixed with light 300 weight for the word "brutal", red color on "order"); right side has a flat-color image block (red with a white + black circle composition) spanning 4 columns and 3 rows; bottom row has 4 equal-width article cards each spanning 3 columns with a small uppercase number ("01 / Essay"), a bold black headline divided by a 1px top rule, and a small body paragraph. Include a "Show grid" toggle button that reveals faint guide lines overlaying the 12-column grid so users can see the underlying structure.

Example sites to study