E-Ink

E-Ink — Style Reference

Warm paper carries clear ink; grayscale and halftone appear only where they help organize information.

Theme: light

E-Ink treats a reading view, list or small data panel like a restrained printed page: warm paper beneath ink, with a few neutral grays for grouping, annotation and charts. The characteristic details are aligned numeric columns, short labels, fine rules and a deliberate reading order. Local halftone may mark a selected region or chart fill; body text stays solid and high-contrast. Status uses words and shapes together. Responsive layout, keyboard focus and reduced-motion preferences are stated explicitly. This is a web UI visual reference, not a hardware simulation or a claim that any screen refresh rate or bit depth has been tested.

Reference

Reference URL: <https://trmnl.com/framework/docs/3.4/open_source>

Colors

Typography

Public Sans — Use the existing UI sans-serif stack. Keep body copy at regular weight, headings at 700 or below, and avoid introducing a proprietary display font.

• Substitute: Inter, system-ui, sans-serif
• Weights: 400, 500, 600, 700
• Sizes: 12, 13, 16, 20, 28, 36
• Line height: 1.2 (display), 1.3 (headings), 1.55 (body)
• Letter spacing: -0.02em on display, 0.06em on uppercase labels

System Mono — Reserve it for dates, times, values, units and short states where alignment matters.

• Substitute: ui-monospace, SFMono-Regular, Consolas, monospace
• Weights: 400, 600
• Sizes: 11, 12, 14, 16, 24
• Line height: 1.2 (display), 1.35 (headings), 1.45 (body)
• Letter spacing: 0 on display, 0.04em on uppercase labels

Type Scale

Spacing & Layout

Base unit: 4px Density: comfortable

Spacing Scale

Border Radius

• Page max-width: 1120px
• Section gap: 40px
• Card padding: 20px
• Element gap: 8px

Components

Ink Action

Role: The screen's primary action

Ink fill on paper, square corners and 12–16px padding. Set the label at 14px/600; keyboard focus uses a 2px ink outline offset by 2px. Do not make an icon the sole cue.

• Sizes: min-height 44px; horizontal padding 12–24px
• States: default: ink on paper; hover: panel gray; active: pressed gray; disabled: 60% opacity plus disabled semantics; focus-visible: 2px ink outline

Reading Row

Role: A reading list row or summary item

Separate rows with one 1px rule; set indexes and numeric values in mono. Wrap supporting copy instead of shrinking below 12px. A selected row carries both a word label and an ink rule on the left.

• States: default: paper surface; selected: reading gray, ink rule and label; offline: explicit text plus a hollow marker

Paper Field

Role: Search, filter and short-form input

Warm-paper fill, a 1px neutral rule and a 44px minimum height. Keep placeholder contrast readable, provide a visible label and show a 2px keyboard focus outline.

• States: default: paper fill; focus-visible: 2px ink outline; disabled: explicit disabled semantics and 60% opacity

Halftone Mark

Role: A decorative background or grayscale chart fill

Limit the halftone to decorative blocks or chart fills, with dots at least 5px apart. Keep text and controls solid so the pattern cannot break letter edges. Retain labels and a legend whenever shades encode different values.

Status Marker

Role: Progress, connectivity and alerts

Pair a grayscale mark with a filled or hollow shape and an adjacent word such as “Done” or “Offline”. A dot is never the only status carrier; errors and warnings do not invent a new hue.

Do's and Don'ts

Do

• Name the screen's job before choosing the fewest useful rows and panels.
• Align numeric columns, dates and their explicit units.
• Give each state a shape or word instead of relying on color.
• Group with fine rules and local halftone; keep texture off body copy.
• Keep interactive targets at least 44px tall with visible keyboard focus.
• Collapse columns in reading order on narrow screens while preserving readable type.
• Label sample values, placeholders and device claims with their source or example status.

Don't

• Do not present screenshots, sample readings or demo content as live hardware data.
• Do not place essential text in halftone, texture or low-contrast gray.
• Do not encode error, warning, offline or selected state through shade alone.
• Avoid glow, glass blur, continuous flicker and broad gradients.
• Do not assume 1-bit quantization, pixel-perfect text or display refresh has been implemented.
• Do not add pixel fonts, icons or device branding without verified licenses.

Surfaces

Elevation

• Flat: none; use a single divider or offset hatch.
• Selected: none; use a 2px ink outline and a text marker.

Imagery

Prefer whitespace, readable tables and a few line drawings. Limit halftone to local chart fills. Do not copy TRMNL marks, third-party fonts, device shells or promotional images. Ask the agent to verify image rights and retain source attribution when actual imagery is needed.

Layout

Cap regular desktop content at 1120px. Use an 800×480 preview ratio only as an example canvas for e-paper screens, then collapse to one readable column on narrow screens. Prefer aligned one- or two-column grids and mono values; give dense tables an explicit small-screen collapse or scroll strategy instead of squeezing copy.

Agent Prompt Guide

Implementation Contract

• Use the requested page, user task and real content as the brief. Implement only the requested scope; identify missing business information instead of inventing data or capabilities.
• Inspect the current project, stack and components first. Reuse its structure, routes, dependencies and components; do not rebuild unrelated pages or features.
• Use the project's breakpoints to adapt columns and spacing for narrow and desktop screens. Preserve hierarchy and prevent accidental horizontal overflow.
• For interactions in scope, support keyboard focus and reduced motion, with applicable disabled, loading, empty and error states.
• Run the project's existing checks after implementation. Report only tests and visual checks actually run, and list unverified behavior.

QUICK COLOR REFERENCE:

• ink: #20211e
• paper: #f5f3ea
• graphite: #555750
• rule: #bab9b0
• readingSurface: #e6e4da

EXAMPLE COMPONENT PROMPTS:

1. Read the repository's existing components and design.md first, then include only the rows this screen needs. Use warm paper #f5f3ea, ink #20211e and the documented grayscale values; add no dependency or fictitious sensor data, and label any fixture SAMPLE. Use an 800×480 panel only as an art-direction reference while keeping the web page multi-column on desktop and single-column on phones. Align values, units and dates. Limit halftone to chart fills. Give offline, warning and selection states both a word or geometric mark. Keep targets at least 44px, add keyboard focus and honor prefers-reduced-motion. Do not claim e-paper hardware, 1-bit thresholds or refresh support without connecting and testing a real device.
2. For a sample device-status view, use fixture HTML instead of calling a live hardware API and add an explicit “SAMPLE DATA” label. Each row carries a name, value, unit, state and timestamp; thin rules group the entries; no meter relies on color or halftone alone. Check a 390px viewport, keyboard order and reduced-motion preferences, and reuse the repository's existing components.

Similar Brands

• Monochrome (monochrome) — Both avoid hue. E-Ink adds device status, aligned data and a reading-oriented density.
• Data Dense (data-dense) — Both handle dense information. E-Ink uses fewer fields, paper grouping and non-color state cues.
• Blueprint (blueprint) — Both annotate technical content. Blueprint drafts on blue; E-Ink reads on paper.

Device boundary

This specification describes web art direction. It does not include the TRMNL runtime, e-paper control instructions, tone-quantization algorithms or vendor fonts. A real-screen preview must connect a target device, name its model and color depth, and separately inspect text edges, pagination and refresh behavior.

Data provenance

If preview values do not come from a connected device, label them as examples; do not invent temperatures, online state or update times and imply they are being collected.

Quick Start

:root {
  /* Colors */
  --e-ink-text: #20211e;
  --e-ink-paper: #f5f3ea;
  --e-ink-muted: #555750;
  --e-ink-rule: #bab9b0;
  --e-ink-panel: #e6e4da;

  /* Typography — Font Families */
  --font-sans: 'Public Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'System Mono', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-display: 36px;
  --leading-display: 1.2;
  --tracking-display: -0.02em;
  --text-heading: 28px;
  --leading-heading: 1.3;
  --tracking-heading: -0.01em;
  --text-subheading: 20px;
  --leading-subheading: 1.35;
  --text-body: 16px;
  --leading-body: 1.55;
  --text-body-compact: 13px;
  --leading-body-compact: 1.5;
  --text-data: 16px;
  --leading-data: 1.35;
  --tracking-data: 0;
  --text-label: 12px;
  --leading-label: 1.4;
  --tracking-label: 0.06em;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;

  /* Layout */
  --page-max-width: 1120px;
  --section-gap: 40px;
  --card-padding: 20px;
  --element-gap: 8px;
  --density: comfortable;

  /* Border Radius */
  --radius-cards: 0;
  --radius-buttons: 0;
  --radius-inputs: 0;
  --radius-badges: 0;

  /* Surfaces */
  --surface-warm-paper: #f5f3ea;
  --surface-reading-surface: #e6e4da;
  --surface-pressed-area: #bab9b0;
}