Design Token Explorer
View Docs →Select a Design System
Choose a design system from the sidebar to explore colors, typography, components, and live UI previews.
3 Design Systems
Live Components
Full UI Preview
Color Palette
Typography Scale
Border Radius
Shadows
Buttons
Primary, secondary, and ghost button variants with size variations
Form Inputs
Text inputs, search fields, and textarea in default and focus states
Badges & Status
Status badges, labels, and tag components
Cards
Content cards with various layouts and usage contexts
List & Avatars
User list rows with avatars, metadata, and actions
A realistic mini-app layout built entirely with this design system's tokens.
CSS Variables
Button Component (React)