Skip to content

v2.13.0 — Visual identity pass

Choose a tag to compare

@gfargo gfargo released this 17 May 18:05
· 23 commits to main since this release
3c72fbd

v2.13.0 — Visual identity pass

The admin always shared the ink/paper palette and uppercase tracking-widest register with the marketing site. What was missing was the commitment — Geist fonts, a single brand accent, hairline rules, eyebrow labels, animated transitions. v2.13 pulls them all in without touching the IA, the JS, or any functionality.

Editorial-theatrical, restrained. Same density. Same controls. Same scan-ability. Now with the brand showing through.

🎨 Tier 1 — foundation

  • Geist Sans + Geist Mono via Google Fonts @import. Falls back to the system stack gracefully if the Pi is offline.
  • :root token system--ink-* surface scale, --paper-* foreground opacities, --rule/--rule-strong hairlines (6/12% opacity paper), --amber-tungsten brand accent + soft/glow variants, --signal-* for semantic colours.
  • Amber-tungsten replaces white for active/selected states across tabs, drawer scene buttons, scene grid, chips, group chips, fixture picker, focus rings, primary-button hover. White-on-ink is now reserved for primary action buttons where max contrast actually matters.
  • Filament dot in the header — tiny amber pulsing circle signalling "rig is breathing." Subtitle re-cast as Live · Riversway in mono uppercase.

✨ Tier 2 — polish

  • Animated tab indicator — tungsten underline that grows from the centre on activation (::after + cubic-bezier slide).
  • Eyebrow labels on all six tool panels via data-eyebrow attribute + ::before pseudo-element. Reads like a console section header.
  • BLACKOUT redesigned — heavier weight, mono label at 0.22em tracking, tungsten-to-red hover with ambient glow + "console rail" hairline. Still red. Still says BLACKOUT. Just reads as the kill switch on a real console now.
  • Health pills converted from chunky chiclets to hairline-only mono uppercase with a soft glow on status dots.
  • Hairlines — prominent container borders (drawer, modal, tool panels, chat pane) now use --rule tokens instead of literal greys.
  • Button vocabulary refined: mono labels at 0.12em tracking, primary-hover gains a tungsten glow.

Diff

control-server/templates/index.html | 448 +++++++++++++++++++++++++-----------
1 file changed, 314 insertions(+), 134 deletions(-)

CSS only + 6 data-eyebrow attributes on tool panels + 1 <span class="filament"> in the header. No JS touched, no IA changed, no migration needed.

Upgrade

./scripts/lightsctl.sh update
./scripts/lightsctl.sh restart

Hard-refresh the browser (⌘⇧R / Ctrl⇧R) to pick up the new fonts.

What's next

The foundation work for the project is now complete (mobile + PWA + CI + visual identity). Up next: the engagement features queued in #24#37 — MIDI controller input, OSC, authentication, integration tests, audio reactivity.