Design tokens are the most underrated tool in a non-designer founder's toolkit. They're CSS variables that define your brand's visual DNA — colors, spacing, typography, borders — in one place. Change a token, change your entire site. Here's how to set them up in 15 minutes.
The Minimum Viable Token Set
You need exactly 20 tokens to have a functional brand system: 5 colors (background, text, accent, border, surface), 3 fonts (heading, body, mono), 4 spacing values (small, medium, large, section), 3 border radiuses (none, small, full), 3 font sizes (small, body, heading), and 2 transitions (fast, medium).
Put these in a tokens.css file using CSS custom properties (--brand-bg, --brand-text, etc.). Import this file in every page. Now every design decision references a token instead of a hardcoded value.
Why Tokens Change Everything
Tokens enforce consistency without requiring design skills. You can't accidentally use the wrong blue because there's only one blue — it's var(--brand-accent). You can't have inconsistent spacing because spacing is always one of four values. The system makes good design the path of least resistance, which is exactly what non-designers need.