Small design systems: tokens first, components second

Every design system I've built that started with components ended up with a pile of one-off variants. The ones that started with tokens survived.

Tokens are the decisions: spacing scale, type scale, radii, colors, elevation. Components are just the places those decisions show up.

The order that works for me:

1. Name the scales. 4/8/12/16 is not a system, it's a suggestion. Pick a small set and stop.
2. Write the tokens as CSS variables. They work in every framework and they make dark mode a variable swap instead of a refactor.
3. Build one component at a time, and delete variants that aren't used twice.

The last part is the hard one. A variant that exists because one screen needed it is not a design system, it's a bug with a name.

Do you keep tokens in CSS variables, a JS object, or both?