Styling, theming and code style

The full UI spec (tokens, component semantics, three states, copy, anti-patterns) lives in the design spec; machine checks run in scripts/lint-design.mjs via pnpm lint. This page is a quick reference.

Styling

Use shadcn-vue semantic colors (bg-primary, text-muted-foreground, …); never hard-code color values. Tokens like text-success / text-warning / text-info and bg-console already exist.

At most two surface levels per screen (base → card); no card-in-card; subgroups use a divider + title + spacing.
Borders are a 1px hairline (border); do not mix in border-border; rounded-xl is only for overlays.
bg-console must be paired with text-console-foreground*, or text is unreadable on the dark background.
The only focus-ring expression: focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/60.
Wrap every tool-page module in @/components/tool/Panel; never expose a module or nest a card inside a Panel.

Icons

Only @lucide/vue (lucide-vue-next is deprecated — do not add it).

Code style

prettier: single quotes, 100 columns, es5 trailing commas. Before committing:

pnpm format

src/components/ui/** is generated by the shadcn-vue CLI: you may change styles, but not structure or logic.

Theming

Accents: six available in settings; adding a custom one requires syncing three places — the accent class in assets/index.css → ACCENTS in core/theme → the anti-flash script in index.html.
Default accent / theme: edit DEFAULT_ACCENT / DEFAULT_THEME in core/theme/index.ts (pnpm scaffold can also set these interactively).
Root font size: three steps (small 13 / normal 14 / large 15) that scale the whole UI; the scale table is documented in assets/index.css.
Dark base: dark by default (deep blue-gray), with light maintained alongside; when changing the palette, check both the :root / .dark blocks in index.css and NATIVE_BG in core/theme (the native window background).