Design for AI

Stil Cremepapier-Warm-Minimal: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für cremepapier-warm-minimal. Auch bekannt als warmer Minimalismus, Creme-Minimal, Beige-UI, Cozy Minimal, Papierweiß-Design, Quiet-Luxury-Web. ab 2021 (Arc, Notion-nahe Tools, Indie-SaaS, Newsletter-Seiten).

Merkmale

  • warme Off-White-Basis (Creme, Knochen, Leinen) statt reinem Weiß
  • Anthrazit- oder warmschwarzer Text, nie kaltes #000
  • ein erdiger Akzent: Terrakotta, Olive, Ocker oder staubiges Blau
  • Serif-Überschriften mit humanistischer Sans im Fließtext, oder eine einzige warme Sans
  • weicher Radius (10-14px), kaum sichtbare Schatten oder 1px warmgraue Ränder
  • großzügiger Weißraum, ruhige Hierarchie, kleine Pillen-Tags
  • sanfte Motion; nichts hüpft

Palette

#f7f3ea Creme, #1f1d1a Warmschwarz, #6b665e gedämpft, #e4ddd0 Linie, #c2603e Terrakotta-Akzent, #ede7da dezente Fläche

Schrift

Fraunces, Newsreader oder Instrument Serif für Überschriften (500-600 bei 36-56px), DM Sans, Geist oder Manrope für Fließtext bei 16-17px; alternativ Söhne-Ersatz "Instrument Sans" allein

Do

  • entscheide dich einmal für Wärme: jedes Grau sollte einen Hauch Gelb oder Rot tragen, damit nichts kalt wirkt
  • nutze 1px Ränder in #e4ddd0 statt Schatten; maximal ein weicher Schatten für ein schwebendes Element
  • halte den Akzent unter 5 % der Seite (Links, ein Button, ein Tag)

Don't

  • misch keinen kalten blauen Akzent in die warme Palette
  • füge Dark Mode nicht nachträglich hinzu; wenn du ihn brauchst, baue ein warmes Dunkel (#1c1a17), kein kaltes
  • überfülle nicht; der Stil stirbt ohne Raum

Bekannt dafür: Arc-Browser-Seite, Cosmos, Read.cv, Bearblog-Themes, Are.na (teilweise)

CSS-Seed
:root {
  --bg: #f7f3ea;
   --surface: #ede7da;
   --fg: #1f1d1a;
   --muted: #6b665e;
   --line: #e4ddd0;
   --accent: #c2603e;
   --radius: 12px;
   --font: 'DM Sans',sans-serif;
   --font-display: 'Fraunces',serif
}
Prompt

Baue die Seite im Cremepapier-Warm-Minimal-Stil. Hintergrund #f7f3ea, Sekundärfläche #ede7da, Text #1f1d1a, gedämpft #6b665e, Ränder #e4ddd0, einziger Akzent #c2603e. Schriften: Fraunces 500 für Überschriften bei 52/34/24px mit -0.015em Tracking und line-height 1.1, DM Sans 400 bei 17px für Fließtext mit line-height 1.65, 13px 500 für Labels. Layout: Inhalt max-width 720px für Text und 1080px für Raster, 24px Seitenpadding, 112px zwischen Abschnitten. Karten sind Fläche #ede7da mit 1px #e4ddd0 Rand, border-radius 12px, 24px Padding, kein Schatten. Primärbutton: #1f1d1a Hintergrund, #f7f3ea Text, Radius 10px, 44px hoch; sekundär ist ein Textlink in #c2603e mit 1px Unterstreichung, 4px versetzt. Tags: Pille, #ede7da, 12px Versalien 0.06em. Bilder bekommen Radius 12px und einen 1px Rand. Icons 20px, 1.5px Strich, #6b665e. Motion: 200ms ease auf Hover-Farbe und ein 400ms Fade nur beim Seitenladen. Nirgends reines Weiß oder reines Schwarz.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im Cremepapier-Warm-Minimal-Stil. Hintergrund #f7f3ea, Sekundärfläche #ede7da, Text #1f1d1a, gedämpft #6b665e, Ränder #e4ddd0, einziger Akzent #c2603e. Schriften: Fraunces 500 für Überschriften bei 52/34/24px mit -0.015em Tracking und line-height 1.1, DM Sans 400 bei 17px für Fließtext mit line-height 1.65, 13px 500 für Labels. Layout: Inhalt max-width 720px für Text und 1080px für Raster, 24px Seitenpadding, 112px zwischen Abschnitten. Karten sind Fläche #ede7da mit 1px #e4ddd0 Rand, border-radius 12px, 24px Padding, kein Schatten. Primärbutton: #1f1d1a Hintergrund, #f7f3ea Text, Radius 10px, 44px hoch; sekundär ist ein Textlink in #c2603e mit 1px Unterstreichung, 4px versetzt. Tags: Pille, #ede7da, 12px Versalien 0.06em. Bilder bekommen Radius 12px und einen 1px Rand. Icons 20px, 1.5px Strich, #6b665e. Motion: 200ms ease auf Hover-Farbe und ein 400ms Fade nur beim Seitenladen. Nirgends reines Weiß oder reines Schwarz.

## Tokens
:root { --bg:#f7f3ea; --surface:#ede7da; --fg:#1f1d1a; --muted:#6b665e; --line:#e4ddd0; --accent:#c2603e; --radius:12px; --font:'DM Sans',sans-serif; --font-display:'Fraunces',serif }

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