Colors

Design tokens for color. All colors adapt automatically between light and dark mode. Toggle theme in the settings panel (⚙️) to preview.

Brand / Primary

Primary

Brand / CTA

--ds-primary

Primary Foreground

Text on primary

--ds-primary-foreground

Secondary

Subtle actions bg

--ds-secondary

Secondary Foreground

Text on secondary

--ds-secondary-foreground

Accent

Hover, active bg

--ds-accent

Accent Foreground

Text on accent

--ds-accent-foreground

Semantic

Destructive

Error, delete, danger

--ds-destructive

Destructive Foreground

Text on destructive

--ds-destructive-foreground

Success

Positive state

--ds-success

Success Foreground

Text on success

--ds-success-foreground

Warning

Caution

--ds-warning

Warning Foreground

Text on warning

--ds-warning-foreground

Info

Informational

--ds-info

Info Foreground

Text on info

--ds-info-foreground

Neutral

Background

Page background

--ds-background

Foreground

Page text

--ds-foreground

Card

Card / modal bg

--ds-card

Card Foreground

Card text

--ds-card-foreground

Popover

Dropdown / tooltip bg

--ds-popover

Popover Foreground

Dropdown text

--ds-popover-foreground

Muted

Disabled / subtle bg

--ds-muted

Muted Foreground

Placeholder text

--ds-muted-foreground

Border & Fill

Border

Default border

--ds-border

Border Hover

Hover state

--ds-border-hover

Input

Input border

--ds-input

Ring

Focus ring

--ds-ring

Fill

Subtle fill (tags, badges)

--ds-fill

Fill Hover

Fill hover state

--ds-fill-hover

Fill Active

Fill pressed state

--ds-fill-active

Text

Primary text

--ds-text

Text Secondary

Supporting text

--ds-text-secondary

Text Tertiary

Placeholder

--ds-text-tertiary

Text Disabled

Disabled text

--ds-text-disabled