Design system

CBFish is a brand spoke of the ESA Ecology design system. It inherits Ecology's component set and structure, then re-skins one layer — navy blue + IBM Plex — by overriding semantic tokens. 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 CBFish 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="cb-fish">   <!-- BaseLayout / DocsLayout -->
  @esa/tokens          primitives + default (teal) semantics
  theme-cb-fish.css    re-points semantics → navy + IBM Plex

Foundations

Color Typography Spacing Radius

Core

Button

Forms

Text field Textarea Select Checkbox Radio group Switch toggle

Display

Badge Alert box Pill