Design System

Beacon is a brand spoke of the ESA Ecology design system. The hub was itself ported from Beacon's Angular library, so Beacon barely diverges — it inherits Ecology's component set and structure, then re-points the handful of semantic tokens that differ (true teal, warm grays, compact form sizes). 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 Beacon 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="beacon">    <!-- DocsLayout / BaseLayout -->
  @esa/tokens          primitives + default (teal) semantics
  theme-beacon.css     re-points the deltas → true teal + warm grays

Foundations

Color Typography Spacing Radius Iconography

Form Inputs

Text Textarea Checkbox Toggle Select Button toggle Tag Filter Search select Date picker

Actions

Button Icon button

Tabs Dropdown

Overlays