thisdesign.space

5 colours · dark

Phosphor amber

Near-black ground with amber phosphor everywhere — one terminal, one century ago.

The CRT amber terminal palette. The ground isn't pure black — pure black on a CRT reads as off, not as dark — but very-dark warm. The amber sits at the brightness of an actual phosphor monitor warming up. A brighter amber is reserved for highlights and active status; a green is kept for one specific UI element (the cursor's friend, the running process).

Swatches · click any hex to copy

bgPhosphor black
inkAmber
highlightBright amber
accentPhosphor green
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

PairSampleRatioRating
bginkSample text9.04 : 1AAA
bgaccentSample text10.81 : 1AAA
bgmuteSample text2.44 : 1fail

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

Exports · copy-paste ready

CSS variables

:root {
  --bg: #0A0805;
  --ink: #E8A028;
  --highlight: #FFC560;
  --accent: #5CD679;
  --mute: #6B4818;
}

Tailwind config

// tailwind.config
theme: {
  extend: {
    colors: {
      "bg": "#0A0805",
      "ink": "#E8A028",
      "highlight": "#FFC560",
      "accent": "#5CD679",
      "mute": "#6B4818",
    },
  },
},

Hex array

["#0A0805", "#E8A028", "#FFC560", "#5CD679", "#6B4818"]

Links