# E-Ink / kontrastarm ruhig

Auch bekannt als: E-Ink-UI, Calm-Technology-Design, kontrastarmes UI, Papierdisplay-Stil, Lesemodus, Kindle-Stil  
Ära: 2007 (Kindle), Designtrend ab 2020 (Calm Tech, Readwise, Reader-Apps, Daylight Computer)  
Seite: https://designforai.dev/de/style/e-ink-low-contrast-calm

## Merkmale

- Grautöne auf warmem Grau, wie ein E-Paper-Display: kein reines Weiß, kein reines Schwarz
- Kontrast moderat gehalten (5-7:1), nie hart; keine gesättigte Farbe außer einem dunklen Akzent
- Lesetypografie: Serif-Fließtext bei 18-20px, lange Zeilen, großzügiger Durchschuss
- keine Schatten, keine Verläufe, minimale Ränder in einem etwas dunkleren Grau
- Bedienelemente sind einfache umrandete Formen; Zustände durch Füllungsinversion gezeigt
- bewusst langsame oder keine Animation, die den E-Ink-Refresh nachahmt (sofortige Wechsel oder 0ms)
- Dithering oder dezentes Halbton auf Bildern, um das Display nachzuahmen

Palette: #dedcd6 Papiergrau, #2f2f2d Tinte, #7a7975 gedämpft, #b9b7b1 Linie, #c9c7c0 Fläche, #4a5d4f ein dunkler grüner Akzent

Schrift: Literata, Bookerly-Ersatz "Source Serif 4", Newsreader oder Charter (frei) für Fließtext bei 19px line-height 1.7; Karla oder Public Sans bei 14px für UI; Überschriften 500 bei 28-36px

## Do

- halte die Palette bei 6 Grautönen plus einem dunklen Akzent und prüfe, dass jedes Paar zwischen 5:1 und 8:1 Kontrast liegt
- mach Transitions 0ms (sofortiger Wechsel) oder einen einzelnen 200ms Fade; keine Easing-Kurven, keine Bewegung
- wandle Bilder in Graustufen um und lege ein Dithering oder 2px Halbton darüber, damit sie zur Oberfläche gehören

## Don't

- nutze kein Weiß oder Schwarz; der Display-Look hängt vom mittelgrauen Papier ab
- füge keine Hover-Effekte über eine Unterstreichung hinaus hinzu; E-Ink hat kein Hover
- nutze keine Farbe für Zustände; nutze Inversion (dunkle Füllung, heller Text)

Bekannt dafür: Kindle, Kobo, reMarkable, Readwise Reader (teilweise), Daylight-DC-1-Marketing

## CSS-Seed

```css
:root{--bg:#dedcd6; --fg:#2f2f2d; --muted:#7a7975; --line:#b9b7b1; --surface:#c9c7c0; --accent:#4a5d4f; --radius:2px; --font:'Literata',serif; --font-ui:'Public Sans',sans-serif}
```

## Prompt

Baue die Seite im E-Ink-kontrastarm-ruhigen Stil. Hintergrund #dedcd6, Text #2f2f2d, gedämpft #7a7975, Linien #b9b7b1, erhabene Fläche #c9c7c0, ein dunkler Akzent #4a5d4f für Links. Kein Weiß, kein Schwarz, keine gesättigte Farbe, keine Verläufe, keine Schatten. Schriften: Literata 400 bei 19px, line-height 1.7, max-width 68ch für Fließtext; Literata 500 bei 34/26px für Überschriften; Public Sans 400 bei 14px für Nav und Bedienelemente. Layout: eine zentrierte Spalte, 32px Padding, 72px zwischen Abschnitten, 1px #b9b7b1 Linien. Buttons: 1px #2f2f2d Outline, transparent, Radius 2px, 40px hoch; aktiver oder ausgewählter Zustand invertiert zu #2f2f2d Füllung mit #dedcd6 Text; kein Hover-Effekt außer einer 1px Unterstreichung auf Links. Eingabefelder: dieselbe Outline, kein Fokus-Glow, Fokus durch eine 2px Outline gezeigt. Bilder in Graustufen mit Ordered-Dither-Look (CSS filter grayscale(1) contrast(1.1) plus ein 2px Halbtonmuster-Overlay bei 30 %). Transitions: 0ms Wechsel; die einzige Animation ist ein 200ms Fade beim Laden. Icons 1px Strich, 20px.