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.
Design keywords
Say these words to ask for this style.
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.