Files

T

Lucas WintherandClaude Opus 5.5 0ece4b3a2a Bootstrap agent-ready docs and permissions (D-036)

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]>

2026-10-29 19:51:30 +01:00

1.8 KiB

Raw Blame History

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.

1.8 KiB Raw Blame History Unescape Escape

Design

Foundations

Components

1.8 KiB

Raw Blame History