# Monochrom Schwarzweiß

Auch bekannt als: Schwarzweiß-Webdesign, monochromes UI, achromatisches Design, farbloses Design, Graustufen-Seite  
Ära: zeitlos; Web-Wellen mit Mode- und Fotografie-Portfolios, ab 2016 für Studios  
Seite: https://designforai.dev/de/style/monochrome-black-and-white

## Merkmale

- überhaupt kein Farbton: Schwarz, Weiß und eine kurze Graurampe
- Hierarchie entsteht nur aus Gewicht, Größe, Abstand und Helligkeitskontrast
- Fotografie in Schwarzweiß oder stark entsättigt
- dünne Haarlinien und dicke schwarze Balken als einzige Dekoration
- oft große Schrift und großzügiger Weißraum; manchmal dicht und zeitungsartig
- eine Ausnahme erlaubt: eine einzelne Hover- oder Fokusfarbe, oder keine
- invertierte Abschnitte (Weiß auf Schwarz) für Rhythmus

Palette: #ffffff Weiß, #000000 Schwarz, #1a1a1a Fast-Schwarz, #666666 Mittelgrau, #d9d9d9 Hellgrau, #f4f4f4 Off-White

Schrift: eine Familie in zwei oder drei Schnitten: Geist, Neue-Montreal-Ersatz "Space Grotesk", Archivo oder eine Serif wie Newsreader; Überschriften 500-700 bei 40-96px, Fließtext 400 bei 16-18px

## Do

- baue eine 5-stufige Graurampe und nutze sie so streng wie eine Farbpalette
- nutze invertierte Blöcke (schwarzer Abschnitt, weißer Text) für Rhythmus statt Farbe
- wenn du einen einzelnen Akzent erlaubst, nutze ihn einmal, für Fokusringe oder einen Link-Zustand

## Don't

- nutze keine "fast grauen" getönten Farben; entweder null Sättigung oder gar nichts
- füge keine Schatten hinzu, um Tiefe vorzutäuschen; nutze Helligkeitsstufen und Linien
- entsättige Fotos nicht per Filter und nenn es fertig; wähle Bilder, die in Schwarzweiß funktionieren

Bekannt dafür: Ssense, Balenciaga, Studio Dumbar (teilweise), Massimo-Vignelli-Referenzen, Craig Mod

## CSS-Seed

```css
:root{--bg:#ffffff; --fg:#000000; --muted:#666666; --line:#d9d9d9; --surface:#f4f4f4; --radius:0; --shadow:none; --font:'Archivo',sans-serif}
```

## Prompt

Baue die Seite streng monochrom. Nur #ffffff, #000000, #1a1a1a, #666666, #d9d9d9 und #f4f4f4; nirgends Sättigung, auch nicht in Bildern (Graustufen-Quellen, nach Möglichkeit keine Filter). Schrift Archivo: Überschriften 600 bei 80/44/28px mit -0.02em Tracking, Fließtext 400 bei 17px line-height 1.6, Labels 12px Versalien 0.1em in #666666. Layout auf einem 12-Spalten-Raster, 1px #d9d9d9 Linien zwischen Reihen, dicke 8px schwarze Balken als Abschnittsöffner. Abschnitte wechseln: Weiß mit schwarzem Text, dann Schwarz mit weißem Text (jede Farbe invertieren, auch Linien auf #333333). Buttons: solides Schwarz, weißer Text, Radius 0, 48px hoch; auf schwarzen Abschnitten invertiert. Links: 1px Unterstreichung, Hover macht sie 2px dick. Bilder randlos oder spaltenbündig, kein Radius, kein Rand. Keine Schatten, keine Verläufe, keine Icons außer Pfeilen. Motion: 150ms Farbtransitions und ein 500ms Bild-Fade beim Scrollen. Fokusring ist 2px solid Schwarz mit 2px Offset.