gramps
b7ab169718
DESIGN.md, elements only (no layout): the dark navy surface scale, the single-role accent rule (blue = interactive, red = on-air/recording only, amber = game audio + Super Chat), and the Inter/JetBrains Mono type split. Sourced from the Google Stitch HTML export of the proposed edit screen, 2026-10-26. Not yet reconciled against Themes/Controls.xaml by design - that comparison is deferred until the redesign direction is locked.
61 lines
2.8 KiB
Markdown
61 lines
2.8 KiB
Markdown
# 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.
|
|
|
|
## 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.
|