Design Hub Studio
The system as a live preview canvas. Every primitive in context, every composition rendered, every drift named. Use the left rail to jump between sections, or pick a starting point below.
Primitives
Each section follows the same four-part shape: gallery, when to use each, drift to avoid, composition. Sections own their drift inventory by tagging anti-patterns to the principle they violate.
Typography
Hierarchy, tracking, leading, composition, whitespace.
Navigation
Top nav, sidebar, breadcrumb, tabs — one job per level.
Buttons
Five variants ordered by visual weight; ghost is the default.
Badges & tags
Pill = status, rect = category. Same colors, different shape.
Forms
Alignment, control semantics, validation, rhythm.
Cards
Bounded containers — only when grouping conveys meaning.
Tables
Compact, standard, comfortable. Numbers right, text left.
Feedback & overlays
Tooltip → alert → toast → popover → dialog. Pick the lowest rung.
Progress
Linear, circular, indeterminate. Don't fake percentages.
Empty, error, loading
Three states between "nothing here yet" and "everything works."
Icons & glyphs
Sizing tokens, icon-only vs labelled, decorative vs meaningful, one library per product.
Token reference
Color, shadow, radius — raw tokens exposed.
Examples
Realistic product UIs assembled from the primitives above. Useful when a section's "composition" sub-section has whetted your appetite for what a full page looks like.
Workcell overview
A dashboard. Stat tiles, recent runs table, page header — Patterns 7.9 / 7.11 / 4.7.
Method library
A list view of methods using the plate-list pattern (7.10), with a worked detail page.
Run monitor (full app shell)
Full-viewport Titan-style app — title bar + two rails + work surface. Pattern 7.12 at scale.