Design Tokens
A comprehensive overview of all color tokens used in the design system
Fonts
The core font families that define the primary typography.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
--font-sansLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
--font-serifLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
--font-monoPrimary Theme
The core colors that define the primary theme and overall look of the interface.
--background--foreground--primary--primary-foregroundSecondary & Accent
Colors used for secondary elements and accents throughout the interface.
--secondary--secondary-foreground--accent--accent-foregroundUI Component
Colors used for specific UI components like cards, popovers, and muted elements.
--card--card-foreground--popover--popover-foreground--muted--muted-foregroundUtility & Form
Colors used for borders, inputs, and other utility elements.
--border--input--ringStatus & Feedback
Colors used to indicate different states and provide feedback to users.
--destructive--destructive-foregroundChart & Visualization
Colors used for data visualization and charts.
--chart-1--chart-2--chart-3--chart-4--chart-5Sidebar & Navigation
Colors specific to the sidebar and navigation components.
--sidebar--sidebar-foreground--sidebar-primary--sidebar-primary-foreground--sidebar-accent--sidebar-accent-foreground--sidebar-border--sidebar-ring