Design Token
/dɪˈzaɪn ˈtoʊ.kən/ · Noun · Development · Origin: 2014
Definitions
A named, platform-agnostic variable that stores a single atomic design decision — such as a color value, spacing unit, font size, or border radius — allowing design systems to maintain consistency and enable theming across web, iOS, and Android from a single source of truth.
In plain English: A labeled container that holds one design value, like a specific shade of blue or the amount of space between elements. By giving values names and storing them in one place, you can change the look of an entire product by updating a single file.
Example: "Instead of hardcoding #1A73E8 everywhere, use the design token color.primary.base — when the brand refreshes next quarter, we change one file."
Origin Story
The atomic values that make design systems portable across platforms
Salesforce UX engineer Jina Anne coined **design tokens** around 2014 while building the Lightning Design System. She needed a way to share design decisions (colors, spacing, typography) across web, iOS, Android, and even email templates.
A design token is a named design decision stored as data: `color-brand-primary: #0176D3` rather than a hardcoded hex value in CSS. Tokens are platform-agnostic -- a build tool converts them to CSS custom properties, Swift constants, Android XML, or whatever each platform needs.
Amazon's **Style Dictionary** and Salesforce's **Theo** became popular token transformation tools. The W3C Design Tokens Community Group is now working on a standard format, ensuring tokens can be shared between organizations, not just platforms.
Coined by: Jina Anne (Salesforce)
Context: Salesforce Lightning Design System, ~2014
Fun fact: Design tokens solved a problem that frustrated designers for years: changing a brand color meant updating dozens of files across multiple platforms. With tokens, you change one value and it propagates everywhere automatically.