Color
A confident green brand, warm neutrals that feel like paper rather than a screen, and a status palette tuned to be informative without ever feeling like an alarm. In Charter, color carries meaning — never decoration.
Brand — Pine
CA's familiar green, refined for screens. --green-600 is the
primary brand color; --green-700 is the text-safe variant on light surfaces.
Neutrals — Stone
Warmed with a whisper of green so the UI reads as calm paper, not clinical gray. Backgrounds, surfaces, borders, and text all draw from this ramp.
Status & semantic
Six meanings, each with a base (dots, icons), a soft tint (badge backgrounds), and an ink (text on the tint). This is the only place vivid color is allowed — and the one set a color-vision mode remaps, so these chips (and their hexes) swap live with the mode.
Semantic tokens in use
Components reference these aliases, never raw hex — so theming (light ⇄ dark) is a token swap, not a rewrite. Toggle the theme in the top bar to see them flip.
| Token | Role | Sample |
|---|---|---|
--bg | App background (paper) | |
--surface | Cards, panels, raised content | |
--border | Hairline dividers | |
--text | Primary text (ink) | |
--text-muted | Secondary text | |
--brand | Brand identity only — the CA mark & brand-voice flourishes. Never remapped. | |
--accent | Functional UI & data — buttons, controls, links, chart series. A color-vision mode may remap this. |