Design Tokens
Explore all the colors, typography, spacing, and other design tokens available in the design system.
Semantic Colors
Primary colors used throughout the design system for actions, states, and content.
Primary
--primaryLoading...
Primary Foreground
--primary-foregroundLoading...
Secondary
--secondaryLoading...
Secondary Foreground
--secondary-foregroundLoading...
Accent
--accentLoading...
Accent Foreground
--accent-foregroundLoading...
Destructive
--destructiveLoading...
Destructive Foreground
--destructive-foregroundLoading...
Muted
--mutedLoading...
Muted Foreground
--muted-foregroundLoading...
UI Colors
Colors for backgrounds, borders, inputs, and other UI elements.
Background
--backgroundLoading...
Foreground
--foregroundLoading...
Card
--cardLoading...
Card Foreground
--card-foregroundLoading...
Popover
--popoverLoading...
Popover Foreground
--popover-foregroundLoading...
Border
--borderLoading...
Input
--inputLoading...
Ring
--ringLoading...
Chart Colors
Colors designed for data visualization and charts.
Chart 1
--chart-1Loading...
Chart 2
--chart-2Loading...
Chart 3
--chart-3Loading...
Chart 4
--chart-4Loading...
Chart 5
--chart-5Loading...
Sidebar Colors
Colors specifically for sidebar and navigation components.
Sidebar
--sidebarLoading...
Sidebar Foreground
--sidebar-foregroundLoading...
Sidebar Primary
--sidebar-primaryLoading...
Sidebar Primary Foreground
--sidebar-primary-foregroundLoading...
Sidebar Accent
--sidebar-accentLoading...
Sidebar Accent Foreground
--sidebar-accent-foregroundLoading...
Sidebar Border
--sidebar-borderLoading...
Sidebar Ring
--sidebar-ringLoading...