notify-bridge/design-mockups

Notify Bridge — Redesign Mockups

Start here: open index.html for the chooser. Three full directions to pick between, plus a side-by-side comparison table.

Direction chosen: Aurora / Glass (2026-04-25). Continuing to mock additional surfaces in this language; original three-way chooser kept for reference.

File	Option	Mood
index.html	Chooser	Compare all three side by side
dashboard.html	A · Bridge / Control Room	Editorial broadcast console — phosphor lime on deep ink, italic Fraunces, hairlines, scanlines
dashboard-aurora.html	B · Aurora / Glass ✓	Frosted-glass panels over a vivid aurora gradient — visionOS / Stripe-modern
dashboard-bento.html	C · Bento / Modular	Mixed-size colorful tiles in a tight grid — Apple Keynote / Linear blog energy
aurora-tracker.html	Aurora · Tracker detail	Form + live preview + event log — stress-tests glass on form-heavy surfaces

All three are self-contained HTML — no build step. Each has its own theme toggle in the top-right.

---

Quick comparison

Trait	A · Bridge	B · Aurora	C · Bento
Mood	Editorial / operator	Premium / atmospheric	Playful / confident
Default theme	Dark (Console)	Dark (Aurora)	Light (Daylight)
Accent	Phosphor lime #d4ff3a	Lavender + orchid + mint	Violet · mint · coral · honey
Surface	Hairline-rule modules	Frosted-glass panels	Solid-color tiles
Display font	Fraunces (serif)	Newsreader (serif)	Manrope (sans)
Density	High · for power users	Medium · breathable	Medium · airy
Best for	Pro operators · self-hosters	Showroom · public-facing	Mainstream · cross-audience
Risk	Niche taste · heavy mood	Glass trend may date	Color discipline matters

---

What all three share (the UX, not the paint)

These additions are the same across every option — pick a look, not a different product:

1. Live ticker / "live" pill — always-running awareness of the last events without forcing focus
2. Stats with deltas + sparklines or trend chart — numbers always have context
3. Editorial hero with current-state sentence + big throughput readout
4. Signal stream with routing trail — every event shows Tracker → Target → Template inline (today: 3 clicks to find this)
5. Provider deck — throughput, last-seen, pulse status, idle/warn/live indicators
6. Pulse chart (heatmap in A, area waves in B/C) — finally answers "when is this thing busiest?"
7. Active wires panel — Sankey-style Source → Channel routes with live counts
8. Compose / new-tracker CTA — single entry to a 4-step wizard (provider → tracker → template → target)
9. Two-theme system — committed light + dark per option, no lukewarm middle "system"

---

Implementation cost (rough)

Option	New deps	New components	Migration risk
A · Bridge	Fraunces + Instrument Sans + JetBrains Mono fonts	Ticker, sparklines, signal-stream-with-trail, heatmap, routes panel	Low — mostly token swap + the 5 new components
B · Aurora	Newsreader + Geist + Geist Mono fonts	Same as A + heavy backdrop-filter / glass system	Medium — backdrop-filter perf needs review on long lists; gradient bg can hurt low-end devices
C · Bento	Manrope + JetBrains Mono fonts	Same UX components, but tile-grid layout system + bold-color discipline (color governance matters more)	Low-Medium — tile spans need a discipline, and 8-color palette needs guardrails so devs don't pick colors freely

All three keep the existing Svelte 5 architecture, $state cache system, and route structure unchanged. Migration is ~3 weeks for any one of them to land dashboard + provider list + tracker detail.

---

What's NOT in any mockup yet

If a direction lands, these surfaces still need design before implementation:

• Tracker detail page (timeline + config editor + live preview)
• Template editor (Jinja2 sandbox + side-by-side preview)
• Provider list + provider detail
• Target detail (channel inbox + delivery history)
• Bot console (chat-style interaction log for Telegram/Matrix/Email)
• Setup wizard (first-run experience)
• Mobile pass — current mockups are desktop-first

---

Original design rationale (Option A)

Below is the original "Bridge / Control Room" rationale, kept for reference.

Direction: "Bridge / Control Room"

The product is literally a signal operator's console — it listens for events on one side (Immich, Gitea, RSS, GitHub, …) and dispatches them to channels on the other (Telegram, Matrix, Email, ntfy, …). The current UI hides that fact behind generic SaaS-dashboard chrome (teal accent, dot-grid bg, card-with-glow). The redesign leans hard into what the product is.

References that were in the room while designing this:

• Bloomberg Terminal — dense numerical clarity, monospace numerals, ticker bars
• Linear / Vercel — restraint, hairline rules, type-as-interface
• Editorial print (Bloomberg Businessweek, Fast Company) — italic display serif as a counterpoint to mono data
• Broadcast control rooms — pulsing live indicators, "ON AIR" markers, scanline atmosphere
• Phosphor monitors — the signature lime accent, not the third teal-purple SaaS template

---

Design language

Token	Choice	Why
Display	Fraunces (variable, italic-capable serif)	Editorial gravitas; italic em-tags inside headlines feel printed, not pasted
Body	Instrument Sans	Modern, neutral, slightly geometric — pairs well with a serif without fighting it
Data	JetBrains Mono	Tabular numerals everywhere stats appear
Primary accent	#d4ff3a phosphor lime	Distinctive — far from the SaaS teal/purple gravity well; reads as "signal"
Secondary signal	warm coral, calm blue, amber warn, rose error	Used sparingly; one per event class
Surfaces	Deep ink #07080b → #161a25	High-contrast console feel; light theme inverts to "broadsheet" cream
Hairlines	1px borders everywhere instead of shadows	Editorial precision; cards sit in the page, not floating over it
Scanlines + vignette	Faint overlay	Console atmosphere without crossing into kitsch

---

What's actually new (UX, not just paint)

The mockup isn't just a re-skin — these are concrete proposed additions:

1. "On Air" ticker bar — a always-running marquee of the last 6–10 events at the very top. Pauses on hover. Keeps you peripherally aware of activity without forcing you to look at the dashboard.
2. Stats with sparklines — every counter shows a 24h trend inline. Numbers without context are useless.
3. Editorial hero — the title is a sentence about the current state, not a label. "Tonight, everything is flowing" with live numbers in the body. This is opinionated and might feel too much for some — easy to swap to a label-style header.
4. Signal stream — replaces the existing event timeline. Adds the routing trail for each event (Tracker → Target → Template) so you can see at a glance where a signal went, not just that it happened. This is the killer feature; right now you have to click through three pages to trace one event.
5. "On watch" provider deck — replaces the silent provider list with throughput-per-provider, last-seen, pulse status. Click-to-trace.
6. 7-day pulse heatmap — finally answers "when is this thing busiest?". Useful for planning maintenance windows.
7. Active wires panel — Sankey-style "Source → Channel" route summary with throughput counts. Makes the bridge visible.
8. Compose band — bottom of dashboard. A single CTA to start a new tracker with a 4-step wizard (provider → tracker → template → target), or paste a webhook URL and let the system infer.
9. Live clock + uptime — pinned in the ticker. Operators know what time it is and how stable they've been.
10. Two-theme system — Console (dark, default for most operators) + Broadsheet (light, warm cream, deep ink). Skips the generic "system theme" three-way; commits to two beautiful options instead of three mediocre ones.

---

Things to push back on

These are choices I'd specifically want feedback on before implementing:

• Phosphor lime as primary — it's bold and very on-brand for "signal," but it's far from the current teal. Worth knowing if you have any brand attachment to teal.
• Italic Fraunces inside headlines — distinctive, but could feel "too magazine" for a self-hosted ops tool. Easy to swap for plain Fraunces or even drop the serif entirely and lean fully on Instrument Sans + JetBrains Mono.
• Editorial sentence-style headers vs. label-style headers — same trade-off as above.
• Hairline borders instead of cards-on-cards — current UI uses elevated cards with glow shadows. The redesign uses flat sectioned modules with 1px rules. Read denser, less "soft."
• Sidebar grouping — I collapsed the current 6-group nav into 3 sections (Overview / Routing / Operators). Some of your nested groups (notification-trackers vs command-trackers) merge into a single "Trackers" entry; click-through reveals tabs. Reduces vertical noise but loses one click of directness.
• No emoji / no MDI icon backgrounds — the current UI uses lots of mdi* icon chips. The redesign uses thin custom SVG strokes. Cohesive but more work to maintain (would suggest a curated icon set rather than the full MDI library).

---

What's NOT in this mockup yet

If the direction lands, these are the next surfaces to design before any implementation:

• Tracker detail page — single-tracker timeline + config editor + live preview
• Template editor — code-editor surface with the Jinja2 sandbox preview side-by-side
• Provider list / detail — currently a grid of cards; would become a tabular operator's list
• Target detail — channel inbox view with delivery history per target
• Bot console — Telegram/Matrix/Email bots get a chat-style interaction log
• Setup wizard — first-run experience matching the same aesthetic
• Mobile — current mockup is desktop-only; the design language needs a mobile-first pass before shipping

---

Implementation notes (if approved)

• Migration is mostly a CSS token swap plus selective component refactors. The Svelte 5 architecture and $state cache system don't need to change.
• New fonts: add @fontsource-variable/fraunces and @fontsource-variable/instrument-sans. Drop dm-sans.
• Replace app.css @theme block with the new token set.
• The ticker, sparklines, heatmap, and routes panel are all net-new components — budget those separately.
• Custom SVG icon set: pick ~30 icons we actually use, ship them as a single sprite. Drop the runtime MDI lookup.

Estimate to first-shippable: 2–3 focused weeks (one designer-pair sprint) to land dashboard + provider list + tracker detail with the new language. Rest of pages can roll over the following month without breaking the old screens.