Colors

Philosophy

DS0 colors follow a two-layer architecture:

Core palette — Raw color values (gray, blue, red, etc.) at 50–950 scale
Semantic tokens — Intent-based names (primary, destructive, muted) that reference core colors

Components ONLY use semantic tokens. This means changing your brand color is a single token change.

Semantic Colors

Token	Purpose
`primary` / `primary-foreground`	Main actions, links, active states
`secondary` / `secondary-foreground`	Supporting actions, less prominent
`destructive` / `destructive-foreground`	Dangerous actions — delete, error
`success` / `success-foreground`	Positive states — saved, valid
`warning` / `warning-foreground`	Caution states — attention needed
`muted` / `muted-foreground`	Disabled, secondary areas
`accent` / `accent-foreground`	Hover highlights
`background` / `foreground`	Page background and default text
`card` / `card-foreground`	Card surfaces
`popover` / `popover-foreground`	Overlay surfaces
`border`	Default borders
`input`	Input borders
`ring`	Focus ring

Every background token has a matching -foreground token to ensure contrast.

Core Palette

Gray

Gray50

#f9fafb

Gray100

#f3f4f6

Gray200

#e5e7eb

Gray300

#d1d5db

Gray400

#9ca3af

Gray500

#6b7280

Gray600

#4b5563

Gray700

#374151

Gray800

#1f2937

Gray900

#111827

Gray950

#030712

Blue

Blue50

#eff6ff

Blue100

#dbeafe

Blue200

#bfdbfe

Blue300

#93c5fd

Blue400

#60a5fa

Blue500

#3b82f6

Blue600

#2563eb

Blue700

#1d4ed8

Blue800

#1e40af

Blue900

#1e3a8a

Blue950

#172554

Red

Red50

#fef2f2

Red100

#fee2e2

Red200

#fecaca

Red300

#fca5a5

Red400

#f87171

Red500

#ef4444

Red600

#dc2626

Red700

#b91c1c

Red800

#991b1b

Red900

#7f1d1d

Red950

#450a0a

Green

Green50

#f0fdf4

Green100

#dcfce7

Green200

#bbf7d0

Green300

#86efac

Green400

#4ade80

Green500

#22c55e

Green600

#16a34a

Green700

#15803d

Green800

#166534

Green900

#14532d

Green950

#052e16

Amber

Amber50

#fffbeb

Amber100

#fef3c7

Amber200

#fde68a

Amber300

#fcd34d

Amber400

#fbbf24

Amber500

#f59e0b

Amber600

#d97706

Amber700

#b45309

Amber800

#92400e

Amber900

#78350f

Amber950

#451a03

Using Colors

// ✅ Use semantic tokens
<div className="bg-primary text-primary-foreground">Primary action</div>
<div className="bg-destructive text-destructive-foreground">Danger</div>
<div className="text-muted-foreground">Secondary text</div>

// ❌ Never use raw palette in components
<div className="bg-blue-600 text-white">Don't do this</div>

Theming

Override semantic tokens to change your entire theme:

{
  "color": {
    "primary": { "$value": "{color.indigo.600}" },
    "primary-foreground": { "$value": "{color.white}" }
  }
}

See Theming Guide for complete instructions.

On this page