Token Tooling: Style Dictionary
Transform and distribute design tokens across platforms using the Style Dictionary tool.
What is Style Dictionary?
Style Dictionary is an open-source build tool by Amazon that transforms a token JSON source into platform outputs: CSS custom properties, SCSS variables, iOS Swift constants, Android XML, and JavaScript/TypeScript modules — all from one source of truth.
Project Structure
Organize tokens in tokens/ directory as JSON or JSON5 files. Style Dictionary merges all files automatically. Separate files by category: tokens/color.json, tokens/spacing.json, tokens/typography.json.
All lessons in this course
- What Are Design Tokens
- Token Naming Conventions
- Implementing Multi-Brand Theming with CSS Variables
- Token Tooling: Style Dictionary