The palette is generated from a single source of truth and shipped as --ib-* CSS custom properties. Components consume semantic tokens (role-based, e.g. --ib-color-action-primary-bg); the primary scale is the raw brand ramp those semantics reference. See Design Tokens for the two-tier model.

Primary scale

--ib-palette-primary-50

--ib-palette-primary-100

--ib-palette-primary-200

--ib-palette-primary-300

--ib-palette-primary-400

--ib-palette-primary-500

--ib-palette-primary-600

--ib-palette-primary-700

--ib-palette-primary-800

--ib-palette-primary-900

--ib-palette-primary-1000

Surface

--ib-color-surface-canvas

--ib-color-surface-subtle

--ib-color-surface-input

--ib-color-surface-overlays

Text

--ib-color-text-primary

--ib-color-text-secondary

--ib-color-text-tertiary

--ib-color-text-link

--ib-color-text-inverse

Border

--ib-color-border-primary

--ib-color-border-secondary

Action

--ib-color-action-primary-bg

--ib-color-action-primary-text

--ib-color-action-critical-bg

--ib-color-action-secondary-hover

Status

--ib-color-status-info-bg

--ib-color-status-success-bg

--ib-color-status-warning-bg

--ib-color-status-critical-bg

Every swatch is filled directly from its CSS variable, so this page always reflects the current generated tokens — never hand-edited values.