Design Tokens and token paths

Every component reads its colours, sizes and spacing from CSS variables, and their names are all that people, tools and agents have to go on. Our first Foundations page shows you how to name them, so that everyone reads them the same way.

New

• Token paths, like --color--primary, give every token a name that can only be read one way.
• Every component reads the same theme tokens, so a new brand or a dark mode never means editing every component.
• A Stylelint rule and a checklist let you and your agents check your tokens automatically.