Tokens

Color

Always reach for a semantic token — never a raw ramp step or a hex value. Semantic tokens re-map automatically in dark theme; toggle it in the sidebar to check contrast.

Surfaces & text

--backgroundPage background

--surfaceSunken/secondary surface

--surface-raisedCards, inputs, dialogs

--foregroundPrimary text

--mutedSubtle fill, hover state

--muted-foregroundSecondary text, captions

--borderHairline dividers

--border-strongInput and control borders

Primary — action

--primaryPrimary action fill

--primary-hoverPrimary hover

--primary-activePrimary pressed

--primary-subtleTinted background, ghost hover

--primary-foregroundText on primary

Secondary — emphasis

--secondaryAccent fill, highlights

--secondary-hoverAccent hover

--secondary-activeAccent pressed

--secondary-subtleAccent tint background

--secondary-foregroundText on accent

Status

--destructiveDestructive action, errors

--destructive-subtleError background

--successSuccess state

--success-subtleSuccess background

--focus-ringKeyboard focus ring

Primary (indigo)

Raw ramp — reference only. Build with the semantic tokens above.

--color-primary-50

--color-primary-100

--color-primary-200

--color-primary-300

--color-primary-400

--color-primary-500

--color-primary-600

--color-primary-700

--color-primary-800

--color-primary-900

Secondary (amber)

Raw ramp — reference only. Build with the semantic tokens above.

--color-secondary-50

--color-secondary-100

--color-secondary-200

--color-secondary-300

--color-secondary-400

--color-secondary-500

--color-secondary-600

--color-secondary-700

--color-secondary-800

--color-secondary-900

Neutral

Raw ramp — reference only. Build with the semantic tokens above.

--color-neutral-0

--color-neutral-50

--color-neutral-100

--color-neutral-200

--color-neutral-300

--color-neutral-400

--color-neutral-500

--color-neutral-600

--color-neutral-700

--color-neutral-800

--color-neutral-850

--color-neutral-900