Skip to main content

​
Light Mode Palette

Light mode emphasizes clarity, brightness, and high contrast. Colors are defined using oklch() for perceptual consistency.
CategoryTokenColorDescription
Primary--color-primaryoklch(0.205 0 0)Used for main actions, buttons, and highlights.
Primary Foreground--color-primary-fgoklch(0.985 0 0)Text or icons displayed on primary backgrounds.
Secondary--color-secondaryoklch(0.97 0 0)Used for secondary actions or subtle emphasis.
Secondary Foreground--color-secondary-fgoklch(0.205 0 0)Text on secondary backgrounds.
Accent--color-accentoklch(0.97 0 0)Decorative elements or subtle highlights.
Accent Foreground--color-accent-fgoklch(0.205 0 0)Text or icons on accent backgrounds.
Background--color-backgroundoklch(1 0 0)Page background.
Foreground--color-foregroundoklch(0.145 0 0)Default text color.
Card--color-cardoklch(1 0 0)Card or panel backgrounds.
Card Foreground--color-card-fgoklch(0.145 0 0)Text inside cards.
Popover--color-popoveroklch(1 0 0)Popover or tooltip background.
Popover Foreground--color-popover-fgoklch(0.145 0 0)Text inside popovers.
Muted--color-mutedoklch(0.97 0 0)Less prominent text or UI elements.
Muted Foreground--color-muted-fgoklch(0.556 0 0)Text displayed on muted backgrounds.
Destructive--color-destructiveoklch(0.577 0.245 27.325)Warnings, errors, or destructive actions.
Destructive Foreground--color-destructive-fgoklch(0.985 0 0)Text on destructive backgrounds.
Border--color-borderoklch(0.922 0 0)Borders for inputs, cards, and dividers.
Input--color-inputoklch(0.922 0 0)Form input backgrounds.
Ring--color-ringoklch(0.708 0 0)Focus indicators.
Radius--radius0.915remBorder radius.
Chart Colors:
TokenColor
--color-chart1oklch(0.646 0.222 41.116)
--color-chart2oklch(0.6 0.118 184.704)
--color-chart3oklch(0.398 0.07 227.392)
--color-chart4oklch(0.828 0.189 84.429)
--color-chart5oklch(0.769 0.188 70.08)
Sidebar Colors:
TokenColorDescription
--color-sidebaroklch(0.985 0 0)Sidebar background.
--color-sidebar-fgoklch(0.145 0 0)Sidebar text.
--color-sidebar-primaryoklch(0.205 0 0)Active primary item.
--color-sidebar-primary-fgoklch(0.985 0 0)Text for primary items.
--color-sidebar-accentoklch(0.97 0 0)Accent item background.
--color-sidebar-accent-fgoklch(0.205 0 0)Accent text.
--color-sidebar-borderoklch(0.922 0 0)Sidebar dividers.
--color-sidebar-ringoklch(0.708 0 0)Focus ring inside sidebar.

​
Dark Mode Palette

Dark mode emphasizes depth, contrast, and reduced eye strain. Colors use oklch() for perceptual accuracy and consistency.
CategoryTokenColorDescription
Primary--color-primaryoklch(0.922 0 0)Used for main actions, buttons, and highlights.
Primary Foreground--color-primary-fg#0e0e0eText or icons displayed on primary backgrounds.
Secondary--color-secondaryoklch(0.269 0 0)Used for secondary actions or subtle emphasis.
Secondary Foreground--color-secondary-fgoklch(0.985 0 0)Text on secondary backgrounds.
Accent--color-accent#262626Decorative elements or subtle highlights.
Accent Foreground--color-accent-fgoklch(0.985 0 0)Text or icons on accent backgrounds.
Background--color-backgroundoklch(0.145 0 0)Page background.
Foreground--color-foregroundoklch(0.985 0 0)Default text color.
Card--color-cardoklch(0.205 0 0)Card or panel backgrounds.
Card Foreground--color-card-fgoklch(0.985 0 0)Text inside cards.
Popover--color-popoveroklch(0.269 0 0)Popover or tooltip background.
Popover Foreground--color-popover-fgoklch(0.985 0 0)Text inside popovers.
Muted--color-mutedoklch(0.269 0 0)Less prominent text or UI elements.
Muted Foreground--color-muted-fgoklch(0.708 0 0)Text displayed on muted backgrounds.
Destructive--color-destructiveoklch(0.704 0.191 22.216)Warnings, errors, or destructive actions.
Destructive Foreground--color-destructive-fgoklch(0.985 0 0)Text on destructive backgrounds.
Border--color-borderoklch(1 0 0 / 10%)Borders for inputs, cards, and dividers.
Input--color-inputoklch(1 0 0 / 15%)Form input backgrounds.
Ring--color-ringoklch(0.556 0 0)Focus indicators.
Radius--radius0.915remBorder radius.
Chart Colors:
TokenColor
--color-chart1oklch(0.488 0.243 264.376)
--color-chart2oklch(0.696 0.17 162.48)
--color-chart3oklch(0.769 0.188 70.08)
--color-chart4oklch(0.627 0.265 303.9)
--color-chart5oklch(0.645 0.246 16.439)
Sidebar Colors:
TokenColorDescription
--color-sidebaroklch(0.205 0 0)Sidebar background.
--color-sidebar-fgoklch(0.985 0 0)Sidebar text.
--color-sidebar-primaryoklch(0.488 0.243 264.376)Active primary item.
--color-sidebar-primary-fgoklch(0.985 0 0)Text for primary items.
--color-sidebar-accentoklch(0.269 0 0)Accent item background.
--color-sidebar-accent-fgoklch(0.985 0 0)Accent text.
--color-sidebar-borderoklch(1 0 0 / 10%)Sidebar dividers.
--color-sidebar-ringoklch(0.439 0 0)Focus ring inside sidebar.

​
Usage

Include the palette in your css or you can get it here: Dark mode Light mode

​
Example

example.css
button.primary {
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
}

.card {
  background-color: var(--color-card);
  color: var(--color-card-fg);
}

body {
  background-color: var(--color-background);
  color: var(--color-foreground);
  border-radius: var(--radius);
}

​
Preview

​
Light mode

image.png

​
Dark mode

image.png