Design System

Biochar Atlas is a brand spoke of the ESA Ecology design system. It inherits Ecology's component set and structure, then re-skins one layer — forest green + Public Sans — 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 Biochar theme re-points. Component tokens fine-tune individual parts. Because every esa-* component reads only the semantic layer, overriding that one layer under [data-theme="biochar"] re-skins the entire kit with no forks.

<html data-theme="biochar">   <!-- BaseLayout / DocsLayout -->
  @esa/tokens          primitives + default (teal) semantics
  theme-biochar.css    re-points semantics → forest green + Public Sans

Foundations

Color Typography Spacing Radius

Core

Button Icon

Forms

Text Field Select Checkbox Switch Toggle

Display

Badge Card Pill Alert Box Collapsible Progress Bar Empty State

Filters & Controls

Filter Dropdown Button Toggle Chip Group