Design Tokens: The Single Source of Truth

Pioneered by Jina Anne at Salesforce, design tokens are the foundational subatomic particles of a design system:

A design token is an agnostic key-value pair storing a design decision:

{
  "color": {
    "brand": {
      "primary": { "value": "#513DEB" }
    }
  },
  "spacing": {
    "md": { "value": "16px" }
  }
}

Using automated build pipelines (such as Style Dictionary), tokens are transformed into:

• CSS Custom Properties (--color-brand-primary) for web apps.
• Swift structs (Color.brandPrimary) for iOS.
• Kotlin objects (Color.BrandPrimary) for Android.

When a brand color updates, designers change it in one token file, and the entire multi-platform ecosystem updates automatically.