Color Tokens

Semantic color tokens that adapt to the active Crystal theme. Each token resolves to a concrete color value via --crystal-* CSS custom properties. Switch themes to see values change live.

Background

--crystal-bg-primary

--crystal-bg-secondary

--crystal-bg-tertiary

Foreground

--crystal-fg-primary

--crystal-fg-secondary

--crystal-fg-tertiary

--crystal-fg-inverse

Border

--crystal-border-default

--crystal-border-strong

--crystal-border-subtle

Accent

--crystal-accent-primary

--crystal-accent-secondary

--crystal-accent-subtle

Surface

--crystal-surface-primary

--crystal-surface-elevated

Status

--crystal-status-success

--crystal-status-warning

--crystal-status-error

--crystal-status-info

Click any swatch to copy the CSS variable. Hover to see the resolved value. Colors update live when you switch themes.