Shared values.
WHAT A TOKEN IS
A named value used throughout: a colour, a spacing step, a type size, a radius.
WHY THEY MATTER
They are what makes an interface consistent, and they allow change in one place.
WHAT TO DEFINE
A colour palette, with semantic names A spacing scale A type scale Border radii Shadow levels Breakpoints
WHY SEMANTIC NAMES
A token named for its purpose can be changed without renaming everywhere.
WHAT THAT LOOKS LIKE
Naming by role rather than by appearance.
WHAT TO IMPLEMENT THEM AS
Custom properties, which work at runtime and enable theming.
WHAT THAT ENABLES
Light and dark variants Brand variants Density variants
WHAT TO AUDIT
How many distinct values are actually in use.
WHAT YOU WILL FIND
Far more than intended.
WHAT TO DO ABOUT IT
Consolidate to the scale, and enforce it.
HOW
Linting, or a framework constraining values.
WHAT TO DOCUMENT
Every token, its purpose, and when to use it.
