# haus video — Design System (Agent Instructions) This skill describes the visual design language for every `/video/` page. Each component, layout, and screen must follow the specs in the module files below. These describe *what the design looks like and which classes/tokens to use* — the styleguide (`../index.html`) is the live reference; these files are the spec. **Style:** Graphite desktop application — a native-app frame (titlebar menu bar, panels, statusbar), sharp square corners everywhere, layered grey surfaces, one blue accent for primary/active, and status colors reserved for meaning. This is a tool you install, not a site you visit. ## Before Writing Any Code 1. **Read [principles.md](principles.md) first — always.** The seven core rules (desktop-app feel, sharp corners, no log modals, `.future` marks, relative paths, …) govern every decision and override component-level instinct. 2. **Read every module that applies.** For an editor page read at minimum: `principles.md`, `shell.md`, `layout.md`, `colors.md`, `typography.md`, plus the component modules you touch. Do NOT write markup until they're loaded. 3. **Reuse the existing classes and CSS variables** in `../css/` — do not invent new tokens or re-declare colors. The three stylesheets are authoritative: `tokens.css` (variables), `shell.css` (chrome + shared components), `editor.css` (workspace, timeline, modals, queue). ## Critical Rules - **Use the CSS variables, never raw hex in component code.** Colors live in `tokens.css` as `--panel`, `--accent`, `--text`, etc. See [colors.md](colors.md). - **Sharp corners are non-negotiable.** A global reset zeroes `border-radius` on every element. The only exemption is inside `[data-live-stage]`. Never add radii. - **Every page wears the shell.** `.vshell` grid + `.titlebar` + (optional) `.statusbar`. Chrome interactions are wired by `shell.js` — no per-page JS. - **Authoring UI is desktop-only; read-mostly views are responsive.** Editors and timelines must never collapse to mobile. Galleries and the render queue stack. - **Logs and status live in persistent panels, never modals.** See principles §5. - **Every interactive element needs hover + active/selected + disabled states** — defined in the relevant module. - **Use semantic HTML** — real `