Lucas WintherandClaude Opus 5.5
0ece4b3a2a
Root AGENTS.md is now the single source of truth for coding agents; CLAUDE.md, GEMINI.md and docs/CLAUDE.md are pointers. The product spec moves from docs/CLAUDE.md to PRODUCT.md, DESIGN.md records the shipped visual system, and docs/PERMISSIONS.md defines agent permission tiers rendered to .claude/, .codex/ and .gemini/. Adds docs/specs/ and docs/plans/, logs issues noticed (not fixed) in WorkBreakdown.md. Co-Authored-By: Claude Opus 5.5 <[email protected]>
33 lines
1.8 KiB
Markdown
33 lines
1.8 KiB
Markdown
# Design
|
||
|
||
Derived from the shipped `src/index.css` (single stylesheet, plain CSS, no framework). Describes what
|
||
exists, not an aspiration. Update in the same commit as visual changes.
|
||
|
||
## Foundations
|
||
|
||
- **Theme:** dark only. `:root` sets `color: #e8e8e8; background-color: #16181d` (also the PWA
|
||
`theme_color`). `color-scheme: light dark` is declared but there is no light palette.
|
||
- **Tokens (`:root`):** `--panel #1f232b` · `--border #343a46` · `--accent #7aa2f7` · `--muted #9aa3b2`.
|
||
Everything else is a hard-coded hex.
|
||
- **Semantic colours in use (hard-coded):** success/ready text `#9ad6ae` (bg `#1d2b23`, border `#3d6b4f`);
|
||
error text `#f2b8b5` (bg `#2a1c1e`, border `#8b3a3a`); live/recording `#e0605e`; raised surfaces
|
||
`#262b34` / `#232a38`.
|
||
- **Type:** `Inter, system-ui, …` stack — Inter is not loaded, so it renders in the system font unless
|
||
installed locally. Body line-height 1.5; `h1` 2.2rem / 1.15. Any webfont must be self-hosted (COEP,
|
||
see AGENTS.md).
|
||
- **Layout:** single centred column, `.app { max-width: 720px; padding: 2.5rem 1.25rem 3rem; gap: 1.5rem }`,
|
||
`body { min-width: 320px }`.
|
||
- **Radius:** 8px for controls (most common); 10–14px for panels/cards; 999px for pills/badges.
|
||
- **Motion:** `0.15s` colour/border transitions; `pulse` (live dot) and `blink` (cursor) animations,
|
||
disabled under `prefers-reduced-motion`.
|
||
|
||
## Components
|
||
|
||
One BEM-ish class block per React component in `src/components/` (`.model-picker`, `.dropzone`,
|
||
`.live-controls`, `.engine-toggle`, `.auth-panel`, `.update-toast`, …), with modifier classes like
|
||
`-selected`, `-active`, `-disabled`. Interactive states use `:hover:enabled` and `:focus-visible`.
|
||
`.visually-hidden` exists for screen-reader-only text.
|
||
|
||
TODO(maintainer): confirm whether the dark-only theme is intentional, and whether hard-coded semantic
|
||
colours should become tokens.
|