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(--sg-brand);

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

Flutter — planned

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

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 jade; the neutrals are a warm ivory family. Brass (the former orange) survives as a secondary accent.

Stoa Games

Teach the hard games — flagship American Mahjong.

Logo sizes

sm · 24 · faviconmd · 40 · app barlg · 64 · headerxl · 96 · hero

Color

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

Brand

Brand jade

#14654E

Jade light

#3E9E7F

Jade deep

#0E4A39

Brass accent

#C6971F · demoted orange

Brand gradient

135° jade→ivory

Semantic

Success

#22C55E

Warning

#F5B042

Danger

#EF4444

Info

#3B82F6

Surfaces & text (current theme)

bg-base

--sg-bg-base

bg-surface

--sg-bg-surface

bg-elevated

--sg-bg-elevated

text-primary

--sg-text-primary

text-muted

--sg-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

五萬東中發 ❀ ★ ♠ ♥ ♦ ♣Noto Sans TC subset · --sg-font-glyph · game-piece symbols only, 22 codepoints and no ASCII (#12)

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 / 500msease-spring for toggles