⚠️ Design system CSS not found. Check the path in cms/docs.config.js → designSystemPath, then re-run npm run docgen.

Colour

The palette and how it is used

Brand Book / Colour
Download .md file
Open .md in new tab
On this page
  • Core palette
  • Gold scale
  • Neutral scale
  • Surfaces
  • Rules
  • Checking a pairing

BlackDoctor is black ink on warm paper with a single gold accent. Everything else is a step on one of two scales — a neutral scale from paper to black, and a gold scale from tint to ink — plus two soft highlighter surfaces. The values below are the brand's Figma variables; the web tokens that express them are on the Website colour page.

Core palette

Colour Hex Use
Black Ink: text, primary buttons, rules
Paper The page ground
Gold The accent: fills, selection, highlights, and text on black or the dark page
Warm grey Surfaces and graphics only — it is 2.65:1 on paper and never carries text

Print equivalents (CMYK, Pantone) come from the rebrand deliverables and are not derived from these hex values.

Gold scale

Gold is a scale, not one colour, because the brand gold cannot carry text on paper: measures 1.68:1 there, far below the 4.5:1 that WCAG AA asks of text. The 500 step is the gold; the 800 step is the gold that accented words, link underlines and hover states are set in on light surfaces.

Step Hex Role
50 Tint
100 Tint; warning surfaces
150 Tint
200
300
400
500 The brand gold — fills, selection, the accent on black
600
700 Large text and graphics only (3.15:1 on paper)
800 Accent ink — accented text, link underlines and hover states on light surfaces (5.70:1 on paper)
900 Warning ink
950

The steps other than 500 and 800 are provisional stand-ins that hold the gold's hue at a stepped lightness; the final values are being supplied.

Neutral scale

The neutrals are black laid over paper at increasing strength: step 150 is 5 % black, 500 is 40 %, 800 is 70 %. That is why they read as one family.

Step Hex Use
50 Panels that open over the page
100 Paper
150 Secondary surfaces
200
300
400 Decorative rules, placeholders
500
600 Control boundaries — the lightest grey that clears 3:1 on paper
700 Faded text (5.55:1 on paper)
800 Secondary text (8.10:1 on paper)
900
950 The dark-mode page
990 Ink

Surfaces

Surface Light Dark
Page
Secondary
Plain (cards, inputs on a tinted ground)
Panel (menus, dropdowns)
Accent
Highlighter —
Highlighter 2 —

Dark mode is paper inverted: white ink on , secondary text in , and the true gold as the accent, where it measures 9.35:1.

Rules

  • Gold never carries text on a light surface. Use the 800 step for accented words, link underlines and hover states; link text itself is black. On black or the dark page the true gold is the accent.
  • Warm grey is a surface colour. It sits under graphics and behind placeholders; it is not a text colour at any size.
  • Faded text is 60 % black, not lighter. Anything lighter fails AA on paper.
  • Highlighters carry black text. Both are grounds, never inks.
  • Selection is black on gold.

Checking a pairing

Every text-on-background pairing must clear WCAG 2.1 AA. Use the Colour Pairing tool to measure any two palette colours before a pairing ships.

On this page
  • Core palette
  • Gold scale
  • Neutral scale
  • Surfaces
  • Rules
  • Checking a pairing
Previous Logo
Next Typography

© 2026 BlackDoctor