Lesson 1: Design Tokens — From Hardcoded Values to a Token System
Every screen can pick a color, spacing value, and font that 'look right' on their own — but after dozens of screens those small differences pile up: a slightly different blue here, slightly different spacing there, until the whole product feels inconsistent. Then comes the moment you need to change
A token is like a recipe card for a color in a lab: you write 'brand purple = this mix' once, and then everyone who needs the color asks for the card instead of guessing the mix again.
- design token
- A named design decision — a color, spacing, or radius — stored in one place and referenced everywhere, instead of a hardcoded value repeated by hand.
- Tailwind theme
- The `theme` object inside `tailwind.config.ts` where you define the project's tokens — Tailwind generates the utility classes from them.
- semantic color
- A token named for its role rather than its hue — `brand` or `danger` instead of `purple-500` — so swapping the hue never requires renaming things in code.
- arbitrary value
- A Tailwind syntax like `bg-[#6c5ce7]` that bypasses the theme and injects a hardcoded value straight into a class — the quick path that drags you back into the problem tokens solve.
