Design for AI

Swiss / International Typographic Style: UI design prompt

Palette, type rules and a pasteable prompt for swiss / international typographic style. Also called Swiss style, International Style, grid design, Helvetica design, Müller-Brockmann style. 1950s Switzerland; web revival 2010s onward.

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
: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.
For design.md, .cursorrules or AGENTS.md
## Design direction
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.

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

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.