Style Dictionary

An open-source build system that transforms design tokens from JSON into any platform format (CSS, iOS, Android, and more).

All Dictionary

In one sentence

Style Dictionary takes one JSON file of design tokens and spits out whatever format each platform needs: CSS variables, iOS Swift, Android XML, JSON, and more.

What it is

Style Dictionary is an open-source build system created by Amazon. It reads a single source of truth for design tokens (usually JSON) and transforms it into platform-specific code. One token definition, many output formats.

Why it matters

Without a transformer, each platform team rewrites the same color values in their own syntax. iOS uses UIColor, web uses hex or CSS variables, Android uses XML. That duplication drifts the moment someone updates a value. Style Dictionary solves this by generating all formats from one source. Change a value once, and every platform gets the update on the next build.

Example

Input JSON:

{
  "color": {
    "background": {
      "primary": { "value": "#FFFFFF" }
    }
  }
}

Outputs generated automatically:

/* web */
--color-background-primary: #FFFFFF;
// iOS
public static let colorBackgroundPrimary = UIColor(hex: "#FFFFFF")
<!-- Android -->
<color name="color_background_primary">#FFFFFF</color>

When to use it

  • You ship the same design system to web, iOS, and Android
  • You want tokens to live in version control as plain JSON
  • You need automated outputs in a CI/CD pipeline
  • You are pairing it with Tokens Studio, Figma variables, or a design-to-code workflow

See also