Design for AI

E-ink / low-contrast calm: UI design prompt

Palette, type rules and a pasteable prompt for e-ink / low-contrast calm. Also called e-ink UI, calm technology design, low-contrast UI, paper display style, reader mode, Kindle style. 2007 (Kindle), design trend 2020 onward (calm tech, Readwise, Reader apps, Daylight computer).

Traits

  • greys on warm grey, like an e-paper display: no pure white, no pure black
  • contrast kept moderate (5-7:1), never harsh; no saturated colour except one dim accent
  • reading typography: serif body at 18-20px, long measure, generous leading
  • no shadows, no gradients, minimal borders in a slightly darker grey
  • controls are simple outlined shapes; states shown by fill inversion
  • deliberately slow or no animation, mimicking e-ink refresh (instant swaps or 0ms)
  • dithering or subtle halftone on images to mimic the display

Palette

#dedcd6 paper grey, #2f2f2d ink, #7a7975 muted, #b9b7b1 line, #c9c7c0 surface, #4a5d4f one dim green accent

Type

Literata, Bookerly-alike "Source Serif 4", Newsreader or Charter (free) for body at 19px line-height 1.7; Karla or Public Sans at 14px for UI; headings 500 at 28-36px

Do

  • keep the palette to 6 greys plus one dim accent and check every pair sits between 5:1 and 8:1 contrast
  • make transitions 0ms (instant swap) or a single 200ms fade; no easing curves, no movement
  • convert images to greyscale and apply a dither or 2px halftone so they belong to the surface

Don't

  • do not use white or black; the display look depends on the mid-grey paper
  • do not add hover effects beyond an underline; e-ink has no hover
  • do not use colour for state; use inversion (dark fill, light text)

Known for it: Kindle, Kobo, reMarkable, Readwise Reader (partial), 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

Build the site in e-ink low-contrast calm style. Background #dedcd6, text #2f2f2d, muted #7a7975, lines #b9b7b1, raised surface #c9c7c0, one dim accent #4a5d4f for links. No white, no black, no saturated colour, no gradients, no shadows. Fonts: Literata 400 at 19px, line-height 1.7, max-width 68ch for body; Literata 500 at 34/26px for headings; Public Sans 400 at 14px for nav and controls. Layout: single centred column, 32px padding, 72px between sections, 1px #b9b7b1 rules. Buttons: 1px #2f2f2d outline, transparent, radius 2px, 40px tall; active or selected state inverts to #2f2f2d fill with #dedcd6 text; no hover effect except a 1px underline on links. Inputs: same outline, no focus glow, focus shown by a 2px outline. Images greyscale with an ordered-dither look (CSS filter grayscale(1) contrast(1.1) plus a 2px halftone pattern overlay at 30%). Transitions: 0ms swaps; the only animation is a 200ms fade on load. Icons 1px stroke, 20px.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in e-ink low-contrast calm style. Background #dedcd6, text #2f2f2d, muted #7a7975, lines #b9b7b1, raised surface #c9c7c0, one dim accent #4a5d4f for links. No white, no black, no saturated colour, no gradients, no shadows. Fonts: Literata 400 at 19px, line-height 1.7, max-width 68ch for body; Literata 500 at 34/26px for headings; Public Sans 400 at 14px for nav and controls. Layout: single centred column, 32px padding, 72px between sections, 1px #b9b7b1 rules. Buttons: 1px #2f2f2d outline, transparent, radius 2px, 40px tall; active or selected state inverts to #2f2f2d fill with #dedcd6 text; no hover effect except a 1px underline on links. Inputs: same outline, no focus glow, focus shown by a 2px outline. Images greyscale with an ordered-dither look (CSS filter grayscale(1) contrast(1.1) plus a 2px halftone pattern overlay at 30%). Transitions: 0ms swaps; the only animation is a 200ms fade on load. Icons 1px stroke, 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 }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.