eink-ui

Switch to Web Component demos View Storybook

Theme: default

Blog Pattern

This page demonstrates a blog layout using the sidebar, article, details/accordion, list group, and other components composed together.

Sidebar Layout

E-Ink rationale: The sidebar layout uses CSS flexbox wrapping. On narrow E-Ink screens, the sidebar stacks below the main content — no JavaScript breakpoint detection needed.

Building Interfaces for E-Ink: A Practical Guide

Designing for E-Ink displays requires a fundamental shift in thinking. The constraints of electrophoretic technology — slow refresh rates, monochrome rendering, and no backlight — become advantages when embraced rather than fought against.

The Core Principles

Every design decision should minimize screen repaints. This means avoiding animations, transitions, hover effects, and large filled areas. Instead, rely on borders, whitespace, and typography to create visual hierarchy.

Design for the constraint, not against it. E-Ink's limitations are also its strengths: zero eye strain, week-long battery, and readable in direct sunlight.

Typography First

On E-Ink, typography does the heavy lifting. Use a system font stack to avoid network requests and ensure instant rendering. Set comfortable line heights (1.5 or greater) and constrain line length to 45–75 characters for optimal readability.

Font weight variations (normal, medium, bold) provide clear hierarchy without requiring color differences — essential on a grayscale display.

Interaction Patterns

Touch targets should be generous (at least 44px). Focus states must use outlines rather than background color changes to reduce repaint area. Form validation should be inline and persistent, not ephemeral tooltips that require rapid screen updates.

List Group

E-Ink rationale: List groups use thin borders between items. The active item gets a thick left border for identification without background fill.

Default

  • First item
  • Active item
  • Third item
  • Fourth item

As links

Flush (no outer border)

  • First item
  • Second item
  • Third item

Details / Accordion

E-Ink rationale: Uses the native <details> element for no-JavaScript expand/collapse. The +/− indicator is rendered with CSS content — no icon fonts or SVGs.

Single

What is E-Ink?

E-Ink (electrophoretic ink) is a display technology that mimics the appearance of ordinary ink on paper. It reflects ambient light like paper does, making it comfortable for prolonged reading.

Accordion group

Getting Started

Include the CSS file in your HTML and start using the component classes. No build step or JavaScript required.

Browser Support

The library targets modern browsers found on E-Ink devices: Chromium-based WebView, Firefox, and WebKit. All features use progressive enhancement.

Theming

Three themes are included: default (light), inverted (dark), and high-contrast. Set the data-theme attribute on your <html> element.

Customization

Override any CSS variable in the token layer to customize colors, spacing, and typography. The zero-specificity selectors (:where()) make overrides straightforward.

Alert / Banner

E-Ink rationale: Alerts differentiate severity through border weight and style rather than color. On grayscale displays, a dashed border (warning) reads differently from a thick solid border (error).

Information
This blog post was last updated 3 days ago.
Success
Your comment has been published.
Warning
This article contains outdated information. Check the updated version.
Error
Failed to load comments. Please refresh the page.

Blog Pagination