# Swiss / International Typographic Style

Also called: Swiss style, International Style, grid design, Helvetica design, Müller-Brockmann style  
Era: 1950s Switzerland; web revival 2010s onward  
Page: https://designforai.dev/style/swiss-international-typographic-style

## Traits

- strict mathematical grid (12 columns) with visible alignment discipline
- one sans-serif family (Helvetica lineage), asymmetric layouts, flush-left ragged-right
- huge scale contrast: giant headline, small body, lots of empty grid cells
- primary red (or one strong colour) plus black on white
- geometric shapes and diagonals used as structure, not decoration
- objective photography, cropped hard, no illustration
- no ornament, no shadows, no rounded corners

Palette: #ffffff page, #000000 text, #e30613 accent red, #f2f2f2 secondary surface, #737373 muted text

Type: Helvetica Neue if licensed; free: Work Sans, Neue Haas-alike "Instrument Sans", or Archivo; headline 700 at 72-120px with -0.03em tracking, body 400 at 16-18px, captions 12px uppercase 0.08em

## Do

- draw a 12-column grid with 24px gutters and align every edge to it, including images
- use one type family in two weights and a strict size scale (12/16/24/48/96)
- leave whole columns empty; white space is a grid element too

## Don't

- do not centre text; flush-left only
- do not add shadows, gradients, radius or textures
- do not use more than one accent colour

Known for it: Swiss Federal Railways, Museum für Gestaltung Zürich, Bloomberg Businessweek (2010s), Wired.com (2020 redesign)

## CSS seed

```css
:root{--bg:#ffffff; --fg:#000000; --accent:#e30613; --muted:#737373; --radius:0; --gutter:24px; --font:'Work Sans',sans-serif}
```

## Prompt

Build the site in Swiss International Typographic Style. Background #ffffff, text #000000, single accent #e30613, muted text #737373, no other colours. Layout on a strict 12-column grid with 24px gutters and a 1440px max width; every text block, image and rule aligns to column edges. Headline in Work Sans 700 at 96px desktop / 48px mobile with letter-spacing -0.03em and line-height 0.95, flush-left, spanning 8 columns and leaving 4 empty. Body Work Sans 400 at 18px, line-height 1.5, max 6 columns wide. Captions 12px uppercase with 0.08em tracking. Use 1px black rules to separate sections and a single large red rectangle or diagonal band as structural graphic. No border-radius, no shadows, no gradients, no icons other than arrows. Photography in black and white, cropped to grid. Motion: none except a 150ms colour change on links.