Design system
Tokens, components, and accessibility rules for Transcriber
Colour tokens
All text tokens meet WCAG 2.2 AA (≥ 4.5:1) on surface backgrounds. Glow never replaces contrast.
Typography
Heading 1 — Transcriber
Heading 2 — Clinical note
Panel label
Body text uses system UI fonts for fast first paint (no webfont download).
Hint / muted supporting copy.
Inline code for IDs and shortcuts.
Status & feedback
Speech engine ready
Warming up…
Unreachable
clinician.demo
Transcript saved.
Speech server busy (2/2), try again.
Metformin
Penicillin
Chest pain
Empty & loading
🎙️
No speech yet
Start recording to see live text appear here.
Skeletons reserve space to prevent layout shift. Prefer text status over spinners alone.
Record states
State is also announced in text (phase label + aria-pressed). Animation is never the only cue.
Accessibility & performance
- WCAG 2.2 AA contrast on text and controls; focus ring uses
--focus.
prefers-reduced-motion plus a manual Motion toggle.- Skip link, keyboard shortcuts (⌘K, Ctrl+Shift+R), live regions for finals only.
- i18n-ready string table in
app.js (STR / t()).
- No webfonts or heavy UI libraries — system fonts, CSS tokens, vanilla JS.
- Reserved heights on banners, wave, transcript, and note to limit CLS.
- Calm clinical aesthetic: soft glass, restrained glow, no dark patterns.