Introduction
The sg-* component library on the EPM Labs token foundation — brand jade + warm ivory neutrals, Clash Display headings, dark-default with a light theme. Tuned for an older, big-screen audience: comfortable sizing, large targets, AA contrast, visible focus.
One system, two platforms
Stoa ships to the web (this marketing + app surface) and, in the build phase, to a Flutter app. The design system spans both — but not in the same way at every layer. This is the contract (see ADR-0008).
Tokens are --sg-* CSS custom properties in tokens/; a legacy alias window (in tokens/colors.css) resolves the old vendor-prefixed names while the consumer repos migrate. Components are the sg-* classes in css/components.css. Both are imported raw by the app prototypes and the marketing site as a git submodule — this docs site renders the very same files.
Tokens are the true cross-platform source: the same values emit CSS now and a Dart ThemeData later (via a Style Dictionary transform). Components are reimplemented as Flutter widgets on those shared tokens — not shared code. No Dart exists yet; the "Flutter (planned)" notes on each component name the widget and the tokens it will read.
| Layer | Web (now) | Flutter (planned) | Shared? |
|---|---|---|---|
| Tokens | CSS custom properties | Dart ThemeData | Yes — one source, two emits |
| Components | sg-* CSS classes | Stoa* widgets | No — per-platform, same tokens |
| Fixtures | Fictional placeholders only (IP guardrails) | Shared intent | |
Explore
The library, grouped by atomic level. Each page shows a live demo, the web usage, and the planned Flutter mapping.