Design for AI

Stil Editorial / Magazin: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für editorial / magazin. Auch bekannt als Editorial Design, Magazinlayout, Zeitungs-Web, Longform-Editorial. Print-Erbe; Web-Hochphase 2012 bis heute (NYT Snow Fall 2012 als Meilenstein).

Merkmale

  • Serifen-Display-Headlines gepaart mit einer klaren Sans für UI und Bildunterschriften
  • mehrspaltiges Artikellayout, Initialen, Pull-Quotes, Autorenzeilen, Datumszeile
  • großzügige Zeilenlänge (60-75 Zeichen), großer Durchschuss, klarer vertikaler Rhythmus
  • randloses Hero-Bild mit Bildunterschrift, dann eine schmale Lesespalte
  • Haarlinien, Kapitälchen als Abschnittslabels, nummerierte Abschnitte
  • zurückhaltende Palette: Papierweiß, Tintenschwarz, ein redaktioneller Akzent
  • Motion sind langsame Scroll-Reveals von Bildern, sonst nichts

Palette

#fbfaf7 Papier, #141414 Tinte, #8a1c1c Akzent (Ochsenblut), #6b6b6b Bildunterschriftengrau, #e6e2da Linien

Schrift

Playfair Display, Fraunces oder Newsreader für Headlines (700-900, 48-96px), Source Serif 4 oder Lora für Fließtext bei 19-21px mit line-height 1.7, IBM Plex Sans oder Work Sans 12-13px Versalien für Labels

Do

  • setze Fließtext bei 19-21px in einer 680px-Spalte; Lesekomfort ist das Produkt
  • nutze eine echte typografische Hierarchie: Kicker, Headline, Deck, Autorenzeile, Fließtext, Pull-Quote, Bildunterschrift
  • gib jedem Bild eine Bildunterschrift und einen Credit

Don't

  • nutze keine Karten für Artikel; trenne sie mit Linien, Weißraum und Schriftgrößen
  • zentriere keinen Fließtext
  • nutze nicht mehr als zwei Schriften plus eine Mono für Daten

Bekannt dafür: The New York Times, The Atlantic, Bloomberg Businessweek, Kinfolk

CSS-Seed
:root {
  --bg: #fbfaf7;
   --fg: #141414;
   --accent: #8a1c1c;
   --muted: #6b6b6b;
   --rule: #e6e2da;
   --radius: 0;
   --font: 'Fraunces',serif;
   --font-body: 'Source Serif 4',serif
}
Prompt

Baue die Seite als redaktionelles Magazinlayout. Papierhintergrund #fbfaf7, Tinte #141414, Akzent #8a1c1c, Bildunterschriftengrau #6b6b6b, Haarlinien #e6e2da bei 1px. Headlines in Fraunces 800 bei 88px Desktop / 44px mobil, line-height 1.02, letter-spacing -0.02em; Decks in Fraunces 400 kursiv bei 24px; Fließtext in Source Serif 4 bei 20px, line-height 1.7, Spalte max-width 680px; Kicker und Autorenzeilen in IBM Plex Sans 12px Versalien mit 0.1em Tracking. Randloses Hero-Bild 16:9 mit Bildunterschrift darunter. Ergänze eine Initiale im ersten Absatz (3 Zeilen hoch), Pull-Quotes bei 32px, die auf Desktop 80px über die Spalte hinausragen, und nummerierte Abschnittsüberschriften. Keine Karten, keine Schatten, kein Radius; trenne Abschnitte mit 1px-Linien und 96px Abstand. Bilder blenden beim Scrollen über 600ms ein; sonst bewegt sich nichts. Footer als dreispaltiges Impressum in Kapitälchen.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite als redaktionelles Magazinlayout. Papierhintergrund #fbfaf7, Tinte #141414, Akzent #8a1c1c, Bildunterschriftengrau #6b6b6b, Haarlinien #e6e2da bei 1px. Headlines in Fraunces 800 bei 88px Desktop / 44px mobil, line-height 1.02, letter-spacing -0.02em; Decks in Fraunces 400 kursiv bei 24px; Fließtext in Source Serif 4 bei 20px, line-height 1.7, Spalte max-width 680px; Kicker und Autorenzeilen in IBM Plex Sans 12px Versalien mit 0.1em Tracking. Randloses Hero-Bild 16:9 mit Bildunterschrift darunter. Ergänze eine Initiale im ersten Absatz (3 Zeilen hoch), Pull-Quotes bei 32px, die auf Desktop 80px über die Spalte hinausragen, und nummerierte Abschnittsüberschriften. Keine Karten, keine Schatten, kein Radius; trenne Abschnitte mit 1px-Linien und 96px Abstand. Bilder blenden beim Scrollen über 600ms ein; sonst bewegt sich nichts. Footer als dreispaltiges Impressum in Kapitälchen.

## Tokens
:root { --bg:#fbfaf7; --fg:#141414; --accent:#8a1c1c; --muted:#6b6b6b; --rule:#e6e2da; --radius:0; --font:'Fraunces',serif; --font-body:'Source Serif 4',serif }

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