# E-Ink / Paper > Matte grey-white paper, ink-black book serif, pixel-dithered greys and zero animation — an interface that reads like an e-reader page. - Nickname: Kindle page - Also called: E-Paper UI, Paper-like UI, E-Reader Style - Category: Minimal & Clean - Moods: Calm, Serious, Nostalgic, Trustworthy - Industries: Media & Entertainment, Education, Fitness & Wellness, Government & Nonprofit - Style page: https://uilingo.dev/styles/e-ink-paper/ 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 ## Audit Passed after 1 round · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "E-Ink / Paper" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line 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: matte paper background, ink-black serif, dithered greys, no animation, greyscale only, e-reader chrome, inverted selection, book typography. ## Visual language An interface that looks like an e-reader page: a matte, slightly warm grey-white ground (#EDEBE5) with no glare, ink-black (#161616) text in a sturdy book serif, and absolutely no colour. Mid-tones are made from visible 1-pixel checkerboard dithering rather than smooth greys or gradients, illustrations look like halftoned plates, and every control is a crisp ink-outlined rounded rectangle like device firmware UI. Nothing animates: hover, press and selection simply invert to black. Calm, glare-free, built for long reading. ## Signature details (must be visible) - Paper background #EDEBE5, surfaces #F4F2ED, ink #161616 — strictly greyscale, including success/warning/danger - Dithered tones via 1px patterns: repeating-conic-gradient(#161616 0 25%, transparent 0 50%) at 2px 2px for 50%, conic-gradient(#161616 0 25%, transparent 0) at 2px 2px for 25% - All transitions and animations 0ms; states invert (black fill, paper text) instantly - 1.5px ink outlines on buttons, inputs, chips, lists and toolbars; 6px button radius, 8px card radius; no shadows - Book serif everywhere (Literata / Maitree), body 17px at 1.65 line-height (Thai 1.85), small-caps eyebrows and labels - Device chrome cues: toolbar with 1.5px bottom rule, page number footer ‘— 1 / 248 —’, an e-reader bezel (#2E2D2B, 26px radius) around the hero product shot - Illustrations as dithered landscape plates with 1.5px ink outlines instead of photos ## Design tokens — use these exact values Colours (light mode): - background #EDEBE5 - surface #F4F2ED - surface-2 #E2DFD8 - text #161616 - text-muted #4E4D4A - primary #161616 (text on it #F4F2ED) - secondary #3B3A38 (text on it #F4F2ED) - accent #161616 - border #8E8B84 - success #2B2B2B · warning #4A4A4A · danger #161616 - chart series #161616, #6A6865, #9C9993, #C4C1BA, #3B3A38 Radius: sm 3px, md 6px, lg 8px, xl 12px, pill 999px Border width: 1px Shadows: sm `none`, md `none`, lg `none` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1 density Motion: 0ms steps(1, end) ## Typography (Latin + Thai) - Headings: Literata 500/600/700 with Thai fallback Maitree 500/600 - Body: Literata 400/500/600 with Thai fallback Maitree 400/500/600 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Maitree:wght@400;500;600&display=swap - CSS stacks: heading `"Literata", "Maitree", system-ui, sans-serif`; body `"Literata", "Maitree", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.5rem, 5vw, 4.1rem), heading weight 600, heading tracking -0.01em (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Literata was drawn for e-book reading; Maitree is a sturdy looped Thai book serif with similar moderate contrast and slab-ish terminals, so long Thai passages feel like the same printed page. ## Components - Primary button: ink fill, paper text, 1.5px ink border, 6px radius; hover inverts to paper fill with ink text; no lift - Secondary button: paper fill with ink outline; hover inverts to ink; disabled uses a dotted border and muted text instead of opacity - Input: paper surface, 1.5px ink border, 6px radius, italic placeholder (Latin only); focus adds a 2px ink ring; error uses a 2px dashed border - Cards: #F4F2ED surface, 1px #8E8B84 outline, 8px radius; hover just adds an ink outline; highlighted plan is fully inverted (ink card, paper text) - Nav / topbar: paper toolbar with a 1.5px ink bottom rule; current item is an inverted ink tab - Badges: 3px radius, 1px ink outline on paper; danger = inverted ink, warning = dashed outline, neutral = dotted - Charts: ink line 2px with square caps, comparison line dotted grey, bars alternating solid ink / 50% dither / 25% dither with ink outlines - Tab bar: paper with a 1.5px ink top rule; active tab bold with a 3px ink bar on top - Featured card (mobile): outlined paper card with a dithered ‘book cover’ thumbnail on the left and a bordered reading-progress bar - Steps: labelled ‘Chapter 1, 2, 3’ in small caps above a 1.5px rule ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → features → steps → testimonials → pricing → faq → cta. Feature section as grid. Compose pages like a book or newspaper edition: split hero with the product shown inside an e-reader bezel, centred section heads followed by a ‘* * *’ dinkus, outlined paper cards in a regular grid, chapter-numbered steps, inverted highlighted pricing card and a CTA box topped with a dithered band. Articles use justified Latin text with a drop cap, centred ‘§’ sub-headings and a dithered illustration plate. Dashboards use a top toolbar, outlined widgets, dotted table rules and greyscale/dithered charts. ## Content Use realistic product copy (fictional brand) suited to: Reading, news and long-form publishing apps. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Any hue — even a single accent colour breaks the e-paper illusion - Smooth gradients, blur, glass or drop shadows (use dithering for tone) - Animated transitions, skeleton shimmer or parallax - Pure #FFFFFF backgrounds and stark #000 — that reads as Minimalist Monochrome - Dithered patterns behind body text, which kills legibility - Ornamental scholarly decoration (crests, burgundy) that turns it into Academia ## Stack notes One self-contained HTML file with a