Frontend codebases rarely become hard to change because of one big decision. They decay through many small ones: a hard-coded color here, a one-off margin there. A smarter frontend system makes the right choice the easy choice.
Three layers, one direction
Think of the interface as three layers. Tokens hold raw decisions such as colors, spacing, and type sizes. Components consume tokens and never invent their own values. Pages compose components and stay free of styling logic.
When changes flow in one direction, a token update ripples predictably through every component that uses it. Switching between light and dark modes becomes a matter of mapping one token set to another.
If changing a color means editing fifty files, the system is the bug.
Guardrails that scale
- Name tokens by purpose, such as
text-muted, not by value. - Keep raw values in one file and reference them everywhere else.
- Review new components against existing ones before adding variants.
None of this requires a framework. Plain CSS custom properties and a disciplined folder structure are enough to keep a site consistent as it grows from one page to many.