Design tokens > Token organization
Style-dictionary
The design token POC uses style-dictionary top organise and automate design tokens. It may be worth validating the approach to ongoing requirements to ensure that it is appropriate.
Pros:
- Defined token structure (Category / Type / Item)
- Predictable and documented approach
- Seems to be consistent/popular with general token usage
- Output automation (CSS, SCSS, Javascript)
- Very extendable with formats
- Dark mode is possible
Cons:
- Defined token structure
- Difficult to define tokens that differ from this shape
- Some nodes aren't consistent e.g.
color
vs.border-size
(should it beborder.size
orborderSize
?)
- Extending formats is possible, but not super clear/concise
- Dark mode isn't super clear in implementation, duplication of config/formats
Outcome
- Document our decision for organizing tokens in our architecture design doc (internal)
Edited by Jeff Tucker