Tokens are the system. Components are proof.

A design system without a foundation is a component library. Component libraries make it easy to copy a button. Design systems make it easy to make a button you've never made before. The difference is the foundation.

The tokens below are the fewest possible decisions that get us 100% of the way. Adding a new token is a 30-day commitment; if it can't be defended in 30 days, it doesn't get a token.

1. Semantic, not numeric. We name tokens by what they mean (--foreground, --surface-elevated), not what they look like (--gray-900). The same token can change its value at any time without breaking the contract.
2. Fewer is more. Eight color tokens, three radii, two shadows. If a new value is needed, the right answer is usually to use the nearest existing token.
3. One source of truth. Tokens live in app/globals.css. Components consume them via Tailwind's @theme inline. There is no inline color, no inline font size, no inline shadow anywhere else.
4. Document the tradeoffs. A token without a reason is a guess. Every page in this section ends with "Why this value" because the next contributor needs the argument, not the answer.

The full map. Each page is short on purpose.