Design Tokens

Design Tokens are a set of variables that define visual properties in a design system, such as color, typography, spacing, and borders. They are used to create consistency across products by storing these values in a reusable format (e.g., JSON or YAML files). Design tokens allow for easy maintenance and updates across a product or design system, ensuring that design decisions are scalable and adaptable.

Design tokens are what make theming, dark mode, and multi-brand products manageable at scale. Instead of hardcoding colors and spacing throughout your codebase, you reference tokens — so changing your primary brand color from blue to teal is a one-line change that updates everywhere. For startups building white-label products or planning rebrands, tokens are the architectural foundation that makes it possible.

Salesforce's Lightning Design System uses design tokens extensively — their entire component library references token variables for colors, spacing, and typography, meaning their many enterprise customers who white-label Salesforce can customize the look by overriding a token file.