- Accordion
- Avatar
- Badge
- Breadcrumb
- Button
- Calendar
- Checkbox
- Combobox
- Container
- CurrencyInput
- DistributionSlider
- Drawer
- Dropdown
- Grid
- Heading
- Image
- Input
- InputGroup
- Label
- Logo
- MapPin
- Modal
- NativeSelect
- NumberInput
- OtpInput
- PhoneInput
- Popover
- Progress
- PropertyCalendar
- RadioGroup
- RadioGroupCards
- ResponsiveModal
- ScrollArea
- SearchBar
- SearchBarFallback
- SearchInput
- Select
- Separator
- Spinner
- Switch
- Tabs
- Text
- Textarea
- Toast
- Toggle
- ToggleGroup
- Tooltip
Themes
Color presets for theming sites built on the design system.
Themes are light-mode color presets that override four core design tokens. They let you quickly preview how a site will look with different color palettes without modifying the underlying token system.
Each preset maps to these CSS custom properties:
| Token | CSS Variable | Description |
|---|---|---|
| Background | --color-surface-primary | Page and container backgrounds |
| Background Secondary | --color-surface-secondary | Secondary surfaces, inputs, code blocks |
| Text Primary | --color-primary | Headings and body text |
| Text Secondary | --color-secondary | Muted text, labels, descriptions |
Use the theme switcher in the header to preview presets across the docs.
Classic Persian
--color-surface-primary#ffffff
--color-surface-secondary#f7f7f7
--color-surface-tertiary#f0f0f0
--color-surface-quaternary#eaeaea
--color-surface-modal#ffffff
--color-surface-tooltip#0d0d0d
Pink Navy
--color-surface-primary#ffffff
--color-surface-secondary#f7f7f7
--color-surface-tertiary#f0f0f0
--color-surface-quaternary#eaeaea
--color-surface-modal#ffffff
--color-surface-tooltip#0d0d0d
Mauve Garden
--color-surface-primary#ffffff
--color-surface-secondary#f7f7f7
--color-surface-tertiary#f0f0f0
--color-surface-quaternary#eaeaea
--color-surface-modal#ffffff
--color-surface-tooltip#0d0d0d
Electric Clash
--color-surface-primary#ffffff
--color-surface-secondary#f7f7f7
--color-surface-tertiary#f0f0f0
--color-surface-quaternary#eaeaea
--color-surface-modal#ffffff
--color-surface-tooltip#0d0d0d
Ocean Calm
--color-surface-primary#ffffff
--color-surface-secondary#f7f7f7
--color-surface-tertiary#f0f0f0
--color-surface-quaternary#eaeaea
--color-surface-modal#ffffff
--color-surface-tooltip#0d0d0d
Sunset Warmth
--color-surface-primary#ffffff
--color-surface-secondary#f7f7f7
--color-surface-tertiary#f0f0f0
--color-surface-quaternary#eaeaea
--color-surface-modal#ffffff
--color-surface-tooltip#0d0d0d
Forest Dew
--color-surface-primary#ffffff
--color-surface-secondary#f7f7f7
--color-surface-tertiary#f0f0f0
--color-surface-quaternary#eaeaea
--color-surface-modal#ffffff
--color-surface-tooltip#0d0d0d
Coral Reef
--color-surface-primary#ffffff
--color-surface-secondary#f7f7f7
--color-surface-tertiary#f0f0f0
--color-surface-quaternary#eaeaea
--color-surface-modal#ffffff
--color-surface-tooltip#0d0d0d
Signal Pop
--color-surface-primary#ffffff
--color-surface-secondary#f7f7f7
--color-surface-tertiary#f0f0f0
--color-surface-quaternary#eaeaea
--color-surface-modal#ffffff
--color-surface-tooltip#0d0d0d
Heritage
--color-surface-primary#ffffff
--color-surface-secondary#f7f7f7
--color-surface-tertiary#f0f0f0
--color-surface-quaternary#eaeaea
--color-surface-modal#ffffff
--color-surface-tooltip#0d0d0d