Design for AI

Stil Swiss / International Typographic Style: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für swiss / international typographic style. Auch bekannt als Schweizer Stil, Internationaler Stil, Rasterdesign, Helvetica-Design, Müller-Brockmann-Stil. Schweiz der 1950er; Web-Revival ab den 2010ern.

Merkmale

  • strenges mathematisches Raster (12 Spalten) mit sichtbarer Ausrichtungsdisziplin
  • eine serifenlose Familie (Helvetica-Linie), asymmetrische Layouts, linksbündiger Flattersatz
  • riesiger Größenkontrast: gigantische Headline, kleiner Fließtext, viele leere Rasterzellen
  • Primärrot (oder eine starke Farbe) plus Schwarz auf Weiß
  • geometrische Formen und Diagonalen als Struktur, nicht als Dekoration
  • sachliche Fotografie, hart beschnitten, keine Illustration
  • kein Ornament, keine Schatten, keine runden Ecken

Palette

#ffffff Seite, #000000 Text, #e30613 Akzentrot, #f2f2f2 Sekundärfläche, #737373 gedämpfter Text

Schrift

Helvetica Neue, falls lizenziert; frei: Work Sans, Neue-Haas-Ersatz "Instrument Sans" oder Archivo; Headline 700 bei 72-120px mit -0.03em Tracking, Fließtext 400 bei 16-18px, Bildunterschriften 12px Versalien 0.08em

Do

  • zeichne ein 12-Spalten-Raster mit 24px Gutter und richte jede Kante daran aus, auch Bilder
  • nutze eine Schriftfamilie in zwei Schnitten und eine strenge Größenskala (12/16/24/48/96)
  • lass ganze Spalten leer; Weißraum ist auch ein Rasterelement

Don't

  • zentriere keinen Text; nur linksbündig
  • füge keine Schatten, Verläufe, Radien oder Texturen hinzu
  • nutze nicht mehr als eine Akzentfarbe

Bekannt dafür: Schweizerische Bundesbahnen, Museum für Gestaltung Zürich, Bloomberg Businessweek (2010er), Wired.com (Redesign 2020)

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

Baue die Seite im Swiss International Typographic Style. Hintergrund #ffffff, Text #000000, einziger Akzent #e30613, gedämpfter Text #737373, keine weiteren Farben. Layout auf einem strengen 12-Spalten-Raster mit 24px Gutter und 1440px Maximalbreite; jeder Textblock, jedes Bild und jede Linie richtet sich an Spaltenkanten aus. Headline in Work Sans 700 bei 96px Desktop / 48px mobil mit letter-spacing -0.03em und line-height 0.95, linksbündig, über 8 Spalten, 4 bleiben leer. Fließtext Work Sans 400 bei 18px, line-height 1.5, maximal 6 Spalten breit. Bildunterschriften 12px Versalien mit 0.08em Tracking. Nutze 1px schwarze Linien zur Trennung von Abschnitten und ein einzelnes großes rotes Rechteck oder ein diagonales Band als strukturelle Grafik. Kein border-radius, keine Schatten, keine Verläufe, keine Icons außer Pfeilen. Fotografie in Schwarzweiß, auf das Raster beschnitten. Motion: keine, außer einem 150ms Farbwechsel auf Links.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im Swiss International Typographic Style. Hintergrund #ffffff, Text #000000, einziger Akzent #e30613, gedämpfter Text #737373, keine weiteren Farben. Layout auf einem strengen 12-Spalten-Raster mit 24px Gutter und 1440px Maximalbreite; jeder Textblock, jedes Bild und jede Linie richtet sich an Spaltenkanten aus. Headline in Work Sans 700 bei 96px Desktop / 48px mobil mit letter-spacing -0.03em und line-height 0.95, linksbündig, über 8 Spalten, 4 bleiben leer. Fließtext Work Sans 400 bei 18px, line-height 1.5, maximal 6 Spalten breit. Bildunterschriften 12px Versalien mit 0.08em Tracking. Nutze 1px schwarze Linien zur Trennung von Abschnitten und ein einzelnes großes rotes Rechteck oder ein diagonales Band als strukturelle Grafik. Kein border-radius, keine Schatten, keine Verläufe, keine Icons außer Pfeilen. Fotografie in Schwarzweiß, auf das Raster beschnitten. Motion: keine, außer einem 150ms Farbwechsel auf Links.

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

Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.