4 colours · either

E-paper warm grey

Warm grey-white background and a deep warm-black ink. No accent, by rule.

The constraint that runs the eink design — actual e-paper can't render saturated colour, so the palette has none. The background is warm grey, not paper-white, because reflective displays read warmer. The 'ink' is deep warm-black, not pure black, because pure black on warm grey looks like a printing error rather than reading material.

udaysinh

Swatches · click any hex to copy

bgWarm grey-white

inkWarm black

ink-2Mid warm

muteLight warm

In use · the palette applied to three mocks

Chapter 01

A confident heading set in the ink.

Body text runs in the ink-2 role at a comfortable measure. Accent earns its keep on links and nowhere else.

Aside · in the mute

Card

Sample card with a strong call to action.

Short supporting text that explains what the action does.

PrimarySecondary →

~/notes.md

function greet(name) {
  // the lab said hi
  return `hello, ${name}`;
}

Contrast · WCAG 2 ratios for key role pairs

Pair	Sample	Ratio	Rating
bg↔ink	Sample text	13.98 : 1	AAA
bg↔ink-2	Sample text	5.83 : 1	AA
bg↔mute	Sample text	1.74 : 1	fail

AAA ≥ 7 · AA ≥ 4.5 · AA Large ≥ 3 · fail < 3

Exports · copy-paste ready

CSS variables

:root {
  --bg: #E8E4DC;
  --ink: #1A1814;
  --ink-2: #5A554D;
  --mute: #B5AE9F;
}

Tailwind config

// tailwind.config
theme: {
  extend: {
    colors: {
      "bg": "#E8E4DC",
      "ink": "#1A1814",
      "ink-2": "#5A554D",
      "mute": "#B5AE9F",
    },
  },
},

Hex array

["#E8E4DC", "#1A1814", "#5A554D", "#B5AE9F"]

Links

· From the eink design ↗