Lumotia/docs/release/v0.3-tactile-quietware.md

Lumotia v0.3 — Tactile Quietware

Calm enough for overloaded brains, structured enough to recover thoughts, tactile enough to feel like a local desktop tool rather than SaaS.

The v0.3 release reframes Lumotia around one thesis: a low-cognitive-load capture instrument. Built on the WCAG 2.2 + W3C COGA + NN/G evidence base, validated against the four HMRC accessibility personas that map most directly onto a dictation-first desktop tool.

This document is the single source of truth for v0.3. Phase log, regression diary, palette spec and font stack all live here.

---

Source brief

Locked 2026-05-15 from Jake's design brief and three rounds of capture-pipeline iteration.

• Palette: inputs/inbox/2026-05-15-lumotia-colour-layout-changes.md plus the colour-palette refinements at inputs/inbox/2026-05-15-re-lumotia-v03-renders-revised-palette-typography-.md.
• Personas: HMRC Virtual Empathy Hub, eight personas at https://personas-prototype.herokuapp.com/.
• Accessibility tools: DfE manual at https://accessibility.education.gov.uk/tools-testing/tools.

Rule set

The five rules every v0.3 PR has to clear.

Rule	Meaning
Texture = atmosphere	Static global grain. No per-panel noise. No motion. Default 6%, slider 5 to 8% in advanced.
Colour = status	Brand palette IS the semantic palette. Brand chroma earns its keep by signalling state. Decorative colour is forbidden.
Layout = calm	Every page uses the same skeleton. Files, Tasks, History and Dictation must not invent their own structure.
Motion = feedback only	Animation only for recording, loading, success and failure. Honour prefers-reduced-motion at root.
Settings = progressive disclosure	One sectional tab visible at a time. Eight tabs. No long scroll.

---

Palette

Strict 90-degree square colour harmony pegged at cobalt blue. Locked 2026-05-15.

Cobalt blue #0047AB is the peg. The other three semantic roles sit at exactly 90, 180 and 270 degrees from cobalt on the colour wheel:

Hue offset from cobalt	Hue value	Role	Visual character
0deg	215deg	--info	Cobalt blue
+90deg	305deg	--danger	Magenta-pink
+180deg	35deg	--caution	Orange-amber
+270deg	125deg	--success	Yellow-green

Saturation locked at 100%. Lightness adjusted per role to clear WCAG AA 4.5:1 on the relevant background. Yellow and green are perceptually brighter than blue and magenta at the same numeric L, so caution and success use darker L values in light mode. This is perceptual-lightness compensation, not a break from the square geometry.

Light mode

Cobalt literal on cream paper. Other roles match cobalt's saturation; lightness shifts per role for AA.

Token	Hex	Hue	L	Contrast on #FBF8F2
--color-bg	#FBF8F2	—	—	Base
--color-text	#1D1B18	—	—	14.43 AAA
--color-info	#0047AB	215deg	34%	7.96 AAA
--color-danger	#AB009C	305deg	34%	6.17 AAA
--color-caution	#A76200	35deg	33%	4.51 AA
--color-success	#00850B	125deg	26%	4.54 AA

Caution remains a fill-only convention on cream. Even at L=33%, an amber against cream sits close to the AA floor. Pill backgrounds, dots, left-border accents and icons take --color-caution. Foreground text inside a caution-coloured pill stays --color-text. This matches Material, GOV.UK and IBM Carbon practice and keeps a single token per role intact.

Dark mode

Lifted Coffee Bean base. Same four hues, lightness lifted for AA.

Token	Hex	Hue	L	Contrast on #2A1620
--color-bg	#2A1620	—	—	Base
--color-text	#F3EFE7	—	—	13.85 AAA
--color-info	#247FFF	215deg	57%	4.50 AA
--color-danger	#EC00D8	305deg	46%	4.50 AA
--color-caution	#C07000	35deg	38%	4.50 AA
--color-success	#00AB0E	125deg	34%	5.54 AA

High contrast mode

Same four hues retained so role recognition does not flip between modes. Saturation 80%, lightness 70%.

Token	Hex	Contrast on black
--color-bg	#000000	Base
--color-text	#FFFFFF	21.00 AAA
--color-info	#75A8F0	8.62 AAA
--color-danger	#F075E5	8.38 AAA
--color-caution	#F0BD75	12.24 AAA
--color-success	#75F080	14.53 AAA

No texture in high-contrast mode. No translucent overlays.

---

Typography stack (V4 pairing, locked 2026-05-15)

Three production fonts. Self-hosted as WOFF2. No CDN dependency.

Role	Font	Licence	Used for
Body and UI	Work Sans (variable)	OFL	Headers, labels, controls, sidebar, body, transcript surface
Brand moments	Young Serif	OFL	Wordmark, splash, empty-state hook copy, About modal
Mono	JetBrains Mono	Apache 2.0	Logs, model IDs, file paths, hotkey strings

Atkinson Hyperlegible Next and OpenDyslexic stay as opt-in accessibility fonts via Settings. Archivo, Lexend and Instrument Serif from v0.2 stay shipped during v0.3 transition; future release may remove them after persona testing.

---

Persona test gates

Each phase must pass these four manual gates before merge. Tools and tasks from the DfE manual.

Persona	Condition simulated	Primary risk for Lumotia	Gate
Pawel	Autistic	Sensory load, predictability, motion sensitivity	Empty states speak. No surprise motion. Same skeleton on every page.
Simone	Dyslexic	Transcript readability, dense paragraphs	Transcript body uses Work Sans at 16px minimum, line-height ≥ 1.6, comfortable measure.
Chris	Rheumatoid arthritis	Click target size, keyboard fallback for every action	All interactive targets ≥ 44 x 44 px. Every action reachable by keyboard with visible focus ring.
Ron	Older user, multiple conditions	Combined: vision + cognitive + motor	All three of the above hold simultaneously.

Medium-priority personas (Claudia magnifier, Saleem deaf) get explicit checks at Phase 5. Lower-priority personas (Ashleigh screen reader, Helena dyscalculia) get checks at v0.4.

---

Phase 0 — Accessibility tools checklist

Manual gov.uk DfE tools applied to every v0.3 phase before merge. Tools that map onto a Tauri webview tested via the same browser-preview surface already shipped in v0.2.

• Contrast Checker. All palette pairs verified against WCAG AA. Annotated in the relevant phase commit message.
• axe DevTools. Run on every page after the phase migrates it.
• Resize Text. 200% zoom does not break any layout.
• Text Spacing. Increased letter, word, line spacing per WCAG 1.4.12 does not clip content.
• Target Size. All interactive targets ≥ 44 x 44 px (WCAG 2.5.8).
• HeadingsMap. Settings sectional refactor preserves a sensible h1 → h6 hierarchy.
• Blur. Smoke check that primary actions remain legible under simulated low vision.
• Screen reader smoke test. NVDA or Orca on the Settings page after Phase 3.

A future-Phase CI step will automate axe-core + contrast checks. Out of scope for v0.3 per Jake's 2026-05-15 decision.

---

Phase plan

Each phase ships as its own PR. Each is flag-gated by html[data-design="quietware"]. The current v0.2 user-facing surface is unaffected until Phase 6 promotes quietware to the default.

Phase 1 — Tokens. (this PR)

• New file src/design-system/v0.3-quietware-tokens.css with three palette scopes (dark, light, high-contrast).
• Self-hosted Work Sans (variable), Work Sans Italic (variable), Young Serif (static) at src/fonts/.
• Import wired in src/app.css directly after the tailwind import. Inert until data-design="quietware" is present on <html>.
• No component changes. No behavioural changes.

Phase 2 — Build flag wiring.

• VITE_LUMOTIA_QUIETWARE=1 build-time env var sets data-design="quietware" on <html> via src/routes/+layout.svelte.
• Manual override path stays: dev tools, or a Settings toggle gated behind the same flag.

Phase 3 — Status grammar primitives.

• LumotiaStatusPill, LumotiaNotice with icon + label + body + actions.
• Caution is fill-only across both. Foreground text uses --color-text.
• Component preview added to src/routes/design-system-v2/.

Phase 4 — Settings sectional refactor.

• Split the 2 791 LOC SettingsPage.svelte across eight tabs: Start Here, Models, Output, Vocabulary, Tasks, Accessibility, Privacy, Advanced.
• Texture-opacity slider lives in Accessibility. Range 0.05 to 0.08. Default 0.06.
• High-contrast toggle in Accessibility. Toggle overrides system prefers-contrast query when set.
• One section visible at a time. No long-scroll.

Phase 5 — Critical-path simplification.

• Dictation page: header + transcript surface + action rail + empty state. No cockpit furniture.
• Files, Tasks, History migrated to the shared page skeleton (left nav, header, optional toolbar, primary work surface, optional right drawer, status row).
• Empty states speak on all four pages.
• Persona-test gates for Pawel, Simone, Chris, Ron at this phase.

Phase 6 — Icon and wordmark integration.

• Real Lumotia wordmark + mark lifted from brand-proposal v1 colophon. Replaces the placeholder swirl.
• Surfaces: window icon (.ico, .icns, multi-size .png), splash, About modal, empty-state anchor, status-pill leading glyph for "Ready".
• Removes any remaining Magnotia / Wyrdnote / Kon-era assets.

Phase 7 — Motion audit. (final v0.3 polish)

• Inventory every animation, transition and decorative motion currently in the app.
• Keep: recording-active heartbeat, loading spinner, success / failure feedback.
• Strip: decorative pulse, animated background, sliding panels, attention shimmer.
• prefers-reduced-motion reducer set at the root selector for quietware (already in tokens CSS).

Phase 8 — Promote to default. (post-release decision)

• Flip <html data-design="quietware"> to be the default; remove the flag.
• Either lands as a major release (v1.0) or stays opt-in indefinitely.
• This decision is deferred to after Phase 6 user testing.

---

Phase log

Phase 1 — Tokens. Landed 2026-05-15.

• src/design-system/v0.3-quietware-tokens.css written. 4.0 KB.
• Three WOFF2 fonts added at src/fonts/: work-sans-variable.woff2, work-sans-italic-variable.woff2, young-serif.woff2. 287 KB total.
• src/app.css imports the new tokens file directly after @import "tailwindcss".
• Inert without data-design="quietware" on <html>. v0.2 surface unaffected.
• Verified by visual inspection. Manual activation via dev tools toggling the attribute.

---

Regression diary

Empty. Update inline as findings emerge per phase.

---

References

• Source brief: inputs/inbox/2026-05-15-lumotia-colour-layout-changes.md.
• Palette refinement round 1: inputs/inbox/2026-05-15-re-lumotia-v03-renders-revised-palette-typography-.md.
• Palette refinement round 2 (cobalt-square peg): chat decision 2026-05-15, captured in this doc.
• W3C COGA: https://www.w3.org/TR/coga-usable/.
• WCAG 2.2 Understanding docs: https://www.w3.org/WAI/WCAG22/Understanding/.
• HMRC accessibility personas: https://personas-prototype.herokuapp.com/.
• DfE accessibility tools manual: https://accessibility.education.gov.uk/tools-testing/tools.
• v0.2 release doc: docs/release/v0.2-frontend-overhaul.md (predecessor; reference patterns).