From 564a39b0e8dff09c160a6789c40e1a60e17c168e Mon Sep 17 00:00:00 2001 From: Tomas Dvorak Date: Wed, 16 Sep 2026 21:25:21 +0200 Subject: [PATCH] docs: add mockups D-F, mark casa glass rejected D merges the two shortlisted directions (bento grid, mono palette, no glow). E and F probe two different paradigms: editorial list and terminal console. Generated with [Devin](https://devin.ai) Authored By: TDvorak Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- docs/specs/2026-09-16-dash-design.md | 11 +- mockups/d-bento-mono.html | 419 ++++++++++++++++++++++++++ mockups/e-editorial.html | 432 ++++++++++++++++++++++++++ mockups/f-console.html | 435 +++++++++++++++++++++++++++ 4 files changed, 1293 insertions(+), 4 deletions(-) create mode 100644 mockups/d-bento-mono.html create mode 100644 mockups/e-editorial.html create mode 100644 mockups/f-console.html diff --git a/docs/specs/2026-09-16-dash-design.md b/docs/specs/2026-09-16-dash-design.md index c8b4067..c95bac6 100644 --- a/docs/specs/2026-09-16-dash-design.md +++ b/docs/specs/2026-09-16-dash-design.md @@ -88,15 +88,18 @@ Frontend never hand-writes API types — generated client from `openapi.yaml`. ## 7. UI direction — pending -Three static mockups in `mockups/` — open each, compare: +Static mockups in `mockups/` — open each, compare. Round 1 shortlist: A + B. C rejected (glass/wallpaper is not the target look). | File | Direction | Character | |---|---|---| | `a-vercel-mono.html` | Flat monochrome | Geist, hairlines, no shadows, quietest | -| `b-command-bento.html` | Bento grid | mixed tile sizes, widgets inline, densest | -| `c-casa-glass.html` | Glass + wallpaper | homescreen tiles, warmest, most motion | +| `b-command-bento.html` | Bento grid | mixed tile sizes, widgets inline, densest; bg glow disliked | +| ~~`c-casa-glass.html`~~ | ~~Glass + wallpaper~~ | rejected | +| `d-bento-mono.html` | Bento + mono palette | B's grid on A's zinc palette, no glow — direct merge of the two favorites | +| `e-editorial.html` | List paradigm | serif index headers, full-width rows, stat strip — no cards | +| `f-console.html` | Terminal | JetBrains Mono, bordered panels, `[ up ]` tags, prompt glyphs | -Decision recorded here once picked. A and C share card anatomy — hybrid (mono base + optional wallpaper) is cheap later. +Decision recorded here once picked. ## 8. Roadmap diff --git a/mockups/d-bento-mono.html b/mockups/d-bento-mono.html new file mode 100644 index 0000000..49aa017 --- /dev/null +++ b/mockups/d-bento-mono.html @@ -0,0 +1,419 @@ + + + + + +Dash — D · Bento Mono + + + + + + +
+
+ + Dash +
+
+ + Search services + ⌘K +
+ + +
+ +
+
+ +

Status

05 + +
+ +
+
Local time ● LIVE
+
--:--:--
+
PRG NYC TYO
+
+
+
Pi-hole · today
+
24.6%
+
20,721 ads blocked · 84,213 queries
+
+
+
+
AdGuard
+
11.2%
+
blocked · 31 clients
+
+
+
Immich
+
12,483
+
photos · 96.4 GB
+
+
+
Uptime · 30d
+
99.7%
+
1 incident · Radarr
+
+
+
Storage
+
61%
+
14.2 / 23.2 TB
+
+
+
Transfer
+
42 MB/s
+
↓ 38.4 · ↑ 3.6 · 7 active
+
+ +

Network

04 + +
+ +
+
+
Pi-hole
10.0.0.2
+ up +
+
+
+
+
AdGuard Home
10.0.0.3:3000
+ up +
+
+
+
Nginx Proxy Mgr
10.0.0.2:81
+ up +
+
+
+
+
Uptime Kuma
status.tdvorak.dev
+ up +
+
+ +

Media

06 + +
+ +
+
+
Jellyfin
watch.tdvorak.dev
+ up +
+
+
+
+
Immich
photos.tdvorak.dev
+ up +
+
+
+
+
Navidrome
10.0.0.10:4533
+ up +
+
+
+
qBittorrent
10.0.0.10:8080
+ up +
+
+
+
Sonarr
10.0.0.10:8989
+ up +
+
+
+
Radarr
10.0.0.10:7878
+ down +
+ +

Infrastructure

07 + +
+ +
+
+
Proxmox
10.0.0.4:8006
+ up +
+
+
+
Portainer
10.0.0.4:9000
+ up +
+
+
+
TrueNAS
nas.tdvorak.dev
+ up +
+
+
+
+
Grafana
10.0.0.4:3100
+ up +
+
+
+
Vaultwarden
vault.tdvorak.dev
+ up +
+
+
+
Home Assistant
home.tdvorak.dev
+ up +
+
+
+
+
Nextcloud
cloud.tdvorak.dev
+ up +
+ +

Mockup D — Bento Mono. B's grid on A's palette: no glow, zinc only, status chips carry the color. Click multi-URL tiles for the chooser.

+
+
+ + + + diff --git a/mockups/e-editorial.html b/mockups/e-editorial.html new file mode 100644 index 0000000..6acb45c --- /dev/null +++ b/mockups/e-editorial.html @@ -0,0 +1,432 @@ + + + + + +Dash — E · Editorial + + + + + + + +
+
Dash.
+
+ + Search the index + ⌘K +
+ + +
+ +
+
+

Service Index

+ +
+ +
+
Local time
--:--
PRG · NYC · TYO
+
Pi-hole
24.6%
ads blocked today
+
AdGuard
11.2%
31 clients
+
Immich
12,483
photos · 96.4 GB
+
Uptime · 30d
99.7%
1 incident
+
+ +
+
01

Network

4 entries + +
+
+
+ 01 +
+ Pi-hole10.0.0.2 + localext + up→ +
+
+
+ 02 +
+ AdGuard Home10.0.0.3:3000 + local + up→ +
+
+ 03 +
+ Nginx Proxy Mgr10.0.0.2:81 + localext + up→ +
+
+
+ 04 +
+ Uptime Kumastatus.tdvorak.dev + localext + up→ +
+
+
+
+ +
+
02

Media

6 entries + +
+
+
+ 01 +
+ Jellyfinwatch.tdvorak.dev + localext + up→ +
+
+
+ 02 +
+ Immichphotos.tdvorak.dev + localext + up→ +
+
+
+ 03 +
+ Navidrome10.0.0.10:4533 + local + up→ +
+
+ 04 +
+ qBittorrent10.0.0.10:8080 + local + up→ +
+
+ 05 +
+ Sonarr10.0.0.10:8989 + local + up→ +
+
+ 06 +
+ Radarr10.0.0.10:7878 + local + down→ +
+
+
+ +
+
03

Infrastructure

7 entries + +
+
+
+ 01 +
+ Proxmox10.0.0.4:8006 + local + up→ +
+
+ 02 +
+ Portainer10.0.0.4:9000 + local + up→ +
+
+ 03 +
+ TrueNASnas.tdvorak.dev + localext + up→ +
+
+
+ 04 +
+ Grafana10.0.0.4:3100 + local + up→ +
+
+ 05 +
+ Vaultwardenvault.tdvorak.dev + ext + up→ +
+
+ 06 +
+ Home Assistanthome.tdvorak.dev + localext + up→ +
+
+
+ 07 +
+ Nextcloudcloud.tdvorak.dev + ext + up→ +
+
+
+ +
dash v0.1 · 17 services · 4 widgetsmockup E — editorial
+
+ + + + diff --git a/mockups/f-console.html b/mockups/f-console.html new file mode 100644 index 0000000..25352f7 --- /dev/null +++ b/mockups/f-console.html @@ -0,0 +1,435 @@ + + + + + +Dash — F · Console + + + + + +
+
dash
+ ~/board · 17 services · 5 widgets +
/search
+ + +
+ +
+ + +
+
+
clock --local ● live
+
+
--:--:--
+
PRG NYC TYO
+
+
+
+
pihole
+
24.6%
ads blocked · 84,213 q
+
+
+
adguard
+
11.2%
blocked · 31 clients
+
+
+
immich
+
12,483
photos · 96.4 GB
+
+
+
storage
+
61%
14.2 / 23.2 TB
+
+
+
uptime --30d
+
99.7%
1 incident · radarr
+
+
+
transfer
+
42 MB/s
↓ 38.4 · ↑ 3.6
+
+
+ +
+
##

network

[4] + ──────────────────────────────────────────── + +
+
+
+ › +
+ pi-hole10.0.0.2 · 2 endpoints + [ up ] +
+
+
+ › +
+ adguard-home10.0.0.3:3000 + [ up ] +
+
+ › +
+ nginx-proxy-mgr10.0.0.2:81 · 2 endpoints + [ up ] +
+
+
+ › +
+ uptime-kumastatus.tdvorak.dev · 2 endpoints + [ up ] +
+
+
+
+ +
+
##

media

[6] + ──────────────────────────────────────────── + +
+
+
+ › +
+ jellyfinwatch.tdvorak.dev · 2 endpoints + [ up ] +
+
+
+ › +
+ immichphotos.tdvorak.dev · 2 endpoints + [ up ] +
+
+
+ › +
+ navidrome10.0.0.10:4533 + [ up ] +
+
+ › +
+ qbittorrent10.0.0.10:8080 + [ up ] +
+
+ › +
+ sonarr10.0.0.10:8989 + [ up ] +
+
+ › +
+ radarr10.0.0.10:7878 + [ down ] +
+
+
+ +
+
##

infrastructure

[7] + ──────────────────────────────────────────── + +
+
+
+ › +
+ proxmox10.0.0.4:8006 + [ up ] +
+
+ › +
+ portainer10.0.0.4:9000 + [ up ] +
+
+ › +
+ truenasnas.tdvorak.dev · 2 endpoints + [ up ] +
+
+
+ › +
+ grafana10.0.0.4:3100 + [ up ] +
+
+ › +
+ vaultwardenvault.tdvorak.dev + [ up ] +
+
+ › +
+ home-assistanthome.tdvorak.dev · 2 endpoints + [ up ] +
+
+
+ › +
+ nextcloudcloud.tdvorak.dev + [ up ] +
+
+
+ +

mockup F — console · [t] toggles theme · rows with “2 endpoints” open the chooser

+
+ + + +