Four visual approaches for the redesigned Projects tab. Same 5 SRSW projects, different framings. Pick the one you want me to build for real.
my pick: A + D hybrid
A · Bento Grid
Notion / Linear pattern · 2026 dominant
Each project is a tile in a 12-column grid. Tile size = priority. Status pill + phase + progress + counts visible without clicking. Top 2 projects get hero-sized tiles; Growth sub-projects share a cluster row.
Sample Bar Program
Rack-letter v4 · 144 bottles · ongoing audit
ActivePhase: v4 rollout
Progress75%
27 open todos22 open Qslast activity: 2d ago
SRSW Reserve
srsw-reserve.pages.dev · live demo
LivePhase: backend scaffolding
Progress60%
5 open Qslast: 6d ago
Growth Strategies · 3 sub-projects
Competitive Intel
Research complete · action items pending
5 openPipeline
NY Shipping
Concept · awaiting sampling app
7 openBlocked
Wine Club
Playbook done · awaiting greenlight
3 openBlocked
Recommendation. Best fit for daily glance. Tile size signals importance, all 5 projects visible without scrolling, drill-down (not shown — would expand a single tile to fill the pane). Buildable in pure CSS grid, no library.
B · Radial Tree Graph
Mind-map / Whimsical pattern
SRSW at the center, 5 project nodes orbiting, sub-nodes radiate further out. Click a project node → side panel shows its detail. Pure SVG, ~150 lines. Most "tree-graph" of the four — also the least info-dense at a glance.
Verdict. Best visual "tree" aesthetic, but circles can't pack rich info like cards. Works as a TOGGLE on top of bento — not as the primary view. Sub-node labels get crowded above ~5 children per project.
C · Roadmap Timeline
GitHub Projects v2 / Linear roadmap pattern
Each project = a horizontal lane. Time on x-axis (past · now · +1mo · +3mo · +6mo). Solid bars where work has happened, faded bars for future phases. Vertical markers for milestones. Click a lane → side drawer with detail.
Past
−2mo
▼ Now
+1mo
+3mo
Sample Bar ProgramActive · 75% · v4 rollout
v1 → v2 → v3 → v4
v5 polish
SRSW ReserveLive · 60% · backend scaffold
Demo + UX
Backend integration
Competitive IntelPipeline · 40% · action planning
Research
Action plan
Quarterly refresh
NY ShippingConcept · 0% · blocked on Sample Bar
Concept
Phase 1 cohort
Wine ClubPipeline · 0% · awaiting greenlight
Playbook
Launch Structure A
Verdict. Killer if you want to see WHEN things happen. Trade-off: needs real date estimates in vault frontmatter for every project. Vault doesn't track dates rigorously today — would front-load a data-cleanup task before any UI work. Best as a Phase-2 view after the data exists.
D · Pipeline DAG
Buildkite / Jenkins / CI-aesthetic
Each project as a connected chain of phase nodes. Green = done · amber pulsing = current · faded = upcoming. Arrows between stages. Most engineering-flowchart feel — strongest "interconnecting pipeline" vibe of the four. Each pipeline self-contained in a card.
Recommendation #2. Strongest "interconnecting pipeline" vibe — exactly what you described. Reads like a CI dashboard. Trade-off: at a glance you see 5 pipelines stacked, but no progress-ring or aggregate status across all projects. Pairs beautifully with Bento (A) as the landing — bento for status overview, pipelines for the visual flow.
4 styles · 5 projects · same data · pick one (or a hybrid).Built 2026-05-25 · ↩ Command Deck