Files
Lumotia/docs/architecture-map/01-frontend/design-system.md
jars a1f3f3f134 docs: architecture map (initial 5-slice generation, 105 pages)
Five-slice navigable map of the entire codebase under
docs/architecture-map/. Each slice is a self-contained
breadcrumbed sub-tree:

  01-frontend (16)              Svelte/SvelteKit UI
  02-tauri-runtime (26)         src-tauri commands + lifecycle
  03-audio-transcription (16)   audio + transcription crates
  04-llm-formatting-mcp (19)    llm, ai-formatting, mcp, cloud
  05-core-storage-hotkey-build  core, storage, hotkey, workspace,
                          (26) CI, dev glue

Plus master README.md and data-flow-end-to-end.md tracing
audio bytes from microphone to FTS5 search to MCP read.

Generated by 5 parallel subagents on 2026/05/09 against
HEAD 3c47000. Each page has YAML frontmatter, file:line code
refs, sibling cross-links, plain-English summaries.

Aggregated debt surfaced (full lists in master README):
RB-08 macOS power assertion, schema head drift v14 vs v15,
VAD blocked on ort version conflict, streaming primitives
not wired into live.rs, no prompt versioning, MCP has no
auth, cloud-providers in-memory keystore, SettingsPage
2 484 LOC, commands/live.rs 1 737 LOC, dual theme system,
brand rename to Lumenote pending across the codebase.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-09 14:04:13 +01:00

4.0 KiB

name, type, slice, last_verified
name type slice last_verified
Design system (reference, not live) architecture-map-page 01-frontend 2026/05/09

Design system

Where you are: Architecture mapFrontend → Design system

Plain English summary. Reference material. The runtime styles live in src/app.css. Everything under src/design-system/ is brand documentation, preview pages, JSX UI kits, and ground truth source for the magnotia-design Claude skill. None of it is imported by the runtime SvelteKit app.

At a glance

  • Path: src/design-system/
  • Files:
    • README.md. Brand and content rules. (Magnotia by CORBEL.)
    • SKILL.md. magnotia-design skill manifest (user-invocable: true). The skill copies assets out and writes throwaway HTML or production code on demand.
    • colors_and_type.css. Mirror of the runtime @theme tokens for buildless preview pages. Intentional duplication, kept in sync by hand.
    • preview/. 20 buildless HTML spec cards.
    • ui_kits/. JSX recreations (DictationPage.jsx, OtherPages.jsx, Sidebar.jsx) plus an index.html and a README.

What's in here

colors_and_type.css

Mirrors src/app.css @font-face declarations and (typically) the @theme token block, with relative fonts/... URLs so preview HTML can render without going through Tailwind/Vite. The file's banner comment is explicit:

When app.css @theme changes, mirror the change here. There is no automated sync; intentional duplication keeps the preview pages buildless.

preview/ (20 HTML files)

Each renders one slice of the system:

  • Brand: brand-icons.html, brand-wordmark.html.
  • Colour: colors-accent.html, colors-semantic.html, colors-surfaces.html, colors-text.html, colors-zones.html.
  • Components: components-buttons.html, components-cards.html, components-empty-states.html, components-inputs.html, components-nav.html, components-toasts.html.
  • Spacing and motion: spacing-motion.html, spacing-radii.html, spacing-scale.html, spacing-shadows.html.
  • Type: type-body.html, type-headings.html, type-transcript-mono.html.

These are static. Open in any browser.

ui_kits/ (JSX, reference only)

Three .jsx files plus index.html and a README. Reproduce the desktop pages in JSX so prototypes can be built outside the Tauri shell. The README inside ui_kits explains how to use them. They are not imported anywhere from the SvelteKit app.

Brand language (from README.md)

  • Built for the noise allergic. Solarpunk-as-posture, AI-minimisation, ground truth + warmth.
  • Iconography: Lucide, 2 px stroke. 16 px nav, 20 px features, 24 px primary actions. Always paired with a label except OS titlebar controls.
  • Transparency + blur used sparingly: collapsed-sidebar tooltips, float window backdrop, accent-subtle 6% tint. No glassmorphism.

Why it lives in src/

The design system files sit under src/ so the magnotia-design skill (which runs from this repo) can read ground-truth Svelte source from magnotia-source/ (a sibling import). The runtime build does not include this folder; it is a reference root.

Watch outs

  • Tokens in colors_and_type.css and app.css @theme can drift. There is no CI check. When you change a token in one, change it in both.
  • ui_kits/ JSX is not used by the app. Treat it as documentation, not as a future framework migration plan. There is no plan to switch from Svelte to React.
  • Vite (with sveltekit() plugin) ignores .html files outside static/ and .jsx files outside imports. If anyone adds an import './design-system/...' somewhere, the build will start picking up reference material. Do not.
  • The skill is user invocable (SKILL.md). External agents may write into src/design-system/ based on user invocation. Treat the contents as agent-shaped, not human-only.

See also