Design for AI

Stil Rein typografisch: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für rein typografisch. Auch bekannt als typgetriebenes Design, Typography-first, Nur-Text-Website, bildloses Design, Schrift als Bild. Poster der 1960er; Web ab 2010 (Studios, Schriftgießereien, Manifeste, persönliche Seiten).

Merkmale

  • keine Fotos, keine Illustration, keine Icons: Schrift ist das einzige visuelle Material
  • extremer Größenkontrast, von 200px Headlines bis 12px Fußnoten
  • das Raster ist allein durch Ausrichtung sichtbar
  • eine oder zwei Schriften, voll ausgereizt: Schnitte, Kursive, Kapitälchen, Ziffern
  • Farbe als einzelne Fläche oder einzelnes Wort, wenn überhaupt
  • Text kann das Layout sein: gedreht, umrandet, überlappend, vertikal laufend
  • Motion: variable Schriftachsen animieren, Text-Reveals, Marquee

Palette

#ffffff Papier (oder #111111 invertiert), #111111 Tinte, #ff3b00 ein Akzent (optional), #9a9a9a gedämpft

Schrift

eine ausdrucksstarke Familie mit Spielraum: Fraunces (variable optische Größe und Gewicht), Geist oder IBM Plex Sans variabel, Space Grotesk, Playfair Display oder eine Mono wie JetBrains Mono; Headlines 96-240px, Fließtext 16-18px, Fußnoten 12px

Do

  • wähle eine variable Schrift und nutze ihre Achsen (Gewicht, optische Größe, Breite) als Designsystem
  • setze eine strenge Typoskala (12, 16, 24, 40, 72, 128, 240) und verlass sie nie
  • nutze umrandeten Text (-webkit-text-stroke 1px) und überlappende Zeilen für Hierarchie statt Bilder

Don't

  • schmuggle keine Icons oder dekorativen Formen hinein; ist es keine Glyphe, passt es nicht zum Stil
  • nutze nicht mehr als zwei Familien
  • mach Fließtext nicht schwer lesbar, um clever zu wirken; nur Display-Text wird experimentell

Bekannt dafür: Pentagram (teilweise), Klim Type Foundry, Dinamo, Bureau Borsche, Readymag-Showcases

CSS-Seed
:root {
  --bg: #ffffff;
   --fg: #111111;
   --accent: #ff3b00;
   --muted: #9a9a9a;
   --radius: 0;
   --scale: 1.6;
   --font: 'Fraunces',serif;
   --font-ui: 'Geist',sans-serif
}
Prompt

Baue die Seite als rein typografisches Design. Keine Bilder, keine Icons, keine Illustrationen, keine dekorativen Formen. Hintergrund #ffffff, Tinte #111111, gedämpft #9a9a9a, ein Akzent #ff3b00 für ein einzelnes Wort pro Screen. Schriften: Fraunces variabel für Display und Fließtext, Geist 400 bei 13px für Nav und Fußnoten. Typoskala fest bei 12, 16, 24, 40, 72, 128 und 240px. Hero: eine 240px Headline in Fraunces bei Gewicht 900 und optischer Größe 144, line-height 0.85, Tracking -0.04em, über drei Zeilen linksbündig umbrechend, mit der zweiten Zeile umrandet (-webkit-text-stroke 1px #111111, transparente Füllung). Darunter ein 24px Absatz in Gewicht 300 bei max-width 40ch. Abschnittstitel laufen vertikal (writing-mode vertical-rl) im linken Rand bei 16px Versalien 0.2em. Linien sind 1px #111111. Motion: beim Laden animiert die Headline ihre Gewichtsachse über 1.2s von 300 auf 900; ein 16px Versalien-Marquee läuft mit 30s linear infinite. Kein Radius, keine Schatten.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite als rein typografisches Design. Keine Bilder, keine Icons, keine Illustrationen, keine dekorativen Formen. Hintergrund #ffffff, Tinte #111111, gedämpft #9a9a9a, ein Akzent #ff3b00 für ein einzelnes Wort pro Screen. Schriften: Fraunces variabel für Display und Fließtext, Geist 400 bei 13px für Nav und Fußnoten. Typoskala fest bei 12, 16, 24, 40, 72, 128 und 240px. Hero: eine 240px Headline in Fraunces bei Gewicht 900 und optischer Größe 144, line-height 0.85, Tracking -0.04em, über drei Zeilen linksbündig umbrechend, mit der zweiten Zeile umrandet (-webkit-text-stroke 1px #111111, transparente Füllung). Darunter ein 24px Absatz in Gewicht 300 bei max-width 40ch. Abschnittstitel laufen vertikal (writing-mode vertical-rl) im linken Rand bei 16px Versalien 0.2em. Linien sind 1px #111111. Motion: beim Laden animiert die Headline ihre Gewichtsachse über 1.2s von 300 auf 900; ein 16px Versalien-Marquee läuft mit 30s linear infinite. Kein Radius, keine Schatten.

## Tokens
:root { --bg:#ffffff; --fg:#111111; --accent:#ff3b00; --muted:#9a9a9a; --radius:0; --scale:1.6; --font:'Fraunces',serif; --font-ui:'Geist',sans-serif }

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