Cool counterweight. Anchor #0ABAB5 at step 500. Used for data visualization, supporting UI, and illustration accents — never for success (success owns green). Consumed through the --color-accent-* aliases.
The cool supporting voice. Completes the three-series data palette (iris · coral · teal) and balances coral's warmth wherever both appear.
Symmetric 5+5 around the brand anchor at 500.
Components consume these — not raw teal-*.
--color-tertiary: var(--color-teal-500); --color-tertiary-hover: var(--color-teal-600); --color-tertiary-surface: var(--color-teal-50); --color-on-tertiary: var(--color-teal-950);
The three brand ramps together carry categorical data without competing for attention.
Teal-50 surface with teal-800 ink for soft categorical panels.
iris, coral, and teal sit side-by-side without color collision.
teal-950 with teal-200 stays calm in dark mode.
