Colors

Semantic color tokens that stay consistent across components and adapt between light and dark themes.

Token Showcase

Use semantic token names in UI specs and code. Hex values below are copyable for Figma and design audits.

Core Tokens

Background

CSS var

--background

Background

Text pair

Foreground

CSS var

--foreground

Background

Text pair

Card

CSS var

--card

Background

Text pair

Card Foreground

CSS var

--card-foreground

Background

Text pair

Popover

CSS var

--popover

Background

Text pair

Popover Foreground

CSS var

--popover-foreground

Background

Text pair

Primary

CSS var

--primary

Background

Text pair

Primary Foreground

CSS var

--primary-foreground

Background

Text pair

Secondary

CSS var

--secondary

Background

Text pair

Secondary Foreground

CSS var

--secondary-foreground

Background

Text pair

Muted

CSS var

--muted

Background

Text pair

Muted Foreground

CSS var

--muted-foreground

Background

Text pair

Accent

CSS var

--accent

Background

Text pair

Accent Foreground

CSS var

--accent-foreground

Background

Text pair

Feedback Tokens

Destructive

CSS var

--destructive

Background

Text pair

Destructive Foreground

CSS var

--destructive-foreground

Background

Text pair

Success

CSS var

--success

Background

Text pair

Success Foreground

CSS var

--success-foreground

Background

Text pair

Warning

CSS var

--warning

Background

Text pair

Warning Foreground

CSS var

--warning-foreground

Background

Text pair

Info

CSS var

--info

Background

Text pair

Info Foreground

CSS var

--info-foreground

Background

Text pair

Chart Tokens

Chart 1

CSS var

--chart-1

Background

Text pair

Chart 2

CSS var

--chart-2

Background

Text pair

Chart 3

CSS var

--chart-3

Background

Text pair

Chart 4

CSS var

--chart-4

Background

Text pair

Chart 5

CSS var

--chart-5

Background

Text pair

Chart 6

CSS var

--chart-6

Background

Text pair

Chart Positive

CSS var

--chart-positive

Background

Text pair

Chart Negative

CSS var

--chart-negative

Background

Text pair

Chart Neutral

CSS var

--chart-neutral

Background

Text pair

Chart Warning

CSS var

--chart-warning

Background

Text pair

Chart Info

CSS var

--chart-info

Background

Text pair

System Tokens

Border

CSS var

--border

Background

Text pair

Input

CSS var

--input

Background

Text pair

Ring

CSS var

--ring

Background

Text pair

Dashboard Colorography

Dashboards should feel neutral and readable first. Use accent color only where attention is needed: primary action, active state, focus, links, and chart emphasis.

Do

Use neutral surfaces: background, card, muted.
Use semantic feedback colors for status and validation.
Keep chart series tokens consistent across pages.

Don't

Use brand accents as default background color for all cards/panels.
Reuse warning/destructive tokens as decorative colors.
Mix custom hex values instead of tokenized semantic variables.

State Hierarchy

Default

background / foreground / border

Interactive

primary / accent / ring

Feedback

success / warning / destructive / info

Immutable Alias Mapping

Figma-friendly aliases (--kds-color-*) map one-to-one to runtime semantic tokens and should not be renamed once published.

--kds-color-surface-default → --background

--kds-color-text-primary → --foreground

--kds-color-action-primary → --primary

--kds-color-feedback-success → --success

--kds-color-focus-ring → --ring

--kds-color-chart-positive → --chart-positive