The design system’s color tokens, usage guidelines, and an interactive palette preview for light and dark modes.

Color System

The @loke/design-system provides a comprehensive color system designed for accessibility, consistency, and flexibility across light and dark modes. Colors are expressed as CSS variables and primarily defined in OKLCH for better perceptual uniformity.

The interactive palette below reflects your current theme. Use the toggle to switch between light and dark and copy values in different formats (OKLCH, HEX, RGB, HSL).

Usage

The color system is implemented using CSS variables with support for both light and dark themes.

.my-element {
  background-color: var(--card);
  color: var(--card-foreground);
}

In React components using Tailwind CSS:

<div className="bg-card text-card-foreground p-4 rounded-lg">
  Card Content
</div>

Color Palette

Our color system is organized into semantic categories (Base UI, Component, Sidebar, Action, Subtle UI, Data Visualization, and Brand). Explore and copy values:

Currently viewing in Light Mode

Base UI Colors

Background

Light

Main application background color.

CSS Variable

var(--background)

oklch(96% 0.04 276.98)

Foreground

Light

Primary content color, used for text and icons on the background.

CSS Variable

var(--foreground)

oklch(27.73% 0.0061 258.36)

Component Colors

Card

Light

Background color for card components.

CSS Variable

var(--card)

oklch(99.16% 0.0029 247.85)

Card Foreground

Light

Text color for content inside card components.

CSS Variable

var(--card-foreground)

oklch(37.39% 0.0822 285.49)

Popover

Light

Background color for popover elements like tooltips and dropdowns.

CSS Variable

var(--popover)

oklch(99.16% 0.0029 247.85)

Popover Foreground

Light

Text color for content inside popover components.

CSS Variable

var(--popover-foreground)

oklch(37.1% 0.0722 285.35)

Sidebar Colors

Sidebar

Light

Main background color for sidebar components.

CSS Variable

var(--sidebar)

oklch(21.03% 0.0316 264.78)

Sidebar Foreground

Light

Text color for content inside the sidebar.

CSS Variable

var(--sidebar-foreground)

oklch(95.05% 0.0041 286.32)

Sidebar Accent

Light

Used for accents and highlights within the sidebar.

CSS Variable

var(--sidebar-accent)

oklch(28.01% 0.0249 258.35)

Sidebar Accent Foreground

Light

Text color for accented elements within the sidebar.

CSS Variable

var(--sidebar-accent-foreground)

oklch(72.47% 0.1495 160.94)

Sidebar Border

Light

Used for borders and dividers within the sidebar.

CSS Variable

var(--sidebar-border)

oklch(21.03% 0.0316 264.78)

Sidebar Ring

Light

Used for focus rings and outlines within the sidebar.

CSS Variable

var(--sidebar-ring)

oklch(74.83% 0.1308 254.23)

Action Colors

Primary

Light

Used for primary actions, important UI elements, and focus states.

CSS Variable

var(--primary)

oklch(51.4% 0.2276 276.98)

Primary Foreground

Light

Text color for content inside primary elements.

CSS Variable

var(--primary-foreground)

oklch(99.17% 0.0028 325.6)

Secondary

Light

Used for secondary actions and less prominent UI elements.

CSS Variable

var(--secondary)

oklch(72.29% 0.1438 163.11)

Secondary Foreground

Light

Text color for content inside secondary elements.

CSS Variable

var(--secondary-foreground)

oklch(99.78% 0.0068 115.7)

Accent

Light

Used for accents and highlights to draw attention to specific UI elements.

CSS Variable

var(--accent)

oklch(96.71% 0.0029 264.54)

Accent Foreground

Light

Text color for content inside accented elements.

CSS Variable

var(--accent-foreground)

oklch(21.03% 0.0318 264.65)

Destructive

Light

Used for destructive actions, errors, and warnings.

CSS Variable

var(--destructive)

oklch(58.52% 0.18 24.61)

Destructive Foreground

Light

Text color for content inside destructive elements.

CSS Variable

var(--destructive-foreground)

oklch(98.48% 0.0213 193.18)

Subtle UI Colors

Muted

Light

Used for subtle backgrounds and less prominent UI elements.

CSS Variable

var(--muted)

oklch(96.71% 0.0029 264.54)

Muted Foreground

Light

Used for subtle text, placeholders, and secondary information.

CSS Variable

var(--muted-foreground)

oklch(55.13% 0.0233 264.36)

Border

Light

Used for borders, dividers, and separators.

CSS Variable

var(--border)

oklch(90.58% 0.013831 272.4947)

Input

Light

Used for input fields and form controls.

CSS Variable

var(--input)

oklch(87.53% 0.0142 268.67)

Ring

Light

Used for focus rings and outlines.

CSS Variable

var(--ring)

oklch(74.83% 0.1308 254.23)

Data Visualization

Chart 1

Light

Primary chart color for data visualization.

CSS Variable

var(--chart-1)

oklch(65.99% 0.1521 282.15)

Chart 2

Light

Secondary chart color for data visualization.

CSS Variable

var(--chart-2)

oklch(85.59% 0.0601 285.82)

Chart 3

Light

Tertiary chart color for data visualization.

CSS Variable

var(--chart-3)

oklch(72.29% 0.1438 163.11)

Chart 4

Light

Quaternary chart color for data visualization.

CSS Variable

var(--chart-4)

oklch(75.5% 0.145 230.45)

Chart 5

Light

Quinary chart color for data visualization.

CSS Variable

var(--chart-5)

oklch(68.75% 0.154 38.2)

Brand Colors

Brand 50

Light

Brand color 50

CSS Variable

var(--brand-50)

oklch(96% 0.04 276.98)

Brand 100

Light

Brand color 100

CSS Variable

var(--brand-100)

oklch(92% 0.08 276.98)

Brand 200

Light

Brand color 200

CSS Variable

var(--brand-200)

oklch(83% 0.13 276.98)

Brand 300

Light

Brand color 300

CSS Variable

var(--brand-300)

oklch(74% 0.18 276.98)

Brand 400

Light

Brand color 400

CSS Variable

var(--brand-400)

oklch(63% 0.21 276.98)

Brand 500

Light

Brand color 500

CSS Variable

var(--brand-500)

oklch(51.4% 0.2276 276.98)

Brand 600

Light

Brand color 600

CSS Variable

var(--brand-600)

oklch(42% 0.2 276.98)

Brand 700

Light

Brand color 700

CSS Variable

var(--brand-700)

oklch(33% 0.17 276.98)

Brand 800

Light

Brand color 800

CSS Variable

var(--brand-800)

oklch(24% 0.13 276.98)

Brand 900

Light

Brand color 900

CSS Variable

var(--brand-900)

oklch(15% 0.09 276.98)

Brand 950

Light

Brand color 950

CSS Variable

var(--brand-950)

oklch(5% 0.05 276.98)

Color Decision Guidelines

When choosing colors for your UI:

Use semantic colors — choose by function, not by appearance.
Maintain contrast — ensure text and essential UI meet accessibility standards.
Be consistent — the same meaning should use the same color systemwide.
Consider dark mode — test both light and dark modes for each state.

Accessibility Standards

All color combinations in our system are designed to meet WCAG 2.1 AA contrast requirements where applicable. Primary CTAs and critical text aim for AAA where possible.

// Example: Emphasized action
<button className="bg-primary text-primary-foreground px-3 py-2 rounded">
  Continue
</button>

// Example: Subtle content
<p className="text-muted-foreground">
  This is less prominent supporting text.
</p>

/* Example: Using tokens in CSS-in-JS or global CSS */
.cta {
  background: var(--primary);
  color: var(--primary-foreground);
}
.subtle {
  color: var(--muted-foreground);
}

Color System

Color System

Usage

Color Palette

Base UI Colors

Background

Foreground

Component Colors

Card

Card Foreground

Popover

Popover Foreground

Sidebar Colors

Sidebar

Sidebar Foreground

Sidebar Accent

Sidebar Accent Foreground

Sidebar Border

Sidebar Ring

Action Colors

Primary

Primary Foreground

Secondary

Secondary Foreground

Accent

Accent Foreground

Destructive

Destructive Foreground

Subtle UI Colors

Muted

Muted Foreground

Border

Input

Ring

Data Visualization

Chart 1

Chart 2

Chart 3

Chart 4

Chart 5

Brand Colors

Brand 50

Brand 100

Brand 200

Brand 300

Brand 400

Brand 500

Brand 600

Brand 700

Brand 800

Brand 900

Brand 950

Color Decision Guidelines

Accessibility Standards

On this page