15 hues × 11 shades = 165 tier-1 swatches,
plus every tier-2 semantic group. Click any swatch to copy its CSS variable. All values resolve live
via getComputedStyle, so the page reflects the current theme.
Legend
Click a swatch to copy var(--cg-<hue>-<shade>).
Hover to see the resolved hex value.
Dark mode swaps tier-2 semantics only; tier-1 hues remain stable.
Core palette
Every tier-1 hue across the 50-950 ramp. Never reference tier-1 tokens directly from component CSS.
gray
slate
zinc
stone
red
orange
amber
yellow
green
teal
cyan
blue
indigo
purple
pink
Action
Primary, secondary, and tertiary interactive surfaces — buttons, links, toggles.
Surface
Backgrounds, cards, containers, dividers — the elevation ladder.
Status
Success / warning / error / info feedback.
Chart
Categorical color ramp for data viz — adjacent slices stay distinct.
AI States
Confidence, streaming, insight types — unique to Cognivo.
Bias (Design Advisor)
Cognitive-bias category accents surfaced in bias cards.
On-Color Pairs
Foreground/background pairs with WCAG-validated contrast ratios.
Theme behavior
Tier-1 hue values are stable across themes. Tier-2 tokens swap to dark overrides when
data-theme="dark" is set on <html>. Toggle the theme in the
header — swatches recompute automatically via a MutationObserver.