Back to Home

Design Tokens

A comprehensive overview of all color tokens used in the design system

Primary Theme

The core colors that define the primary theme and overall look of the interface.

Background
oklch(0.97 0.01 80.72)
Foreground
oklch(0.3 0.04 30.2)
Primary
oklch(0.52 0.13 144.17)
Primary Foreground
oklch(1.0 0 0)

Secondary & Accent

Colors used for secondary elements and accents throughout the interface.

Secondary
oklch(0.96 0.02 147.64)
Secondary Foreground
oklch(0.43 0.12 144.31)
Accent
oklch(0.9 0.05 146.04)
Accent Foreground
oklch(0.43 0.12 144.31)

UI Component

Colors used for specific UI components like cards, popovers, and muted elements.

Card
oklch(0.97 0.01 80.72)
Card Foreground
oklch(0.3 0.04 30.2)
Popover
oklch(0.97 0.01 80.72)
Popover Foreground
oklch(0.3 0.04 30.2)
Muted
oklch(0.94 0.01 74.42)
Muted Foreground
oklch(0.45 0.05 39.21)

Utility & Form

Colors used for borders, inputs, and other utility elements.

Border
oklch(0.88 0.02 74.64)
Input
oklch(0.88 0.02 74.64)
Ring
oklch(0.52 0.13 144.17)

Status & Feedback

Colors used to indicate different states and provide feedback to users.

Destructive
oklch(0.54 0.19 26.72)
Destructive Foreground
oklch(1.0 0 0)

Chart & Visualization

Colors used for data visualization and charts.

Chart 1
oklch(0.67 0.16 144.21)
Chart 2
oklch(0.58 0.14 144.18)
Chart 3
oklch(0.52 0.13 144.17)
Chart 4
oklch(0.43 0.12 144.31)
Chart 5
oklch(0.22 0.05 145.73)

Sidebar & Navigation

Colors specific to the sidebar and navigation components.

Sidebar
oklch(0.94 0.01 74.42)
Sidebar Foreground
oklch(0.3 0.04 30.2)
Sidebar Primary
oklch(0.52 0.13 144.17)
Sidebar Primary Foreground
oklch(1.0 0 0)
Sidebar Accent
oklch(0.9 0.05 146.04)
Sidebar Accent Foreground
oklch(0.43 0.12 144.31)
Sidebar Border
oklch(0.88 0.02 74.64)
Sidebar Ring
oklch(0.52 0.13 144.17)