Design Systems Glossaries & Primitive tokens
There's an abundance of lexicon in design systems, for better or worse, so it's nice to see the community sharing definitions
- Glossary (noun):
- An alphabetical list of words relating to a specific subject, text, or dialect, with explanations; a brief dictionary.
Don't we just love naming things? Well, it's more like a love/hate relationship. We know that naming things in the design and development space is hard, yet we do it anyway. Design systems are no different. Thankfully, there are enough clever people out there who have created a glossary of terminology that you'll find commonly when people are talking about design systems.
This was sparked by a discussion over in the Design Systems community Slack (you should totally come on in to chat). I will say, though, that some definitions are missing. For example, none of them mention Primitive or semantic design tokens.
Primitive and Semantic Tokens
If you were wondering, primitive tokens are the final values stored against a broadly named token key. Semantic tokens are literally a more practical name that you would use in your components (code or design). The idea is that the semantic token is wired up to the primitive, creating an additional abstraction layer.
So, a very basic example would be #ff0000
(red) is stored as a primitive called color.red500
, and in turn, a semantic token called color.text.error
would be wired up to color.red500
.
You can see how things can get complex pretty quickly, but there is value in splitting these apart, as people working on tokens can make improvements without causing major breakages in code or design files.