What Even Is Style Dictionary Anyway?
A guide on Style Dictionary, Design Tokens Community Group Spec, and a few things in between.
I have to confess that until I joined the zeroheight team, I hadn't worked with Style Dictionary before. I was aware of it, but not 100% of what you use it for and how it works.
Lately I've been doing research into Style Dictionary itself, the Design Tokens standard proposed by the W3C Design Tokens Community Group. Here's what I've learned so far:
- Style Dictionary was a format cooked up by the people at Amazon, hence the reason for the source code residing within the Amazon org on GitHub
- Style Dictionary is a way to organize and store design tokens in such a format that it can be built and exported to multiple formats. Think of really verbose JSON files.
- Exportable formats could be JavaScript, JSON, CSS, Swift, iOS, Android, the list goes on.
- The Design Tokens Community Group Spec is a continuation of that but made more official and universal.
- The DTCG Spec, in short, is very similar to the Style Dictionary format but brings more alignment due to the nature of its contribution model.
- Since around August 2023, the Tokens Studio team has become the main contributors to the Style Dictionary project, helping to launch v4.
- As of v4, Style Dictionary accepts the DTCG Spec as a source format, making it somewhat more like a compiling tool than a file format and tooling.
I guess if I were assembling a set of tokens for my design system from scratch now, I'd probably go with the DTCG Spec. I'd rather bet on an open specification than one owned by a company that ultimately can do what it wants or could drop support with a Thanos snap (which certainly happened a few times).
Then again, Style Dictionary isn't hugely different, and they even provide a tool to format it into DTCG Spec.