Colors
The Chilli design system uses semantic color tokens mapped to CSS custom properties. Each token adapts automatically between light and dark themes. Click any swatch to copy its CSS variable.
Backgrounds
Surface and container colors. Hover/pressed states are listed alongside each base variant.
Surface
Neutral — Primary
Neutral — Secondary
Neutral — Tertiary
Neutral — Inverse
Neutral — Glass
Neutral — Opacity
Brand
Danger
Success
Warning
Accent — Other
Text
Typographic colors for headings, body copy, labels, and interactive text.
Base
Brand
Status
Glass
Links
Link text colors across default, hover, pressed, and visited states.
Icons
Icon fill colors for neutral, brand, status, and interactive contexts.
Neutral
Brand
Status
Link & Glass
Borders
Stroke colors for dividers, input outlines, and container edges.
Base
Neutral
Brand & Status
Glass
Buttons
Fill and text colors for button variants across default, hover, pressed, and disabled states.
Primary
Secondary
Brand
Destructive
Glass
Disabled
Shadows
Focus ring and elevation shadow colors.