Set's color tokens adapt to theme and surface context automatically. Use them in custom CSS, never raw color values.
Brand
var(--set-color-brand-primary)
Primary brand color. Use for prominent brand expressions.
var(--set-color-brand-support)
Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements.
Logo
var(--set-color-logo-default)
Logo color. Use as the fill for the brand mark.
var(--set-color-logo-neutral)
Neutral logo color. Use when the branded logo color would clash with surrounding content (e.g. over imagery, in monochrome contexts).
Background
var(--set-color-background-default)
Default page background. Use for the main canvas behind content.
var(--set-color-background-panel)
Elevated surface background. Use for cards, modals, and other contained surfaces that sit above the page.
var(--set-color-background-subtle)
Low-contrast surface background. Use for small discrete surfaces (inline code, zebra stripes, disabled inputs) that need light differentiation.
var(--set-color-background-scrim)
Translucent overlay. Use as a backdrop behind overlay surfaces (e.g. modals, drawers) to dim underlying content while keeping it partially visible.
Foreground
var(--set-color-foreground-default)
Default foreground color. Use as the system's standard color for text and icons.
var(--set-color-foreground-prose)
Body copy color. Slightly softer than the default foreground for visual comfort.
var(--set-color-foreground-muted-text)
Muted text color. Use for secondary text (helper copy, metadata, disabled labels) where lower emphasis is appropriate.
var(--set-color-foreground-muted-non-text)
Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable.
var(--set-color-foreground-contrast)
Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast.
Border
var(--set-color-border-default)
Default border color. Use for standard borders and dividers.
Low-contrast border. Use where the border should recede visually.
Interactive
var(--set-color-interactive-default)
Default interactive color. Use for links and primary actionable elements in their resting state.
var(--set-color-interactive-visited)
Visited interactive color for links the user has already followed. Inherits the default interactive color.
var(--set-color-interactive-hover)
Hover state color for interactive elements.
var(--set-color-interactive-focus)
Focus indicator color. Use for focus rings and keyboard-focus outlines on any interactive element.
var(--set-color-interactive-active)
Active (pressed) state color for interactive elements.
var(--set-color-interactive-neutral-default)
Neutral interactive color. Use for links and actions that shouldn't compete with brand-colored interactive elements (control labels, secondary controls, navigation).
var(--set-color-interactive-neutral-visited)
Visited state color for neutral interactive elements. Inherits the default neutral interactive color.
var(--set-color-interactive-neutral-hover)
Hover state color for neutral interactive elements.
var(--set-color-interactive-neutral-focus)
Focus state for neutral interactive elements. Inherits the standard interactive focus color for consistency across element types.
var(--set-color-interactive-neutral-active)
Active (pressed) state color for neutral interactive elements.
var(--set-color-interactive-prose-default)
Inline link color for prose. Pairs with foreground.prose. Tuned for sufficient contrast against the softer prose text color.
Base16 palette slot 0b. Strings, additions, and inherited colors.
var(--set-color-base16-0c)
Base16 palette slot 0c. Regular expressions and escape characters.
var(--set-color-base16-0d)
Base16 palette slot 0d. Functions, methods, and headings.
var(--set-color-base16-0e)
Base16 palette slot 0e. Keywords, storage, and language directives.
var(--set-color-base16-0f)
Base16 palette slot 0f. Deprecated, opening/closing tags, and embedded language markers.
Avatar
var(--set-color-avatar-default)
Default avatar background. Use as a fallback when no palette slot has been assigned. Slots 01–09 provide a palette for distinguishable per-user backgrounds when no uploaded image is available.