---
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 lumotia-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. (Lumotia by CORBEL.)
  - `SKILL.md`. lumotia-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 lumotia-design skill (which runs from this repo) can read ground-truth Svelte source from `lumotia-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.