All docs

Tokens

Every CSS custom property the theme defines. Swatches reflect the current brand. Switch brands in the top bar to see how each theme resolves them.

Surfaces

Background layers beneath content.

  • --background

    Page background.

  • --card

    Raised card surface.

  • --popover

    Floating menus and popovers.

Text

Foreground colours paired with each surface.

  • --foreground

    Body text on background.

  • --card-foreground

    Text on card.

  • --popover-foreground

    Text on popover.

  • --secondary-foreground

    Text on secondary surfaces.

  • --muted-foreground

    Reduced-emphasis text.

  • --accent-foreground

    Text on accent surfaces.

Brand

Untouched marketing colour. Use for logos and brand-heavy surfaces where the AA-adapted primary would dull the identity.

  • --brand-primary

    Marketing primary, not contrast-adjusted for UI.

Interactive

Primary actions, focus, and controls. Use these for anything that needs contrast to pass (buttons, focus rings, selected states).

  • --primary

    AA-adapted primary for interactive UI.

  • --primary-foreground

    Text on primary.

  • --secondary

    Secondary button surface.

  • --accent

    Hover/active surface.

  • --border

    Default border colour.

  • --input

    Input border in dark mode.

  • --ring

    Focus ring.

Semantic

Locked across all brands.

  • --destructive

    Dangerous or destructive actions.

  • --destructive-foreground

    Text on destructive.

  • --success

    Success state.

  • --success-foreground

    Text on success.

  • --warning

    Warning state.

  • --warning-foreground

    Text on warning.

  • --info

    Informational state.

  • --info-foreground

    Text on info.

Sidebar

Scoped tokens for app-level navigation rails.

  • --sidebar

    Sidebar background.

  • --sidebar-foreground

    Sidebar text.

  • --sidebar-accent

    Active/hover row surface.

  • --sidebar-accent-foreground

    Text on active/hover row.

  • --sidebar-border

    Sidebar border.

  • --sidebar-ring

    Sidebar focus ring.

Charts

Five-step categorical palette for data viz. Locked across brands.

  • --chart-1

    First series (blue).

  • --chart-2

    Second series (emerald).

  • --chart-3

    Third series (amber).

  • --chart-4

    Fourth series (rose).

  • --chart-5

    Fifth series (violet).

Shape and type

Non-colour tokens.

  • --radius

    Base corner radius. --radius-sm, -md, -lg, -xl derive from this.

  • --font-sans

    Default sans-serif stack.