Colors
The color tokens used throughout the design system, grouped by category: text, surface, stroke, icon, and more. Switch between light and dark in the top bar to see how each one adapts.
Text
Text - semantic
Text - severity
Surface
Surface - semantic
Surface - severity
Surface - input states (legacy)
Field background wash
- --field-wash (light)
- color-mix(in srgb, var(--color-brand-brand) 4%, transparent)
- --field-wash-hover (light)
- color-mix(in srgb, var(--color-brand-brand) 7%, transparent)
- --field-wash (dark)
- color-mix(in srgb, var(--color-brand-brand) 3%, transparent)
- --field-wash-hover (dark)
- color-mix(in srgb, var(--color-brand-brand) 6%, transparent)
On background
By clicking this checkbox, you agree to the terms and conditions.
On card
By clicking this checkbox, you agree to the terms and conditions.
On popover
By clicking this checkbox, you agree to the terms and conditions.
InputWash
TextareaWash
CheckboxWash
RadioGroupWash
Select (trigger)Wash
Combobox (trigger)Wash
Switch (track)Wash
Switch (thumb)Not wash
Tabs (list)Wash
Tabs (indicator)Wash
Combobox search rowNot wash
Field stroke wash
- --field-stroke-wash (light)
- color-mix(in srgb, var(--color-brand-brand) 7%, transparent)
- --field-stroke-wash-strong (light)
- color-mix(in srgb, var(--color-brand-brand) 18%, transparent)
- --field-stroke-wash (dark)
- color-mix(in srgb, var(--color-brand-brand) 12%, transparent)
- --field-stroke-wash-strong (dark)
- color-mix(in srgb, var(--color-brand-brand) 26%, transparent)