Design for AI

Stil E-Ink / kontrastarm ruhig: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für e-ink / kontrastarm ruhig. Auch bekannt als E-Ink-UI, Calm-Technology-Design, kontrastarmes UI, Papierdisplay-Stil, Lesemodus, Kindle-Stil. 2007 (Kindle), Designtrend ab 2020 (Calm Tech, Readwise, Reader-Apps, Daylight Computer).

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
: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.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
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.

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

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