Prototype library

Color

Navy blue replaces Ecology's teal; muted gold accents the app chrome. Values are verbatim from the CBFish Modernization Figma — primitive ramps feed the semantic roles components actually read.

Primitive ramps

Raw values. Blue is a --cbf-blue-* re-point ramp; gold was promoted to the hub (--color-gold-*). The neutral ramp is the brand-authoritative gray — see the note under Theming.

Blue — primary
50
200
500
600
700
950
Gold — accent
50
500
900
Gray — neutral
0
50
100
200
300
400
500
600
700
800
900

Semantic roles

What components reference. The CBFish theme re-points these off the ramps above — each swatch below renders live from its token, so it reflects exactly what ships.

--color-primary #1e5386 Brand navy. Buttons, links, focus rings chain off this.
--color-secondary #2770b2 Lighter navy for secondary emphasis.
--color-surface-inverse #13273e Deepest navy — the admin bar chrome.
--color-surface-sunken #f3f7fc Blue-tinted sunken surface — stat tiles, control pills.
--color-border #dcdcdc Hairline dividers (Figma Gray/200).
--color-text-muted #7c7c7c Secondary / meta text (Figma Gray/500).

Theming

One [data-theme="cb-fish"] block in theme-cb-fish.css overrides the semantic layer; primitives never move. Because the hub chains --color-text-link and the focus-ring tokens off --color-primary, re-pointing primary alone re-skins links and focus states too.

Neutral ramp — the full neutral chain (--color-text-primary, -secondary, -tertiary, -muted, and the borders) is re-pointed to the --cbf-gray-* ramp, so body text reads CBFish's warmer grays rather than the hub's cooler neutrals (text-primary is #3d3d3d, not #171717). Surfaces stay white; --color-surface-sunken is intentionally blue-tinted and sits outside this chain.