Imagine you're building a house with a team. If you tell one person to paint a wall "a nice blue," and another to use the same color for the shutters, you might end up with two different shades. But if you give them both a paint can labeled "Sky Blue #508AF2," you guarantee consistency. Design tokens are the digital equivalent of that named paint can.

Instead of hard-coding a value like #3B82F6 everywhere a specific blue is needed, you use a token, like $color-brand-primary. If the brand color ever changes, you only need to update the token's value in one central place. Every instance where that token is used will update automatically. This makes maintaining and scaling a design system much more efficient.

This shared language prevents drift between the intended design and the final product. Developers no longer have to guess at pixel values or hex codes, and designers can be confident that the implemented product will match their specifications. This streamlines collaboration and speeds up the entire development process.

Not all tokens are created equal. They exist in a hierarchy that moves from abstract to specific. Understanding these tiers helps you build a flexible and powerful system.

1. Core Tokens These are the foundational, context-agnostic values in your system. Think of them as your raw materials. They have names that describe their value, but not their purpose.

• blue-500: #3B82F6
• font-size-100: 16px
• spacing-4: 1rem

2. Semantic Tokens This is where the magic happens. Semantic tokens connect a core token to a specific purpose or context. They describe the role a value plays in the UI, not the value itself. This is the most crucial layer for creating a themeable, maintainable system.

• color-background-interactive: blue-500
• font-size-body: font-size-100
• spacing-inset-medium: spacing-4

If you want to change your primary interactive color, you only update the color-background-interactive token to point to a different core color, like purple-500. You don't have to hunt down every instance of blue-500.

3. Component Tokens These are the most specific tokens, scoped to a particular UI component. They typically reference semantic tokens to ensure consistency. They provide a final layer of abstraction that makes it easy to manage the design of a single component without affecting others.

• button-background-color-primary: color-background-interactive
• card-padding: spacing-inset-medium

Now that you understand what design tokens are and how they're structured, you can see their power. They are the atoms of your design system, enabling consistency, scalability, and better collaboration between design and engineering.