# Notify Bridge — Redesign Mockups

**Start here:** open [`index.html`](./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`](./index.html) | **Chooser** | Compare all three side by side |
| [`dashboard.html`](./dashboard.html) | A · Bridge / Control Room | Editorial broadcast console — phosphor lime on deep ink, italic Fraunces, hairlines, scanlines |
| [`dashboard-aurora.html`](./dashboard-aurora.html) | **B · Aurora / Glass** ✓ | Frosted-glass panels over a vivid aurora gradient — visionOS / Stripe-modern |
| [`dashboard-bento.html`](./dashboard-bento.html) | C · Bento / Modular | Mixed-size colorful tiles in a tight grid — Apple Keynote / Linear blog energy |
| [`aurora-tracker.html`](./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.
