Skip to main content

Design system & Widgetbook

The design_system package is the single source of UI truth — tokens → theme → atoms → molecules → templates — and is model-agnostic (NO client_sdk dependency). Its live component catalog is the Widgetbook, which is what the portal's top-level Design System section embeds (/design_system/).

The package (packages/design_system/lib/src/)​

  • tokens/ — the one token source: color_tokens, typography_tokens, spacing_tokens, radius_tokens, elevation_tokens, motion_tokens, icon_tokens, breakpoints. Nothing hard-codes a value outside these.
  • theme/ — DsTheme: dark default (light toggle), split type (Bricolage Grotesque display / Atkinson Hyperlegible body), an a11y floor baked into every atom.
  • atoms/ → molecules/ → templates/ — composition tiers (e.g. DsEmojiChip atom, DsEmojiPicker molecule, DsHeroBand/DsHeroScaffold templates), plus graphics/ (e.g. DsAuroraSky) and components/ / data/.
  • Constraints (load-bearing): model-agnostic, one token source, a11y floor. See the design system decisions.

packages/design_system/gallery/ is a Widgetbook app — the interactive catalog of every component across its states (light/dark, knobs). It's built to web and embedded in this portal at /design_system/; the portal's Design System navbar section is the page-by-page drill-down over the same tree. Components live under Widgetbook in their tier (Foundations / Atoms / Molecules / Templates / Graphics).