Container
E-Ink rationale: Fixed max-widths prevent content from stretching across wide displays (like the 10.3" Kindle Scribe), reducing eye-tracking effort and partial-refresh regions.
The .eink-container centers content with horizontal padding.
Variants: --narrow (38rem), default (52rem),
--wide (72rem).
Stack
Vertical rhythm via flex-direction: column + gap.
Variants: --sm, default, --lg.
E-Ink rationale: Consistent vertical spacing prevents layout shifts during partial screen refreshes and provides clear visual separation between content blocks.
Cluster
Horizontal wrapping layout using flex-wrap. Items flow
left-to-right and wrap naturally.
E-Ink rationale: Wrapping layouts adapt to narrow E-Ink screens without requiring media queries. This reduces the amount of conditional layout logic.
Grid
Auto-fit responsive grid using minmax(). Set
--eink-grid-min to control the minimum column width.
E-Ink rationale: auto-fit with minmax() produces a
stable layout with no layout shifts on resize — important because E-Ink
devices occasionally rotate or change viewport size between
landscape/portrait.
Divider
Simple horizontal rules. Use .eink-divider--strong for heavier
separators.
E-Ink rationale: Thin rules are efficient to render and provide clear visual separation without large filled surfaces that cause ghosting.
Content above the default divider.
Content between dividers.
Content below the strong divider.
Page structure
Page header, section, and footer patterns. This very page demonstrates all three. The header is bordered at the bottom, sections separate with thin rules, and the footer is bordered at the top.
Section 1 content
Section 2 content (auto border-top between adjacent sections)