thisdesign.space

5 colours · light

Windows 98 desktop

Teal desktop · silver chrome · navy title bars · the only colour 1998 trusted.

The OG. Teal desktop ground (the famous default that nobody actually kept), silver button chrome for chiselled UI, navy for active title bars, and a green for the XP-era Start button. Use for retro-OS pastiche, system-tray jokes, anything that wants to feel like it was screenshotted on a CRT.

byudaysinhudaysinh

Swatches · click any hex to copy

bgTeal desktop
inkSilver chrome
accentNavy title
highlightStart green
muteStart green dark

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
bg↔inkSample text2.62 : 1fail
bg↔accentSample text3.35 : 1AA Large
bg↔muteSample text1.00 : 1fail

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

Exports · copy-paste ready

CSS variables

:root {
  --bg: #008080;
  --ink: #C0C0C0;
  --accent: #000080;
  --highlight: #94C849;
  --mute: #3C813A;
}

Tailwind config

// tailwind.config
theme: {
  extend: {
    colors: {
      "bg": "#008080",
      "ink": "#C0C0C0",
      "accent": "#000080",
      "highlight": "#94C849",
      "mute": "#3C813A",
    },
  },
},

Hex array

["#008080", "#C0C0C0", "#000080", "#94C849", "#3C813A"]

Links