# E-ink / low-contrast calm

Also called: e-ink UI, calm technology design, low-contrast UI, paper display style, reader mode, Kindle style  
Era: 2007 (Kindle), design trend 2020 onward (calm tech, Readwise, Reader apps, Daylight computer)  
Page: https://designforai.dev/style/e-ink-low-contrast-calm

## 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

```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

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.