6 colours · light

Editorial olive

Warm paper, soft black, one olive accent that earns its keep by appearing twice.

The palette behind the editorial design — proof that you don't need more than five colours to set running text confidently. The accent (olive) is used only on the kicker and one hover underline. Everything else is paper, ink, and the rule line.

udaysinh

Swatches · click any hex to copy

bgPaper

inkSoft black

ink-bodyBody

accentOlive

mute

rule

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	15.29 : 1	AAA
bg↔accent	Sample text	5.09 : 1	AA
bg↔ink-body	Sample text	9.80 : 1	AAA
bg↔mute	Sample text	4.12 : 1	AA Large

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

Exports · copy-paste ready

CSS variables

:root {
  --bg: #F3F0E9;
  --ink: #1A1A1A;
  --ink-body: #3E3B36;
  --accent: #5C6B3E;
  --mute: #76746B;
  --rule: #D8D2C5;
}

Tailwind config

// tailwind.config
theme: {
  extend: {
    colors: {
      "bg": "#F3F0E9",
      "ink": "#1A1A1A",
      "ink-body": "#3E3B36",
      "accent": "#5C6B3E",
      "mute": "#76746B",
      "rule": "#D8D2C5",
    },
  },
},

Hex array

["#F3F0E9", "#1A1A1A", "#3E3B36", "#5C6B3E", "#76746B", "#D8D2C5"]

Links

· From the editorial design ↗