← Admin

Design tokens

The S5 substrate (Cosmetic Design Notes #6/#17) — the single source for art direction. Everything below renders the live tokens from the app stylesheet, so this page always shows what ships. Direction: rich-but-muted, low-arousal, painterly — never arcade-y. Parent-only; nothing links here from any child surface.

Calm variant

One root class (calm on <html>) re-maps the same tokens: theme art recedes, glyph glow switches off, press micro-motion is removed, remaining transitions run slower, and the motion budget drops to 1. Reserved config key: calm_mode — wiring to the low-state flag ships in Wave 1 (#17). Nothing reads the key yet; this button only flips the class on this page for preview.

Motion budget

Max 2 concurrent animated elements (--motion-max-concurrent; calm: 1). Interaction feedback never exceeds --dur-gentle. Decorative motion, if it ever ships, uses --dur-drift + --ease-drift: slow, gentle, non-looping — no pulse, bounce, or shake. No motion of any kind inside the decoding area (the reading screen stays austere, constant #6). No keyframe animation exists in the stylesheet.

Tap a row to run its sample once. Tap the button to feel the press nudge.

--dur-press

--dur-quick

--dur-gentle

--dur-soft

--dur-drift

--ease-gentle

--ease-settle

--ease-drift

Palette — neutral (parent layer)

--bg --surface --surface-2 --line --line-strong --ink --ink-2 --muted --accent

Palette — status & direction

--tag-m --tag-a --tag-r --tag-u --tag-blank

--dir-up --dir-down --dir-same --activity-completed --activity-incomplete --activity-refused

Session palettes — a theme is a token map

Each block re-scopes the same --session-* + --session-btn-* variables. A future theme is exactly one more palette block over these variables (one shared SVG element set, recolored) — never new selectors on child-facing markup.

paper (default — no theme attribute)

讀

--session-bg --session-ink --session-ink-faint --session-zhuyin-color --session-tap-mark --session-tap-mark-edge --session-btn-* --session-panel-bg