E-Ink / Paper

Also called: E-Paper UI, Paper-like UI, E-Reader Style

Matte grey-white paper, ink-black book serif, pixel-dithered greys and zero animation — an interface that reads like an e-reader page.

“Kindle page”Minimal & CleanEra: 2007 (first Kindle) → todayCalmSeriousNostalgicTrustworthy

Open full screen ↗

e-ink-paper / landingEN

e-ink-paper / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm3pxRadius md6pxRadius lg8pxRadius xl12pxDensity×1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

matte paper backgroundink-black serifdithered greysno animationgreyscale onlye-reader chromeinverted selectionbook typography

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

Not to be confused with

Minimalist Monochrome →Minimalist Monochrome is pure #FFF/#000 with a didone display and stark inverted blocks; E-Ink sits on warm grey paper with a reading serif, dithered mid-greys and device-like rounded buttons.Academia (Scholarly) →Academia uses ivory, burgundy/green accents and ornamental scholarly detail; E-Ink has no colour at all and borrows from e-reader screens, not libraries.Dark Mode (OLED) →OLED dark is true black with glowing accents; E-Ink is light, matte and glare-free, with greys made from dithering.

On mobile

Treat each screen as a page: 1.5px ink rules under the app bar and above the tab bar, bold labels for the active tab, a dithered “cover” on the featured card, no transitions at all and inverted (black) pressed states. It suits real e-paper devices with slow refresh.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinLiterata · 500/600/700

The quick brown fox

Heading · ThaiMaitree · 500/600

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinLiterata · 400/500/600

Clear words make shared decisions.

Body · ThaiMaitree · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

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.

Colour palette

Light

Dark

Design tokens

Radius	`sm 3px · md 6px · lg 8px · xl 12px · pill 999px`
Border	`1px`
Shadow	`none`
Display	`clamp(2.5rem, 5vw, 4.1rem)`
Motion	`0ms steps(1, end)`
Density	`×1`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · E-Ink / Paper (e-ink-paper) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: 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
 */
:root {
  --radius: 8px;
  --background: #EDEBE5;
  --foreground: #161616;
  --card: #F4F2ED;
  --card-foreground: #161616;
  --popover: #F4F2ED;
  --popover-foreground: #161616;
  --primary: #161616;
  --primary-foreground: #F4F2ED;
  --secondary: #3B3A38;
  --secondary-foreground: #F4F2ED;
  --muted: #E2DFD8;
  --muted-foreground: #4E4D4A;
  --accent: #E2DFD8;
  --accent-foreground: #161616;
  --destructive: #161616;
  --border: #8E8B84;
  --input: #8E8B84;
  --ring: #161616;
  --chart-1: #161616;
  --chart-2: #6A6865;
  --chart-3: #9C9993;
  --chart-4: #C4C1BA;
  --chart-5: #3B3A38;
  --sidebar: #F4F2ED;
  --sidebar-foreground: #161616;
  --sidebar-primary: #161616;
  --sidebar-primary-foreground: #F4F2ED;
  --sidebar-accent: #E2DFD8;
  --sidebar-accent-foreground: #161616;
  --sidebar-border: #8E8B84;
  --sidebar-ring: #161616;
}

.dark {
  --background: #1B1B1A;
  --foreground: #E9E7E1;
  --card: #232321;
  --card-foreground: #E9E7E1;
  --popover: #232321;
  --popover-foreground: #E9E7E1;
  --primary: #E9E7E1;
  --primary-foreground: #1B1B1A;
  --secondary: #C9C7C1;
  --secondary-foreground: #1B1B1A;
  --muted: #2C2C2A;
  --muted-foreground: #ABA9A3;
  --accent: #2C2C2A;
  --accent-foreground: #E9E7E1;
  --destructive: #E9E7E1;
  --border: #6C6A66;
  --input: #6C6A66;
  --ring: #E9E7E1;
  --chart-1: #E9E7E1;
  --chart-2: #A8A6A0;
  --chart-3: #78766F;
  --chart-4: #53524D;
  --chart-5: #C9C7C1;
  --sidebar: #232321;
  --sidebar-foreground: #E9E7E1;
  --sidebar-primary: #E9E7E1;
  --sidebar-primary-foreground: #1B1B1A;
  --sidebar-accent: #2C2C2A;
  --sidebar-accent-foreground: #E9E7E1;
  --sidebar-border: #6C6A66;
  --sidebar-ring: #E9E7E1;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · E-Ink / Paper (e-ink-paper) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: 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
 */
@theme {
  --color-bg: #EDEBE5;
  --color-surface: #F4F2ED;
  --color-surface-2: #E2DFD8;
  --color-text: #161616;
  --color-text-muted: #4E4D4A;
  --color-primary: #161616;
  --color-on-primary: #F4F2ED;
  --color-secondary: #3B3A38;
  --color-on-secondary: #F4F2ED;
  --color-accent: #161616;
  --color-border: #8E8B84;
  --color-success: #2B2B2B;
  --color-warning: #4A4A4A;
  --color-danger: #161616;
  --color-chart-1: #161616;
  --color-chart-2: #6A6865;
  --color-chart-3: #9C9993;
  --color-chart-4: #C4C1BA;
  --color-chart-5: #3B3A38;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;
  --shadow-sm: 0 0 #0000;
  --shadow-md: 0 0 #0000;
  --shadow-lg: 0 0 #0000;
  --font-heading: "Literata", "Maitree", system-ui, sans-serif;
  --font-body: "Literata", "Maitree", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Maitree", monospace;
}

.dark {
  --color-bg: #1B1B1A;
  --color-surface: #232321;
  --color-surface-2: #2C2C2A;
  --color-text: #E9E7E1;
  --color-text-muted: #ABA9A3;
  --color-primary: #E9E7E1;
  --color-on-primary: #1B1B1A;
  --color-secondary: #C9C7C1;
  --color-on-secondary: #1B1B1A;
  --color-accent: #E9E7E1;
  --color-border: #6C6A66;
  --color-success: #D6D4CE;
  --color-warning: #BDBBB5;
  --color-danger: #E9E7E1;
  --color-chart-1: #E9E7E1;
  --color-chart-2: #A8A6A0;
  --color-chart-3: #78766F;
  --color-chart-4: #53524D;
  --color-chart-5: #C9C7C1;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · E-Ink / Paper (e-ink-paper). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9294,
            0.9216,
            0.898
          ],
          "hex": "#edebe5"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.949,
            0.9294
          ],
          "hex": "#f4f2ed"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8863,
            0.8745,
            0.8471
          ],
          "hex": "#e2dfd8"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.0863,
            0.0863
          ],
          "hex": "#161616"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3059,
            0.302,
            0.2902
          ],
          "hex": "#4e4d4a"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.0863,
            0.0863
          ],
          "hex": "#161616"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.949,
            0.9294
          ],
          "hex": "#f4f2ed"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2314,
            0.2275,
            0.2196
          ],
          "hex": "#3b3a38"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.949,
            0.9294
          ],
          "hex": "#f4f2ed"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.0863,
            0.0863
          ],
          "hex": "#161616"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5569,
            0.5451,
            0.5176
          ],
          "hex": "#8e8b84"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.1686,
            0.1686
          ],
          "hex": "#2b2b2b"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.2902,
            0.2902
          ],
          "hex": "#4a4a4a"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.0863,
            0.0863
          ],
          "hex": "#161616"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.0863,
            0.0863
          ],
          "hex": "#161616"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4157,
            0.4078,
            0.3961
          ],
          "hex": "#6a6865"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6118,
            0.6,
            0.5765
          ],
          "hex": "#9c9993"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7686,
            0.7569,
            0.7294
          ],
          "hex": "#c4c1ba"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2314,
            0.2275,
            0.2196
          ],
          "hex": "#3b3a38"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1059,
            0.1059,
            0.102
          ],
          "hex": "#1b1b1a"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1373,
            0.1373,
            0.1294
          ],
          "hex": "#232321"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1725,
            0.1725,
            0.1647
          ],
          "hex": "#2c2c2a"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9137,
            0.9059,
            0.8824
          ],
          "hex": "#e9e7e1"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6706,
            0.6627,
            0.6392
          ],
          "hex": "#aba9a3"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9137,
            0.9059,
            0.8824
          ],
          "hex": "#e9e7e1"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1059,
            0.1059,
            0.102
          ],
          "hex": "#1b1b1a"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.7804,
            0.7569
          ],
          "hex": "#c9c7c1"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1059,
            0.1059,
            0.102
          ],
          "hex": "#1b1b1a"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9137,
            0.9059,
            0.8824
          ],
          "hex": "#e9e7e1"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4235,
            0.4157,
            0.4
          ],
          "hex": "#6c6a66"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8392,
            0.8314,
            0.8078
          ],
          "hex": "#d6d4ce"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7412,
            0.7333,
            0.7098
          ],
          "hex": "#bdbbb5"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9137,
            0.9059,
            0.8824
          ],
          "hex": "#e9e7e1"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9137,
            0.9059,
            0.8824
          ],
          "hex": "#e9e7e1"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6588,
            0.651,
            0.6275
          ],
          "hex": "#a8a6a0"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4706,
            0.4627,
            0.4353
          ],
          "hex": "#78766f"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3255,
            0.3216,
            0.302
          ],
          "hex": "#53524d"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.7804,
            0.7569
          ],
          "hex": "#c9c7c1"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 3,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {},
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Literata",
        "Maitree",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Literata",
        "Maitree",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Maitree",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 600
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 0,
      "unit": "ms"
    }
  },
  "density": {
    "$type": "number",
    "$value": 1
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 1
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!