Design Tokens Visualizer

Explore and understand the relationships between design tokens and components across your design system

View Demo Get Started

Visual Relationships

See how tokens connect to components in interactive flow diagrams

Smart Search

Find tokens instantly and explore their usage patterns across your system

Multiple Systems

Pre-loaded with Carbon, SLDS, and Stellar design systems

Explore Design Systems

Salesforce Lightning (SLDS)

Enterprise-grade design system from Salesforce

1,126 tokens

Carbon Design System

IBM's open-source design system

276 tokens

Stellar Design System

Modern design system with comprehensive tokens

364 tokens

Getting Started

Project Setup

Learn how to use this tool and navigate the visualizations

Extract Your Tokens

Add your own design system by extracting tokens from CSS

How It Works

1

Select a Design System

Choose from pre-loaded systems or add your own

2

Explore the Visualization

Click on components to see their tokens, or search for specific tokens

3

Understand Relationships

See how tokens reference each other and where they're used