ColorsThe default CDS theme ships two sets of color values: semantic color tokens (used by components) and the raw color spectrum (the underlying palette).

󰏖

View as Markdown

Color Tokens

Semantic tokens like bgPrimary or fgMuted automatically adapt to the active color scheme. Use these tokens when styling components so that light and dark mode work without any extra code.

Dark Color Scheme

Foreground

ForegroundGray100

Foreground MutedGray60

Foreground InverseGray0

Foreground PrimaryBlue70

Foreground WarningOrange70

Foreground PositiveGreen60

Foreground NegativeRed60

Background

BackgroundGray0

Background AlternateGray5

Background InverseGray100

Background OverlayGray0 @ 0.33

Background Elevation 1Gray5

Background Elevation 2Gray10

Background PrimaryBlue70

Background Primary WashBlue0

Background SecondaryGray15

Background Secondary WashGray5

Background TertiaryGray20

Background NegativeRed60

Background Negative WashRed0

Background PositiveGreen60

Background Positive WashGreen0

Background WarningOrange60

Background Warning WashOrange0

Line

LineGray60 @ 0.2

Line HeavyGray60 @ 0.66

Line InverseGray0

Line PrimaryBlue70

Line Primary SubtleBlue20

Accent

Accent Subtle GreenGreen0

Accent Bold GreenGreen60

Accent Subtle BlueBlue0

Accent Bold BlueBlue60

Accent Subtle PurplePurple0

Accent Bold PurplePurple80

Accent Subtle YellowYellow0

Accent Bold YellowYellow30

Accent Subtle RedRed0

Accent Bold RedRed60

Accent Subtle GrayGray10

Accent Bold GrayGray80

Other

TransparentGray0 @ 0

---

Color Spectrum

The full color palette available in the default theme, organized by family (rows) and step 0–100 (columns). Hover any swatch to see its name.

Dark Color Scheme

---

Accessibility

Every designer and engineer should uphold WCAG AA 2.1 accessibility standards. Using CDS, especially for color, gets you 90% of the way there!

Key concepts to know

Text contrast (4.5:1) — Any text displayed on interfaces should follow a 4.5:1 color contrast between the text color and background.

Non-text contrast (3:1) — Any graphical objects such as icons, or any shape that provides understanding like the stroke of a text input, must meet a 3:1 color contrast between the element color and its background.

---