Semantic Naming for Design Tokens
Don't name a token by its value (`blue-500`); name it by its job (`color.action.primary`). This decouples design intent from implementation, making systems scalable. It's key for theming and avoiding "lie" variables when designs change.
Don't name a design token by its value (`blue-500`); name it by its job (`color.action.primary`). This semantic approach acts as a contract, describing the token's purpose, not its appearance. This is the foundation for scalable UIs, especially for theming (light/dark mode) where the same token name (`color.background.default`) can hold different values. The footgun is naming by appearance (`light-gray`), which becomes a lie when the value changes, creating confusion and tech debt.
Read the original → docs.tokens.studio
- #design systems
- #design tokens
- #ui
- #css
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.