Design System
Puget Sound Info is a brand spoke of the ESA Ecology design system. It inherits Ecology's component set and structure, then re-points the handful of semantic tokens that differ (brand color, neutrals, form sizing). This documentation restates that brand layer and shows the inherited components wearing it.
The spoke model
Three token tiers cascade. Primitives (raw color ramps, the spacing and
radius scales) never move. Semantic roles (--color-primary,
--color-border, --font-sans…) are what components actually read —
and what the Puget Sound Info theme re-points. Component tokens fine-tune
individual parts. Because every esa-* component reads only the semantic layer,
overriding that one layer re-skins the entire kit with no forks.
<html data-theme="ps-info"> <!-- DocsLayout / BaseLayout -->
@esa/tokens primitives + default (teal) semantics
theme-ps-info.css re-points the deltas → Puget Sound Info's brand