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 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 small touches, and accent-tinted borders instead of neutral gray.
Dark mode isn’t 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. This site runs on it, and so do coffeeandcharisma.com and baycountydiscgolf.com.