feat: design tokens, theme axes, and bundled fonts #81

Merged

manlycucumber merged 1 commit from feat/design-tokens into develop

2026-07-06 20:47:24 +00:00

manlycucumber commented

2026-07-06 20:46:31 +00:00

(Migrated from github.com)

Foundation for the v0.2.0 interface — the design system the desktop Portal shell (PR B) is built on. Realises the LOCKED direction in docs/design/interface-direction.md.

What lands

src/lib/styles/tokens.css — the single home for colour & type. Primitive palette → semantic role tokens, and the three orthogonal axes on <html>:
- data-theme — clubhouse (Meadow reserved for v1.0.0)
- data-lit — the six liturgical colours (white/red/green/violet/black/rose), each with an AA-safe --on-lit text partner for content sitting on the wallpaper
- data-tier — seedling/explorer/scholar → a reading --type-scale (chrome stays fixed)
base.css — minimal reset + one visible :focus-visible system.
Bundled fonts — Atkinson Hyperlegible (body/UI) + Press Start 2P (retro display), self-hosted woff2 subsets in static/fonts/, zero network. Both OFL, recorded in CREDITS.md.
Anti-flash bootstrap in app.html applies saved theme + reading level before first paint.
guard:colour — new ci step; fails on any brand/neutral colour written outside tokens.css (component styles must use var(--…)).

Verification (all green locally)

pnpm check · pnpm lint · pnpm guard:colour · pnpm build · guard:external · guard:content · guard:offline · pnpm test:unit (31 passed).

Advances epics #72 (design tokens), #73 (Clubhouse theme), #78 (bundled fonts). The shell that consumes these tokens follows in PR B.

Foundation for the **v0.2.0 interface** — the design system the desktop Portal shell (PR B) is built on. Realises the LOCKED direction in `docs/design/interface-direction.md`. ## What lands - **`src/lib/styles/tokens.css`** — the single home for colour & type. Primitive palette → semantic role tokens, and the **three orthogonal axes** on `<html>`: - `data-theme` — `clubhouse` (Meadow reserved for v1.0.0) - `data-lit` — the six liturgical colours (`white/red/green/violet/black/rose`), each with an **AA-safe `--on-lit`** text partner for content sitting on the wallpaper - `data-tier` — `seedling/explorer/scholar` → a reading `--type-scale` (chrome stays fixed) - **`base.css`** — minimal reset + one visible `:focus-visible` system. - **Bundled fonts** — Atkinson Hyperlegible (body/UI) + Press Start 2P (retro display), self-hosted woff2 subsets in `static/fonts/`, **zero network**. Both OFL, recorded in `CREDITS.md`. - **Anti-flash** bootstrap in `app.html` applies saved theme + reading level before first paint. - **`guard:colour`** — new ci step; fails on any brand/neutral colour written outside `tokens.css` (component styles must use `var(--…)`). ## Verification (all green locally) `pnpm check` · `pnpm lint` · `pnpm guard:colour` · `pnpm build` · `guard:external` · `guard:content` · `guard:offline` · `pnpm test:unit` (31 passed). Advances epics #72 (design tokens), #73 (Clubhouse theme), #78 (bundled fonts). The shell that consumes these tokens follows in PR B.