Designing a token system that survives dark mode

Wed, 02 Sep 2026 00:00:00 +0000

Why tiers

A colour is not one value. The blue that fills a button is not the blue that reads as text on grey, and using either in the other’s place is how a design system ships something illegible.

The four tiers

Fill, on-fill, on-surface, and states. Every hue carries all four.

:root {
 --retro-primary: #0000aa;
 --retro-primary-fg: #ffffff;
 --retro-primary-text: #000080;
}

What it buys you

One class sets both a fill and the text colour that survives on it.

A type scale for interfaces that shout

Fri, 07 Aug 2026 00:00:00 +0000

Windows 95 shipped at 96 DPI with an 8pt UI font. Reproducing that number today produces text nobody can read on a phone, which is the difference between an homage and a re-enactment.

Steps, not sizes

--retro-font-size-xs through -3xl, all in rem, all derived from one body size. A component asks for a step, never a pixel value, so a site that raises the base size moves everything with it.

tokens on Retro Dispatch

Designing a token system that survives dark mode

Why tiers #

The four tiers #

What it buys you #

A type scale for interfaces that shout

Steps, not sizes #

Why tiers

The four tiers

What it buys you

Steps, not sizes