Reference Layout Pack v1.0 — 2026

8 Layout
Patterns

A production-ready collection of filterable reference interfaces — each with a distinct aesthetic, live-filtering controls, and contextual sidebar panels. Copy, adapt, and deploy.

8
layout types
8
distinct aesthetics
0
js deps
∞
use cases
All layouts
Built
01
Filterable Reference Table
Prompt Engineering Technique Map
Searchable index of 18 prompting patterns with category, token cost, and model compatibility filters. Dark monospace editorial aesthetic.
Table Search + filters Sidebar panels Dark / mono
Built
02
Field Guide
Live Event Production Gear Map
Department-sorted gear reference with signal chain positions, failure modes, and criticality tiers. Warm amber editorial magazine aesthetic.
Table 4-column filter Field notes sidebar Dark / warm
Built
03
Capability Comparison Map
Home Automation Platform Map
Head-to-head feature comparison with live filtering, scored bar charts, and protocol support panel. Steel blue precision instrument aesthetic.
Comparison table Score bars Protocol sidebar Dark / blue
Built
04
Decision Matrix
Weighted Decision Scoring Matrix
Real-time weighted scoring across multiple options and criteria. Drag sliders to reweight criteria and watch the winner update live. Cream and ink editorial aesthetic.
Matrix grid Live sliders Auto winner Light / editorial
Built
05
Timeline / Phase Roadmap
Project Phase Roadmap
Expandable phase blocks with task-level detail, owner, effort, and status. Filter by phase status. Progress bar per phase and overall percentage. Forest green geometric aesthetic.
Expandable rows Task detail Status filter Dark / green
Built
06
Kanban Status Board
Project Status Board
Five-column work status view with type, owner, and priority filters. Cards show ID, priority dot, type tag, and assignee. Concrete brutalist light aesthetic.
Kanban columns Priority / type Live filter Light / brutalist
Built
07
Profile Directory
Team Directory Index
Filterable profile card grid with persistent detail panel. Click any card to expand full profile with bio, skills, and metadata. Warm purple luxury aesthetic.
Card grid Detail panel Avatar system Dark / purple
Built
08
Client Portal Intake
ShieldBox Event Quote Request
Editorial client-facing intake and proposal page for a fictional event security firm. Includes scope toggles, billing selection, risk snapshot, and print-ready layout.
Intake sheet Editorial UI Accessible controls Print-ready
09
Coming next
Stats Dashboard
Metric cards, sparklines, and time-range controls. Designed for reporting, analytics, and ops monitoring use cases.
Metric cards Sparklines Time filters