Member-only story
How to name design tokens in a Design System
The shapes of naming taxonomies for scale.
Hundreds of Design Systems have been created over the years. But despite this rich resource, Design System professionals still need a unified naming taxonomy to define design tokens at scale.
If you are not a Medium member, consider subscribing to support the writers, editors, curators, and teams who make Medium a wonderful social community. Otherwise, feel free to continue reading How to name design tokens in a Design System, published over a year ago.
This lack of standardization makes every Design System a bespoke product that solves the needs of a single organization, but not necessarily yours. Yet, if design token taxonomies were standardized, everyone could easily leverage components from any Design System to suit our needs.
This article describes a universal design token naming taxonomy to aid designers and engineers in scaling their Design Systems. It is an extension of the CTI taxonomy created by Danny Banks for Style Dictionary.
Inspiration
Shout outs to Nathan Curtis of Eight Shapes and his article, Reimagining a Token Taxonomy. Danny Banks, who invented Style Dictionary and his article, Dark Mode with Style Dictionary. Lukas Opperman, creator of the Design Tokens Figma Plugin, and his article W3C Design Tokens with Style Dictionary. Donnie D’Amato for his article OnDark virus. There are many more!
CTI+ naming convention
Style dictionary uses a custom CTI naming convention to identify and transform design tokens into platform-specific variables. Specifically, Category -> Type -> Item -> Subitem -> State.
The Danny Banks CTI naming convention is an amazing achievement!
Without this foundation, Style Dictionary could not transform JSON into platform-specific code. However, when we use Figma plugins to export tokens, we soon discover Style Dictionary requires manual editing of the JSON file to work.
