Calibrate Design System

Color

Calibrate’s color tokens adapt to theme and surface context automatically. Use them in custom CSS, never raw color values.

Brand

var(--clbr-color-brand-primary)

Primary brand color. Use for prominent brand expressions.

var(--clbr-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.

var(--clbr-color-logo-default)

Logo color. Use as the fill for the brand mark.

var(--clbr-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(--clbr-color-background-default)

Default page background. Use for the main canvas behind content.

var(--clbr-color-background-panel)

Elevated surface background. Use for cards, modals, and other contained surfaces that sit above the page.

var(--clbr-color-background-subtle)

Low-contrast surface background. Use for small discrete surfaces (inline code, zebra stripes, disabled inputs) that need light differentiation.

var(--clbr-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(--clbr-color-foreground-default)

Default foreground color. Use as the system's standard color for text and icons.

var(--clbr-color-foreground-prose)

Body copy color. Slightly softer than the default foreground for visual comfort.

var(--clbr-color-foreground-muted-text)

Muted text color. Use for secondary text (helper copy, metadata, disabled labels) where lower emphasis is appropriate.

var(--clbr-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(--clbr-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(--clbr-color-border-default)

Default border color. Use for standard borders and dividers.

var(--clbr-color-border-brand)

Brand-tinted border. A decorative brand flourish (e.g. interactive cards, code blocks).

var(--clbr-color-border-subtle)

Low-contrast border. Use where the border should recede visually.

Interactive

var(--clbr-color-interactive-default)

Default interactive color. Use for links and primary actionable elements in their resting state.

var(--clbr-color-interactive-visited)

Visited interactive color for links the user has already followed. Inherits the default interactive color.

var(--clbr-color-interactive-hover)

Hover state color for interactive elements.

var(--clbr-color-interactive-focus)

Focus indicator color. Use for focus rings and keyboard-focus outlines on any interactive element.

var(--clbr-color-interactive-active)

Active (pressed) state color for interactive elements.

var(--clbr-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(--clbr-color-interactive-neutral-visited)

Visited state color for neutral interactive elements. Inherits the default neutral interactive color.

var(--clbr-color-interactive-neutral-hover)

Hover state color for neutral interactive elements.

var(--clbr-color-interactive-neutral-focus)

Focus state for neutral interactive elements. Inherits the standard interactive focus color for consistency across element types.

var(--clbr-color-interactive-neutral-active)

Active (pressed) state color for neutral interactive elements.

var(--clbr-color-interactive-prose-default)

Inline link color for prose. Pairs with foreground.prose. Tuned for sufficient contrast against the softer prose text color.

var(--clbr-color-interactive-prose-visited)

Visited inline prose link color.

var(--clbr-color-interactive-prose-hover)

Hover state color for prose links.

var(--clbr-color-interactive-prose-hover-decoration)

Underline color for prose links on hover.

var(--clbr-color-interactive-prose-focus)

Focus state color for prose links.

var(--clbr-color-interactive-prose-active)

Active (pressed) state color for prose links.

var(--clbr-color-interactive-prose-active-decoration)

Underline color for prose links during active (pressed) state.

Status

var(--clbr-color-status-error-default)

Error status color. Use for foreground content (text, icons) and borders conveying failure or destructive action.

var(--clbr-color-status-error-subtle)

Subtle error background. Use as a fill behind error messages.

var(--clbr-color-status-info-default)

Informational status color. Use for foreground content (text, icons) and borders conveying information or neutral notices.

var(--clbr-color-status-info-subtle)

Subtle info background. Use as a fill behind info messages.

var(--clbr-color-status-success-default)

Success status color. Use for foreground content (text, icons) and borders conveying positive outcomes.

var(--clbr-color-status-success-subtle)

Subtle success background. Use as a fill behind success messages.

var(--clbr-color-status-warning-default)

Warning status color. Use for foreground content (text, icons) and borders conveying caution.

var(--clbr-color-status-warning-subtle)

Subtle warning background. Use as a fill behind warning messages.

Base16

var(--clbr-color-base16-00)

Base16 palette slot 00. Default background for code blocks and syntax-highlighted regions.

var(--clbr-color-base16-01)

Base16 palette slot 01. Lighter background variant (panels, gutters in code views).

var(--clbr-color-base16-02)

Base16 palette slot 02. Selection background.

var(--clbr-color-base16-03)

Base16 palette slot 03. Comments, invisibles, and line highlights.

var(--clbr-color-base16-04)

Base16 palette slot 04. Dark foreground for status bars and chrome around code blocks.

var(--clbr-color-base16-05)

Base16 palette slot 05. Default foreground color for code text.

var(--clbr-color-base16-06)

Base16 palette slot 06. Light foreground variant for emphasised tokens.

var(--clbr-color-base16-07)

Base16 palette slot 07. Light background variant.

var(--clbr-color-base16-08)

Base16 palette slot 08. Variables, errors, and deletions.

var(--clbr-color-base16-09)

Base16 palette slot 09. Integers, booleans, constants, and numeric literals.

var(--clbr-color-base16-0a)

Base16 palette slot 0a. Classes, search highlight backgrounds.

var(--clbr-color-base16-0b)

Base16 palette slot 0b. Strings, additions, and inherited colors.

var(--clbr-color-base16-0c)

Base16 palette slot 0c. Regular expressions and escape characters.

var(--clbr-color-base16-0d)

Base16 palette slot 0d. Functions, methods, and headings.

var(--clbr-color-base16-0e)

Base16 palette slot 0e. Keywords, storage, and language directives.

var(--clbr-color-base16-0f)

Base16 palette slot 0f. Deprecated, opening/closing tags, and embedded language markers.

Avatar

var(--clbr-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.

var(--clbr-color-avatar-01)

Avatar palette slot 01.

var(--clbr-color-avatar-02)

Avatar palette slot 02.

var(--clbr-color-avatar-03)

Avatar palette slot 03.

var(--clbr-color-avatar-04)

Avatar palette slot 04.

var(--clbr-color-avatar-05)

Avatar palette slot 05.

var(--clbr-color-avatar-06)

Avatar palette slot 06.

var(--clbr-color-avatar-07)

Avatar palette slot 07.

var(--clbr-color-avatar-08)

Avatar palette slot 08.

var(--clbr-color-avatar-09)

Avatar palette slot 09.