Color
The semantic color roles every esa-* component reads. This theme re-points
them at the brand — swatches paint from their token and the values below are read live
from the active theme, so this page always reflects the real skin, not hub defaults.
Primitive ramps
Raw brand material this spoke defines. Semantic roles below re-point onto these.
Blue — the PSP key color (800 = brand #0a3b5c, 600 = prod link blue)
50
100
200
300
400
500
600
700
800
900
950
Orange — the PSP accent (500 = brand #ef892e; 700 = text-safe)
50
100
200
300
400
500
600
700
800
Neutrals — a very subtle blue cast
0
50
100
200
300
400
500
600
700
800
900
950
1000
App chrome — value-layered, main < rail < bar
surface
rail
bar
Vital-Sign goal hues — exact prod values, data-encoding only
population
quality
species
habitat
water
Semantic roles
What components actually reference. Re-point these in theme-*.css and the whole kit re-skins with no forks.
Brand
The spoke identity. Everything interactive chains off --color-primary.
--color-primary — Brand anchor — buttons, links, focus rings, active states. --color-primary-hover — --color-primary-active — --color-primary-subtle — Brand-tinted surface — selected rows, callout tiles, pills. --color-primary-border — Soft brand border, pairs with primary-subtle. --color-secondary — --color-secondary-hover — --color-accent — Accent role — hub default is orange; a spoke may re-point. --color-accent-hover — AI
Reserved tint for AI-authored surfaces and actions.
--color-ai — --color-ai-hover — --color-ai-subtle — Surface
--color-background — Page background. --color-surface — Card / panel surface. --color-surface-elevated — --color-surface-sunken — --color-surface-inverse — Darkest chrome — top app bars, dark nav. --color-surface-inverse-hover — Text
--color-text-primary — --color-text-secondary — --color-text-tertiary — --color-text-muted — --color-text-inverse — --color-text-link — --color-text-link-hover — Border
--color-border — --color-border-light — --color-border-strong — --color-border-focus — Focus ring — equals --color-primary. Feedback
Status palette. Each also has a -subtle (fill) and -border variant.
--color-info — --color-success — --color-warning — --color-danger — Disabled
--color-disabled-bg — --color-disabled-text — --color-disabled-border —