alexei.dolgolyov/notify-bridge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 31 Wiki Activity

chore(design): add aurora redesign mockups + chooser

Browse Source 
Three full-fidelity dashboard mockups (Bridge/Console, Aurora/Glass,
Bento/Modular) plus a chooser index and a tracker-detail page in
the chosen Aurora language. Self-contained HTML, no build needed.
This commit is contained in:
Admin
2026-04-25 01:11:42 +03:00
parent 770c198ac3
commit 1e357244e1
6 changed files with 6310 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design-mockups/README.md
+161
View File
@@ -0,0 +1,161 @@
# 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.
design-mockups/aurora-tracker.html
+1459
View File
File diff suppressed because it is too large Load Diff
design-mockups/dashboard-aurora.html
+1410
View File
File diff suppressed because it is too large Load Diff
design-mockups/dashboard-bento.html
+1160
View File
File diff suppressed because it is too large Load Diff
design-mockups/dashboard.html
+1555
View File
File diff suppressed because it is too large Load Diff
design-mockups/index.html
+565
View File
@@ -0,0 +1,565 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Notify Bridge — Redesign Options</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300..800&family=JetBrains+Mono:wght@300..600&family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&display=swap" rel="stylesheet">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0b0c10;
--surface: #14151c;
--rule: #232531;
--rule-strong: #353846;
--fg: #f0eee8;
--fg-dim: #b0b3bd;
--mute: #6f7280;
}
html, body { background: var(--bg); color: var(--fg); }
body {
font-family: 'Manrope', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
padding: 56px 32px 80px;
background:
radial-gradient(40vw 40vw at 18% 10%, rgba(184, 167, 255, 0.12), transparent 60%),
radial-gradient(35vw 30vw at 88% 90%, rgba(126, 232, 196, 0.10), transparent 60%),
var(--bg);
}
.wrap { max-width: 1240px; margin: 0 auto; }
.head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 56px;
padding-bottom: 28px;
border-bottom: 1px solid var(--rule);
}
.brand {
font-family: 'Newsreader', serif;
font-weight: 400;
font-size: 28px;
letter-spacing: -0.02em;
line-height: 1;
}
.brand em {
font-style: italic;
background: linear-gradient(135deg, #b8a7ff, #ff9ec4);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand small { display: block; margin-top: 6px; color: var(--mute); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; }
.meta {
text-align: right;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--mute);
letter-spacing: 0.13em;
text-transform: uppercase;
}
.meta b { color: var(--fg); font-weight: 500; }
.intro {
max-width: 720px;
margin-bottom: 48px;
}
.intro h1 {
font-family: 'Newsreader', serif;
font-weight: 400;
font-size: 56px;
line-height: 1.0;
letter-spacing: -0.03em;
margin-bottom: 18px;
}
.intro h1 em {
font-style: italic;
background: linear-gradient(135deg, #c8f078, #b8a7ff);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.intro p {
font-size: 16px;
color: var(--fg-dim);
line-height: 1.6;
max-width: 560px;
}
.options {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 980px) { .options { grid-template-columns: 1fr; } }
.option {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 24px;
overflow: hidden;
transition: transform .25s cubic-bezier(.4,.4,0,1), border-color .25s;
text-decoration: none; color: inherit;
display: flex; flex-direction: column;
}
.option:hover {
transform: translateY(-4px);
border-color: var(--rule-strong);
}
.option__preview {
height: 220px;
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--rule);
}
/* Option A — Bridge / Console */
.preview--a {
background: #07080b;
color: #ece8df;
}
.preview--a::before {
content: '';
position: absolute; inset: 0;
background-image: repeating-linear-gradient(
0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px
);
}
.preview--a .lime {
position: absolute; left: 24px; top: 24px;
background: #d4ff3a; color: #07080b;
padding: 4px 9px;
font-family: 'JetBrains Mono', monospace;
font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
font-weight: 700;
}
.preview--a .num {
position: absolute; right: 24px; top: 24px;
font-family: 'JetBrains Mono', monospace;
font-size: 32px; color: #d4ff3a; font-weight: 500;
letter-spacing: -0.02em;
}
.preview--a .title {
position: absolute; left: 24px; bottom: 56px;
font-family: 'Newsreader', serif;
font-style: italic; font-size: 38px;
color: #d4ff3a;
letter-spacing: -0.02em;
line-height: 0.95;
}
.preview--a .title b {
font-style: normal; color: #ece8df; font-weight: 400;
}
.preview--a .rule {
position: absolute; left: 24px; right: 24px; bottom: 36px;
height: 1px; background: rgba(255,255,255,0.12);
}
.preview--a .stream {
position: absolute; left: 24px; bottom: 14px; right: 24px;
display: flex; align-items: center; gap: 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px; color: rgba(255,255,255,0.6);
}
.preview--a .dot {
width: 6px; height: 6px; border-radius: 50%;
background: #d4ff3a; box-shadow: 0 0 6px #d4ff3a;
}
/* Option B — Aurora */
.preview--b {
background: #050613;
color: #f3f1ff;
overflow: hidden;
}
.preview--b::before {
content: '';
position: absolute; inset: -20%;
background:
radial-gradient(40% 40% at 20% 30%, rgba(184, 167, 255, 0.7), transparent 60%),
radial-gradient(35% 35% at 80% 25%, rgba(255, 158, 196, 0.6), transparent 60%),
radial-gradient(50% 35% at 75% 85%, rgba(126, 232, 196, 0.5), transparent 60%);
filter: blur(40px) saturate(140%);
}
.preview--b .glass {
position: absolute; left: 20px; right: 20px; top: 20px; bottom: 20px;
background: rgba(255,255,255,0.05);
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 18px;
overflow: hidden;
padding: 22px;
}
.preview--b .pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.1);
font-size: 10px; color: #b8a7ff;
font-weight: 500;
}
.preview--b .pill::before {
content: '';
width: 6px; height: 6px; border-radius: 50%;
background: #7ee8c4; box-shadow: 0 0 6px #7ee8c4;
}
.preview--b .title {
font-family: 'Newsreader', serif;
font-style: italic; font-size: 34px;
margin-top: 12px;
background: linear-gradient(135deg, #ff9ec4, #b8a7ff 60%, #8ec9ff);
-webkit-background-clip: text; background-clip: text; color: transparent;
letter-spacing: -0.02em;
line-height: 1;
}
.preview--b .title b {
font-style: normal; color: #f3f1ff;
background: none; -webkit-text-fill-color: #f3f1ff;
}
.preview--b .row {
margin-top: 14px;
display: flex; gap: 8px;
}
.preview--b .chip {
padding: 5px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.08);
font-size: 10px;
border: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.85);
}
.preview--b .chip b { font-weight: 600; }
/* Option C — Bento */
.preview--c {
background: #f4f3ef;
color: #0c0d11;
padding: 14px;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 8px;
}
.preview--c .b-tile {
border-radius: 14px;
padding: 12px;
display: flex; flex-direction: column;
justify-content: space-between;
overflow: hidden;
position: relative;
font-size: 10px;
}
.preview--c .b-violet { background: #6d4ce6; color: white; grid-row: span 2; }
.preview--c .b-mint { background: #c8f078; color: #1a2e0c; }
.preview--c .b-coral { background: #ff6f5b; color: white; }
.preview--c .b-honey { background: #ffd23a; color: #2a1f00; }
.preview--c .b-ink { background: #0c0d11; color: white; }
.preview--c .b-tile .lab {
font-family: 'JetBrains Mono', monospace;
font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase;
opacity: 0.7; font-weight: 500;
}
.preview--c .b-tile .num {
font-size: 28px; font-weight: 700;
letter-spacing: -0.04em; line-height: 1;
}
.preview--c .b-violet .num { font-size: 36px; }
.preview--c .b-tile .num small {
font-size: 14px; opacity: 0.6;
}
.preview--c .b-tile .cap {
font-size: 9px; opacity: 0.85; line-height: 1.3;
margin-top: 2px;
}
/* Option content */
.option__body { padding: 24px 26px 26px; flex: 1; display: flex; flex-direction: column; }
.option__kicker {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mute);
margin-bottom: 10px;
font-weight: 500;
display: flex; align-items: center; gap: 8px;
}
.option__kicker .badge {
background: var(--rule);
color: var(--fg);
padding: 2px 7px;
border-radius: 4px;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.1em;
}
.option__title {
font-family: 'Newsreader', serif;
font-weight: 400;
font-size: 26px;
letter-spacing: -0.02em;
line-height: 1.05;
margin-bottom: 12px;
}
.option__title em {
font-style: italic;
color: var(--fg-dim);
}
.option__desc {
font-size: 13.5px;
color: var(--fg-dim);
line-height: 1.55;
margin-bottom: 18px;
flex: 1;
}
.option__tags {
display: flex; gap: 6px; flex-wrap: wrap;
margin-bottom: 18px;
}
.option__tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--fg-dim);
background: var(--rule);
padding: 3px 8px;
border-radius: 999px;
letter-spacing: 0.04em;
}
.option__cta {
display: inline-flex; align-items: center; gap: 8px;
color: var(--fg);
font-size: 13px; font-weight: 600;
border-top: 1px solid var(--rule);
padding-top: 16px;
}
.option__cta svg { width: 14px; height: 14px; transition: transform .2s; }
.option:hover .option__cta svg { transform: translateX(4px); }
.vs {
margin-top: 80px;
border-top: 1px solid var(--rule);
padding-top: 56px;
}
.vs h2 {
font-family: 'Newsreader', serif;
font-weight: 400;
font-size: 32px;
letter-spacing: -0.02em;
margin-bottom: 28px;
}
.vs h2 em { font-style: italic; color: var(--fg-dim); }
.vs__table {
width: 100%;
border-collapse: collapse;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 16px;
overflow: hidden;
font-size: 13px;
}
.vs__table th, .vs__table td {
padding: 14px 18px;
text-align: left;
border-bottom: 1px solid var(--rule);
}
.vs__table tr:last-child td { border-bottom: 0; }
.vs__table th {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mute);
font-weight: 500;
background: rgba(255,255,255,0.02);
}
.vs__table td:first-child {
font-weight: 600;
color: var(--fg);
}
.vs__table td { color: var(--fg-dim); }
.vs__table .a { color: #d4ff3a; }
.vs__table .b { color: #b8a7ff; }
.vs__table .c { color: #c8f078; }
.foot {
margin-top: 80px;
text-align: center;
color: var(--mute);
font-size: 11.5px;
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.12em;
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="wrap">
<header class="head">
<div class="brand">
Notify <em>Bridge</em>
<small>Redesign · 3 directions</small>
</div>
<div class="meta">
Drafted <b>Apr 25, 2026</b><br>
For review · pick one
</div>
</header>
<section class="intro">
<h1>Three directions, one <em>product</em>.</h1>
<p>
Each option is a real, working dashboard you can open and click around. They share the same data,
the same product, and the same set of UX ideas — but commit to different aesthetic universes.
Open any, then come back here to compare.
</p>
<p style="margin-top: 18px; padding: 12px 18px; border-left: 2px solid #b8a7ff; background: rgba(184,167,255,0.08); border-radius: 0 12px 12px 0; font-size: 14px;">
<strong style="color:#b8a7ff">Decided · Aurora.</strong>
Ongoing surfaces in the chosen language:
<a href="aurora-tracker.html" style="color:#b8a7ff;font-weight:600;text-decoration:underline;text-underline-offset:3px;">Tracker detail →</a>
</p>
</section>
<section class="options">
<a class="option" href="dashboard.html">
<div class="option__preview preview--a">
<span class="lime">● ON AIR</span>
<span class="num">2 814</span>
<div class="title"><b>Tonight,</b><br>everything is <em>flowing.</em></div>
<div class="rule"></div>
<div class="stream">
<span class="dot"></span><span>02:14 · IMMICH · 14 ASSETS → @FAMILY</span>
</div>
</div>
<div class="option__body">
<div class="option__kicker">Option A <span class="badge">existing</span></div>
<h3 class="option__title">Bridge <em>· Control Room</em></h3>
<p class="option__desc">
Editorial broadcast-console. Phosphor-lime accents on deep ink, hairline rules,
monospace numerals, italic Fraunces serif against JetBrains Mono. Atmospheric scanlines,
live ticker bar. Built for operators who want density and signal-room energy.
</p>
<div class="option__tags">
<span class="option__tag">phosphor-lime</span>
<span class="option__tag">Fraunces</span>
<span class="option__tag">hairlines</span>
<span class="option__tag">dense</span>
</div>
<div class="option__cta">
Open mockup
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</div>
</div>
</a>
<a class="option" href="dashboard-aurora.html">
<div class="option__preview preview--b">
<div class="glass">
<span class="pill">Live · all systems nominal</span>
<div class="title"><b>Tonight,</b><br><em>everything</em> flows.</div>
<div class="row">
<span class="chip"><b>2 814</b> sent</span>
<span class="chip"><b>99.7%</b> ok</span>
</div>
</div>
</div>
<div class="option__body">
<div class="option__kicker">Option B <span class="badge" style="background:#b8a7ff;color:#0a0a0a">new</span></div>
<h3 class="option__title">Aurora <em>· Glass</em></h3>
<p class="option__desc">
Vivid aurora gradient base, frosted-glass panels, soft pastel accents — lavender, orchid,
mint, coral. Newsreader serif headlines with gradient italics. Premium, modern, visionOS /
Stripe-modern. Rounded, breathable, animated.
</p>
<div class="option__tags">
<span class="option__tag">aurora gradient</span>
<span class="option__tag">frosted glass</span>
<span class="option__tag">Newsreader</span>
<span class="option__tag">premium</span>
</div>
<div class="option__cta">
Open mockup
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</div>
</div>
</a>
<a class="option" href="dashboard-bento.html">
<div class="option__preview preview--c">
<div class="b-tile b-violet">
<span class="lab">Top provider</span>
<div>
<div class="num">1942</div>
<div class="cap">Immich · 8 trackers</div>
</div>
</div>
<div class="b-tile b-mint">
<span class="lab">Trackers</span>
<div class="num">12<small>/14</small></div>
</div>
<div class="b-tile b-honey">
<span class="lab">Targets</span>
<div class="num">19</div>
</div>
<div class="b-tile b-coral">
<span class="lab">Failures</span>
<div class="num">02</div>
</div>
<div class="b-tile b-ink">
<span class="lab">Live</span>
<div class="num" style="color:#c8f078">●</div>
</div>
</div>
<div class="option__body">
<div class="option__kicker">Option C <span class="badge" style="background:#c8f078;color:#1a2e0c">new</span></div>
<h3 class="option__title">Bento <em>· Modular</em></h3>
<p class="option__desc">
Mixed-size colorful tiles in a tight grid. Each module commits to one role and one bold color
— violet, mint, coral, honey, cobalt. Manrope sans + JetBrains Mono. Apple Keynote / Linear
blog energy. Playful but disciplined. Ships with day + night.
</p>
<div class="option__tags">
<span class="option__tag">bento grid</span>
<span class="option__tag">bold color</span>
<span class="option__tag">Manrope</span>
<span class="option__tag">playful</span>
</div>
<div class="option__cta">
Open mockup
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</div>
</div>
</a>
</section>
<section class="vs">
<h2>Side <em>by side</em></h2>
<table class="vs__table">
<thead>
<tr>
<th>Trait</th>
<th><span class="a">A · Bridge</span></th>
<th><span class="b">B · Aurora</span></th>
<th><span class="c">C · Bento</span></th>
</tr>
</thead>
<tbody>
<tr><td>Mood</td><td>Editorial / operator</td><td>Premium / atmospheric</td><td>Playful / confident</td></tr>
<tr><td>Default theme</td><td>Dark (Console)</td><td>Dark (Aurora)</td><td>Light (Daylight)</td></tr>
<tr><td>Accent</td><td>Phosphor lime <code style="background:#d4ff3a;color:#07080b;padding:2px 6px;border-radius:4px;font-family:JetBrains Mono;font-size:11px">#d4ff3a</code></td><td>Lavender + orchid + mint</td><td>Violet · mint · coral · honey</td></tr>
<tr><td>Surface</td><td>Hairline-rule modules</td><td>Frosted-glass panels</td><td>Solid-color tiles</td></tr>
<tr><td>Display font</td><td>Fraunces (variable serif)</td><td>Newsreader (variable serif)</td><td>Manrope (geometric sans)</td></tr>
<tr><td>Data font</td><td>JetBrains Mono</td><td>Geist Mono</td><td>JetBrains Mono</td></tr>
<tr><td>Density</td><td>High · for power users</td><td>Medium · breathable</td><td>Medium · airy</td></tr>
<tr><td>Risk</td><td>Niche taste · heavy mood</td><td>Trendy glass may date</td><td>Color discipline matters</td></tr>
<tr><td>Best for</td><td>Pro operators · self-hosters</td><td>Showroom · public-facing</td><td>Mainstream · cross-audience</td></tr>
</tbody>
</table>
</section>
<div class="foot">Notify Bridge · v0.5.2 · drafted by Claude</div>
</div>
</body>
</html>