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.
2.8 KiB
2.8 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.
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.