Foundations

The design tokens every component reads — brand, color, type, spacing, elevation, motion. The true cross-platform layer: these values emit CSS today and a Dart ThemeData for Flutter later.

Web — ships today

color: var(--epmlabs-brand-orange);

CSS custom properties in tokens/, imported raw by both submodule consumers.

Flutter — planned

Theme.of(context).extension<StoaTokens>()!.brandOrange

The same token values emit a Dart ThemeData / ThemeExtension via a Style Dictionary transform (ADR-0008). One source, two outputs.

Brand

Stoa Games is a product in the Stoa family on the EPM Labs foundation. The accent is EPM brand orange; the neutrals are a true grey anchored on the brand grey.

Stoa Games

Teach the hard games — flagship American Mahjong.

Logo sizes

sm · 24 · favicon

md · 40 · app bar

lg · 64 · header

xl · 96 · hero

Color

Brand + semantic + surface tokens. Toggle the theme to see the light-mode set (AA-tuned).

Brand

Brand orange

#E36F1E · PMS 159

Orange light

#F0975A

Orange deep

#C85A12

Brand grey

#5F6062 · PMS 425

Brand gradient

135° orange→pale

Semantic

Success

#22C55E

Warning

#F5B042

Danger

#EF4444

Info

#3B82F6

Surfaces & text (current theme)

bg-base

--epmlabs-bg-base

bg-surface

--epmlabs-bg-surface

bg-elevated

--epmlabs-bg-elevated

text-primary

--epmlabs-text-primary

text-muted

--epmlabs-text-muted

Typography

Clash Display for headings, Inter for body, Instrument Serif for accents, JetBrains Mono for code. Major-third scale.

The hard games, taught wellClash Display · text-4xl / 36px · semibold

Charleston & the courtesy passClash Display · text-2xl / 24px · semibold

Reading the discardsClash Display · text-xl / 20px · medium

Body — count your tiles, pick a target hand, and keep it alive. Inter keeps long lessons legible at a comfortable base size.Inter · text-base · regular

"We teach you to play them well."Instrument Serif · italic · accents

jokers: 8 · flowers: 8 · wall: 152JetBrains Mono · data / code

Spacing & radius

8px base grid. Radii from 4px to 24px plus full.

space-2 · 8px

space-4 · 16px

space-6 · 24px

space-8 · 32px

space-12 · 48px

space-16 · 64px

Radius

sm · 4

md · 8

lg · 12

xl · 16

2xl · 24

Elevation

Four elevation shadows plus a brand glow for primary surfaces.

shadow-sm

shadow-md

shadow-lg

glow-brand

Motion

150–500ms durations, default + spring easings. Respects prefers-reduced-motion.

durations 150 / 200 / 300 / 500ms ease-spring for toggles