a1f3f3f134
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>
68 lines
4.0 KiB
Markdown
68 lines
4.0 KiB
Markdown
---
|
|
name: Design system (reference, not live)
|
|
type: architecture-map-page
|
|
slice: 01-frontend
|
|
last_verified: 2026/05/09
|
|
---
|
|
|
|
# Design system
|
|
|
|
> **Where you are:** [Architecture map](../README.md) → [Frontend](README.md) → 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
|
|
|
|
- [App shell and styling](app-shell-and-styling.md). The runtime `app.css` that this folder mirrors.
|
|
- [Components](components.md). The Svelte versions of the JSX kits.
|