5 colours · light

Drafting blueprint

Engineer's working drawing — graph paper, ink, red rev marks, sky-blue dimension lines.

From the drafting design. The base is warm graph paper with a faint 6-mm grid; ink is near-black with a slight cool tilt; the red is reserved strictly for revisions and dimension callouts; the sky blue is for construction lines and section cuts. A working-engineer palette, not a pretty one.

udaysinh

Swatches · click any hex to copy

bgGraph paper

inkHard pencil

accentRev red

highlightSection blue

mute

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.84 : 1	AAA
bg↔accent	Sample text	3.92 : 1	AA Large
bg↔mute	Sample text	3.07 : 1	AA Large

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

Exports · copy-paste ready

CSS variables

:root {
  --bg: #F1EDE4;
  --ink: #0F1419;
  --accent: #C5512E;
  --highlight: #78AAC8;
  --mute: #8A8780;
}

Tailwind config

// tailwind.config
theme: {
  extend: {
    colors: {
      "bg": "#F1EDE4",
      "ink": "#0F1419",
      "accent": "#C5512E",
      "highlight": "#78AAC8",
      "mute": "#8A8780",
    },
  },
},

Hex array

["#F1EDE4", "#0F1419", "#C5512E", "#78AAC8", "#8A8780"]

Links

· From the drafting design ↗