# Minimalismus

Auch bekannt als: minimales Webdesign, weniger ist mehr, Clean UI, Weißraum-Design  
Ära: zeitlos; Web-Wellen 2008 (Apple), 2013 (Flat), 2019 (Linear/Notion), anhaltend  
Seite: https://designforai.dev/de/style/minimalism

## Merkmale

- sehr wenige Elemente; jedes hat eine Aufgabe
- eine Schrift, zwei Größen, zwei Schnitte, eine Akzentfarbe
- Weißraum trägt die Hierarchie; keine Boxen, keine Trennlinien, außer unverzichtbar
- meist Schwarz auf Weiß oder Fast-Weiß, dünne Haarlinien
- kleiner, präziser Radius (4-8px) oder keiner; Schatten fast unsichtbar
- Bilder sind spärlich und groß, wenn sie vorkommen
- Motion ist dezent: Opacity und 4px translate, 150-250ms

Palette: #ffffff Seite, #111111 Text, #6b7280 Sekundär, #e5e7eb Haarlinie, #2563eb einziger Akzent

Schrift: Geist, Helvetica Neue oder system-ui; Überschriften 600 bei 32-56px mit -0.02em, Fließtext 400 bei 16-17px, line-height 1.6; nicht mehr als 4 Größen auf der ganzen Seite

## Do

- lösche alles, was nichts daran ändert, was die Nutzerin als Nächstes tut
- richte an einem 8px-Raster und einer Lesebreite von 640-720px aus
- lass Schriftgröße und Abstand die Hierarchie machen statt Farbe und Boxen

## Don't

- setze keine Icons neben jede Überschrift
- nutze keine Karten oder Ränder zum Gruppieren; nutze Raum
- nutze nicht mehr als eine Akzentfarbe oder einen Verlauf

Bekannt dafür: Apple.com, Notion, Linear (Light Mode), Muji

## CSS-Seed

```css
:root{--bg:#ffffff; --fg:#111111; --muted:#6b7280; --accent:#2563eb; --line:#e5e7eb; --radius:6px; --shadow:none; --font:'Geist',system-ui,sans-serif}
```

## Prompt

Baue die Seite in strengem Minimalismus. Hintergrund #ffffff, Text #111111, Sekundär #6b7280, Haarlinie #e5e7eb, ein Akzent #2563eb nur für Links und den Primärbutton. Schrift Geist: genau vier Größen - 48px 600 (h1, -0.02em), 24px 600 (h2), 16px 400 (Fließtext, line-height 1.6), 13px 400 (Meta). Inhaltsspalte 680px, Seitenpadding 24px, Abschnitte durch 96px Abstand getrennt und sonst nichts (keine Linien, keine Hintergründe). Keine Karten, keine Icons, keine Schatten, keine Verläufe. Buttons: 40px hoch, Radius 6px, solides #111111 mit weißem Text; Sekundärbuttons sind reine Textlinks. Bilder, wenn genutzt, in voller Spaltenbreite mit 8px Radius und ohne Rand. Die Nav ist Logo links und drei Textlinks rechts. Motion: 150ms Opacity bei Hover; nichts animiert beim Scrollen.