# Cremepapier-Warm-Minimal

Auch bekannt als: warmer Minimalismus, Creme-Minimal, Beige-UI, Cozy Minimal, Papierweiß-Design, Quiet-Luxury-Web  
Ära: ab 2021 (Arc, Notion-nahe Tools, Indie-SaaS, Newsletter-Seiten)  
Seite: https://designforai.dev/de/style/cream-paper-warm-minimal

## 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

```css
: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.