Style token organization and semantic tokens

Learn how to organize style tokens into logical groups and create semantic tokens that reference foundation tokens to keep your design system consistent and easy to manage.

Organize style tokens

As your design system grows, organize related tokens into groups by using folder-style naming.

Examples:

• Color/Primary
• Color/Secondary
• Color/Success
• Spacing/Small
• Spacing/Medium
• Spacing/Large

Grouping tokens makes them easier to find and manage. You can rename, delete, or manage multiple tokens within a group.

Create semantic tokens

Instead of assigning raw values directly to components, create semantic tokens that reference foundational tokens.

If you update the foundation token, all semantic tokens that reference it automatically use the updated value.

Best practices

Follow these best practices when working with style tokens:

• Use descriptive and meaningful token names instead of raw values
• Organize tokens into logical groups such as Color, Typography, and Spacing
• Prefer semantic tokens, such as Primary Button Background, over directly applying primitive color tokens to components
• Reuse existing tokens whenever possible instead of creating duplicates
• Update token values instead of editing individual component styles to maintain consistency across the application