Introduction

The sg-* component library on the EPM Labs token foundation — brand orange + neutral grey, Clash Display headings, dark-default with a light theme. Tuned for an older, big-screen audience: comfortable sizing, large targets, AA contrast, visible focus.

IP-clean fixtures Every game fixture in these docs is a fictional placeholder. The NMJL card and any licensed card are never shown — see CLAUDE.md IP guardrails.

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).

Web — ships today

Tokens are CSS custom properties (--epmlabs-*, --sg-*) in tokens/. 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.

Flutter — planned

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.

Foundations

Brand, color, type, spacing, elevation, motion.

Atoms

Buttons, badges, inputs, toggles, avatars.

Molecules

Cards, tiles, stats, callouts.

Effects

Hero grid, noise grain, glow.

Organisms

Game hub, lessons, skill map, paywall, app shell.

Game Pieces

Playing cards, mahjong tiles, hands & melds.