Style once, use everywhere.
A Style Dictionary is a system that allows you to define styles once, in a way for any platform or language to consume. A single place to create and edit your styles, and a single command exports these rules to all the places you need them - iOS, Android, CSS, JS, HTML, sketch files, style documentation, etc. It is available as a CLI through npm, but can also be used like any normal npm module if you want to extend its functionality.
When you are managing user experiences, it can be quite challenging to keep styles consistent and synchronized across multiple development platforms and devices. At the same time, designers, developers, PMs and others must be able to have consistent and up-to-date style documentation to enable effective work and communication. Even then, mistakes inevitably happen and the design may not be implemented accurately. StyleDictionary solves this by automatically generating style definitions across all platforms from a single source - removing roadblocks, errors, and inefficiencies across your workflow.
See examples of Style Dictionary here
A style dictionary consists of:
- Style properties, organized in JSON files
- Static assets (e.g. fonts, icons, images, sounds, etc.), organized into folders
- Configuration, defining the transformation of the properties and assets for each output platform
What a style dictionary does:
- Transforms style properties and assets into platform specific deliverables
- Creates human readable artifacts (e.g. documentation, design libraries, etc)
Things you can build with a style dictionary:
- Styling files for any platform
- Images and graphics
- Sketch files
- Documentation website
- Literally anything you want styles or style data in
The value of using Style Dictionary to build all of these is that they are all consistent and up to date.
The Style Dictionary framework is fully extensible and modular. You can create any type of file from a style dictionary. If there is a new language, platform, or file type you need, you can easily extend the style dictionary framework to create the necessary files.
Please help make this framework better. For more information take a look at CONTRIBUTING.md