# DESIGN.md — LlamaCasty visual design tokens (redesign exploration)

> Source: Google Stitch export, 2026-10-26, from the proposed edit-screen mockup. Colors and type
> only — no layout decisions are captured here. This is a design reference for the UX redesign
> in progress; it is not yet wired into the app's theme (`Themes/Controls.xaml`).

## Color

### Surfaces (dark navy scale, darkest to lightest)

| Token | Hex | Use |
|---|---|---|
| `background` | `#0b1326` | App window background |
| `surface-container-lowest` | `#060e20` | Deepest recess (scene strip background, canvas housing) |
| `surface-container-low` | `#131b2e` | Panel background (sidebars, headers) |
| `surface-container` | `#171f33` | Card / grouped-section background |
| `surface-container-high` | `#222a3d` | Hover state, input fields |
| `surface-container-highest` | `#2d3449` | Selected/active row background |
| `surface-bright` | `#31394d` | Lightest surface, rare use (strong hover) |
| `outline` | `#334155` | Borders, dividers |
| `outline-variant` | `#1e293b` | Subtle dividers, inactive VU meter segments |

### Text

| Token | Hex | Use |
|---|---|---|
| `on-surface` | `#dae2fd` | Primary text |
| `on-surface-variant` | `#94a3b8` | Secondary / label text |

### Accent — one role each, never mixed

| Token | Hex | Role |
|---|---|---|
| `tertiary` (electric blue) | `#38bdf8` | The one interactive accent: selection, focus, sliders, primary buttons, transform handles |
| `primary` (red) | `#ff5451` | **Reserved for on-air/recording state only** — LIVE badge, program border, End/Go Live |
| `primary-container` | `#b91a24` | Red pressed/hover state |
| `secondary` (amber) | `#ffb95f` | Game audio channel, Super Chat highlight |
| `secondary-container` | `#ee9800` | Amber pressed/hover state |
| `error` | `#ef4444` | Error states only (distinct from the on-air red) |

**Rule carried from the critique sessions:** red must mean "live or recording" and nothing else.
Don't reuse it for a Send button, a delete action, or any other control — that was the defect in
the first Stitch draft of the live screen.

## Typography

| Token | Family | Use |
|---|---|---|
| `sans` | Inter (400/500/600/700) | All UI text — labels, buttons, panel titles |
| `mono` | JetBrains Mono (500/600) | All numeric/telemetry values — bitrate, FPS, dB, coordinates, timers. Keeps digits from shifting width as values change. |

Icons: Material Symbols Outlined.

## Color roles (decided 2026-10-26)

- **Red `#ff5451`:** YouTube references, on-air/GO LIVE, and record only.
- **Attention orange `#ff8c3a`:** dropped packets, the live screen indicator, and blinking warning lights.
- **Amber `#ffb95f`:** game audio and Super Chat only.
- **`error` `#ef4444`:** unchanged for now; it sits close to the on-air red and may need revisiting.

## Open questions for the next pass

- These tokens have not been reconciled against the app's current WPF theme
  (`Themes/Controls.xaml`). That comparison should happen once the redesign direction is locked,
  not before — do not retrofit the current theme to these values yet.
- No elevation/shadow scale, corner-radius scale, or spacing scale has been captured yet. Add them
  here as they're decided, rather than letting them live only in Stitch exports.