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 be border.size or borderSize?)
• 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)