E-Ink / Paper

Also called: E-Paper UI, Paper-like UI, E-Reader Style

Matte grey-white paper, ink-black book serif, pixel-dithered greys and zero animation — an interface that reads like an e-reader page.

“Kindle page”Minimal & CleanEra: 2007 (first Kindle) → todayCalmSeriousNostalgicTrustworthy
Prompt builder
Open full screen ↗
e-ink-paper / landingEN
e-ink-paper / landingTH

Design keywords

Say these words to ask for this style.

matte paper backgroundink-black serifdithered greysno animationgreyscale onlye-reader chromeinverted selectionbook typography

E-Ink / Paper imitates electrophoretic screens: a warm, matte grey-white ground with no glare, text in a sturdy reading serif, and only greys — never colour. Tones are made with visible 1-pixel checkerboard dithering instead of gradients, illustrations look like halftoned book plates, and states change instantly (no transitions, hover simply inverts). Rounded-rectangle buttons with crisp ink outlines, generous line-height and page-number footers make it calm, low-stimulus and very readable for long sessions.

Best for

  • Reading, news and long-form publishing apps
  • Note-taking, journaling and focus / digital-wellbeing tools
  • Low-power or e-paper device companion apps
  • Library, study and documentation sites

Avoid for

  • Brands that rely on colour photography or a colour identity
  • Games, video and motion-led marketing
  • Dashboards where status colour (red/green) is critical

✓ Do

  • Stay strictly greyscale: ink #161616 on paper #EDEBE5, greys made from 1px dithering
  • Set body text 17–18px in a book serif with 1.65 line-height (Thai 1.85+)
  • Change state instantly: invert to black on hover/selected, transitions 0ms
  • Use 1–1.5px ink outlines and 4–8px radii, like device UI

✕ Don't

  • No colour accents, gradients, glows or drop shadows
  • No animated transitions, parallax or skeleton shimmer
  • Don’t use pure #FFFFFF — the paper must look matte and slightly grey
  • Don’t dither behind body text; keep patterns for art, bars and empty areas

Not to be confused with

On mobile

Treat each screen as a page: 1.5px ink rules under the app bar and above the tab bar, bold labels for the active tab, a dithered “cover” on the featured card, no transitions at all and inverted (black) pressed states. It suits real e-paper devices with slow refresh.

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

✓ Audited by agent review (1×)
Copied!