Style Dictionary

Style Dictionary is a build-system that runs in both NodeJS and browsers (natively), to parse and transform your design tokens to then export them to any platform: iOS, Android, CSS, JS, HTML, sketch files, style documentation, or anything you can think of.

Overview

The Style Dictionary framework was created out of a pain point discovered in the Seller Mobile team: style information like colors and sizes that were meant to be shared across platforms were written in platform-specific code and spread across many codebases. This made it difficult and error-prone to update any styles of the mobile application. The goal of Style Dictionary was to address that issue in a generic way so that any team, and eventually any company could use because this problem is not specific to the Seller Mobile team.

Quotes

Style Dictionary has certainly been helpful for our team as it’s given us a framework to start with in terms of how to think about distributing the source of truth for our design tokens to many different platforms

I think Style Dictionary has been one o the most impactful tools we have adopted in Cosmos. It’s been transformational for our design system, that supports multiple products (among them, Badoo and Bumble. It has has had a incredible impact in not only how I work, but also the native teams (Android/iOS) and the front-end teams (mobile/desktop) work. And we’re still at the very beginning, just discovering the full potential of it. I don’t think this would have been possible with other tools (eg. Theo) because of the way they were built. I think Style Dictionary is such a great tool because it reflects the personal qualities of its creator: simple - so accessible to every one - but very powerful and effective - so with a big positive impact on everyone

Articles