HN Debrief

Ask HN: In your experience, what are sound conventions for e-ink UI development?

  • Developer Tools
  • Design
  • Hardware
  • Programming

The post came from someone building browser-based frontends for a black-and-white e-ink phone and looking for hard-won design rules before shipping something miserable. The concrete problems were exactly the ones e-ink makes painful: streaming text that repaints constantly, ghosting during scrolling, and how to build a usable interface when color, gradients, and motion are mostly off the table.

If you are building for e-ink, start by removing assumptions baked into normal web UI kits: scrolling, animation, subtle contrast, color-coded actions, and live reflow. Favor pagination, explicit controls, large targets, and update patterns that only repaint at semantic boundaries such as submit, page turn, or gesture release.

Discussion mood

Strongly constructive and opinionated. People were enthusiastic about e-ink as a medium, but blunt that most modern UI habits are actively wrong for it, especially animation, scrolling, subtle contrast, and any design that causes frequent partial redraws or accidental taps.

Key insights

  1. 01

    Refresh only at semantic boundaries

    Refreshes work best when they line up with moments the user already understands as complete, like releasing a drag, sending a message, or turning a page. That reframes e-ink design from a rendering problem into an interaction design problem. You reduce frustration by designing actions that do not need continuous intermediate feedback in the first place, then using cheap temporary representations like outlines until commit.

    Map every expensive redraw to a user-visible completion event. If an interaction needs live feedback, use a low-fidelity preview mode during the gesture and do the clean repaint only after release.

      Attribution:
    • jeffnash #1
  2. 02

    Use degraded previews before final paint

    Cheap transient states can make slow hardware feel faster if they preserve orientation without trying to look finished. Outline drags, faint resize boxes, progressive map layers, first-letter placeholders, and other proxy renders let the user track what is happening while saving the full redraw for the settled state. The key is that the preview should never trigger expensive rework like layout churn or dense repainting.

    Add a second rendering path for interaction previews. Keep it sparse, high-contrast, and disposable so you can give feedback without paying the cost of a full visual update.

      Attribution:
    • jeffnash #1
    • ramses0 #1
  3. 03

    Black and white beats gray

    Pure black-to-white transitions are materially faster and cleaner than anything involving gray, not just aesthetically sharper. That makes grayscale a technical liability as well as a visual one. UI chrome, separators, and state indicators should stay mostly binary, with gray reserved sparingly because it increases ghosting risk and weakens legibility on already lower-contrast panels.

    Audit your palette, icons, and component library for gray-heavy styling. Default to black, white, borders, inversions, and line art for anything interactive or structural.

      Attribution:
    • dredmorbius #1
    • Groxx #1
    • blululu #1
  4. 04

    Web detection for e-ink is unreliable

    A builder shipping an e-ink mode in a PWA reported that these phones do not reliably expose the CSS monochrome media query. That means responsive styling alone may not be enough to detect and adapt for the medium. In practice you may need an explicit e-ink mode or user setting that swaps in different navigation and rendering behavior.

    Do not depend on browser media queries to trigger your e-ink experience. Provide a manual toggle or dedicated route so users can force the right behavior.

      Attribution:
    • samschooler #1
  5. 05

    Preserve reading position aggressively

    Several reading-focused ideas attacked the same pain point: after a page move, users lose their place. Adjustable page jumps with overlap, click-to-move a paragraph to the top, temporary markers before a scroll, and undoable navigation all help restore orientation. On e-ink this matters more because each move is slower and harder to correct, so the UI should make positional recovery cheap.

    Design pagination around continuity, not just page size. Add overlap, anchors, or reversible navigation so users can recover from both deliberate jumps and bad taps quickly.

      Attribution:
    • ianbicking #1
    • layer8 #1
    • seemack #1
    • philosopherNoob #1
  6. 06

    Mistouches are costlier than extra taps

    Touch ergonomics matter more on e-ink because a wrong tap often triggers a visible refresh and a second correction cycle. That raises the value of large targets, clear focus markers, and carefully chosen visible controls. It also complicates the advice to expose everything directly, because crowded screens can make touch accuracy worse than a simple extra step.

    Size targets and spacing for error recovery cost, not just aesthetics. Test whether one more deliberate tap is cheaper than the refresh penalty from accidental activation.

      Attribution:
    • Marsymars #1
    • iwjxjwjdjw #1
    • FabCH #1

Against the grain

  1. 01

    Some animation still has a job

    Blanket bans on motion miss a narrow but important use case. Slow screens still need to communicate that work is in progress, and progress bars or restrained feedback can do that without becoming decorative churn. The useful dividing line is not motion versus no motion. It is informative state change versus gratuitous transition.

    Keep the ban on ornamental animation, but do not remove all liveness cues. For operations that take long enough to feel broken, add minimal progress feedback that updates sparingly.

      Attribution:
    • Marsymars #1
    • Animats #1
    • tmgldn #1
  2. 02

    Old handheld UIs are only partial guides

    Palm and other pre-smartphone systems are useful for layout and menu discipline, but they are not a full template because their display technology behaved differently. Early LCDs had low resolution and poor contrast, yet they refreshed much faster and did not suffer the same ghosting. Borrow interaction structure from them, not assumptions about fluid movement.

    Use older software as inspiration for hierarchy and clarity, then re-test every borrowed pattern against e-ink refresh behavior. A design that worked on LCD may still fail once ghosting and slow repaint enter the loop.

      Attribution:
    • tracker1 #1
    • dredmorbius #1

In plain english

CSS
Cascading Style Sheets, the language used to control the presentation and layout of web pages.
e-ink
A reflective electronic paper display technology that holds an image without power and updates much more slowly than LCD or OLED screens.
ghosting
A visual artifact where traces of previous content remain faintly visible after the screen updates.
LLM
Large language model, a machine learning model trained to process and generate text.
Oberon
A minimalist operating system and programming environment known for unusual but efficient user interface ideas.
OLED
Organic Light-Emitting Diode, a display technology with bright, fast-refreshing self-lit pixels.
PWA
Progressive Web App, a website designed to behave more like an installable application on a device.
TUI
Text User Interface, a terminal-based interactive interface.

Reference links

Design principles and essays

Frameworks and codebases

  • TRMNL framework
    CSS framework built specifically for e-paper displays.
  • TRMNL firmware
    Open source firmware offered as a practical base for e-paper projects.
  • epaper-components
    Shared as a quick starting point for rendering React components on e-paper displays.
  • Cobalt
    Kobo e-ink app SDK whose builder found the design principles useful.
  • einkbro
    Named as a strong Android browser for e-ink and a source of practical design ideas.

Products and demos

  • Little Invite e-ink mode demo
    Example of a PWA with an e-ink mode and auto-pagination behavior.
  • inka.page
    A recent e-ink-focused project shared for source code and implementation ideas.
  • Modos Flow
    Pointed to as an example of what a clean-sheet e-ink hardware and software design might look like.

Historical references