v0.5.14

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:

TokenCSS VariableDescription
Background--color-surface-primaryPage and container backgrounds
Background Secondary--color-surface-secondarySecondary surfaces, inputs, code blocks
Text Primary--color-primaryHeadings and body text
Text Secondary--color-secondaryMuted text, labels, descriptions

Use the theme switcher in the header to preview presets across the docs.

Presets

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