Five-Phase Design System
The design system this site is built on: tokens, type, and components, contrast-checked in both themes.
A general-purpose visual system that happens to be organized around an optional five-phase structural device. One primary interactive color and nothing else clickable. A secondary accent with real surface area, a tertiary accent kept to the smallest touches, and accent-tinted borders instead of neutral gray.
Dark mode is not inverted neutrals. Every tinted background has its own dark override, and every color used as plain text has a brightened variant, because a hue tuned for a pale page goes low-contrast on a dark one. Every pairing is checked at 4.5:1 for body text and 3:1 for large text and UI boundaries, in both themes.
It ships as a Claude skill, so it applies by default to anything I build rather than being a file I remember to open. This site is the current proof that it survives contact with a real deliverable.