gramps
3239808a73
- LeftPanel: SCENE LAYERS header with layer count; per-type blue icons; properties header gear; layers list min/max height; properties placeholder; list and properties indent - SceneThumbnailStrip: names/hotkeys over the tile; PROGRAM badge with blinking red dot on the selected tile; orange border on selected and live tiles; fixed the element border override that hid the style border; reflag tiles on load - LiveScene is now set on go-live, record start, and live transitions (it was never assigned, so IsLive never fired) - Startup stages the scene named Starting - DESIGN.md: color roles (red = YouTube/on-air/record, orange #ff8c3a = attention, amber = game audio/Super Chat) - Staged live tile uses background art instead of the green LIVE placeholder Not pushed.
3.2 KiB
3.2 KiB
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.