The Library and the Workbench

Three studies of one question: how to move between a calm, explorable design system and a focused place to decide what new product evidence means, without losing your bearings.

The assistant is simulated. The grouping, counts, suggestions and “wired to” checks are scripted to show the experience, not a working analysis.

The shared scenario

Library17 component families in 5 categories, two brands (Waypoint and Kestrel), and a mix of settled, open and agreed-but-not-built families.

Primary actionsize.control.md 40px · radius.control 6px · color.action.primary per brand · Default, Hover, Disabled.

Checkout · 124px corners, hardcoded. Everything else wired. One instance, on a refund screen, is an outlier.

Search · 648px to match the search field. Height and fill hardcoded; the fill only looks right.

Kestrel · 40Teal fill from the Kestrel value of the same token. The theme working, not a new component.

154 matchWired to tokens. Filed automatically; never shown as work.

A · Embedded workbench

The workbench unfolds inside the catalogue

Open study A

The library is a grid of specimen tiles. Opening a family unfolds its workbench under that row, pointing back at the tile, so the rest of the system stays on screen. Definition on the left; observed groups on the right, each opening into an inspector in place.

Study A library grid — **Library.** One sentence of condition, three filters.

Study A Checkout inspection — **Investigation.** Corner circled; wiring per property.

Study A defining the Large variant — **Decision.** Define Large with tokens, not the observed hex.

Study A library after decisions — **Result.** Tile shows changes waiting on two teams.

B · Focus workspace

A quiet index, then a dedicated split room

Open study B

The library is a typographic index with a one-line map of every family. A family opens into a full workspace: approved on the left, observed on the right, compared property by property with visual crops. The map rides along in the top bar, so you always know where you are.

Study B library index — **Library.** Map strip; group by category, need or owner.

Study B property comparison — **Investigation.** Corner crops, height bars, wiring.

Study B proposed variant — **Decision.** Large appears dashed in the approved side.

Study B library after — **Result.** Entry glows, lists decisions, links to revisit.

C · Sorting table

Piles, a belt and buckets shaped like the component

Open study C

The library is a board of family cards; unsorted evidence piles up behind the card it probably belongs to. At the table, piles ride a belt above buckets for the definition, variants, brand themes, exceptions, other families and “not sure”. Drag, or pick up and place. A live library entry shows the result before you commit.

Study C collection board — **Library.** Piles behind cards show where judgement is needed.

Study C closer look — **Investigation.** Overlay, wiring, and all 12 fanned.

Study C variant drop — **Decision.** Drop into Variants; preview ghosts Large.

Study C board after, Kestrel — **Result.** Piles gone but the set-aside outlier; Kestrel theme.

Comparison

	A · Embedded	B · Focus	C · Sorting
Orientation	Best. You never leave the catalogue; the arrow ties the workbench to its tile.	Good. You leave, but the map strip and crumb keep you placed.	Weaker. The table replaces the board; orientation comes from the bucket names.
Inspecting a difference	Clear: one magnified pair plus a compact wiring list.	Strongest: each property gets its own visual crop, side by side with its token.	Good at a glance (overlay) and best for spotting an outlier among many instances.
Making the decision	Pick a place, answer one follow-up. Feels like editing the page.	Chips in a decision bar; the approved side previews the result.	Most physical and memorable. Preview card shows the library before you drop.
Meaning vs wiring	“Wired to” column, hardcoded in orange.	Each crop labelled with its token or “hardcoded”.	Shown in the closer look; less visible on the pile itself.
Approved vs built	“Agreed, not built yet” sits in the definition, with team.	Same, plus a closing summary before you return.	Each landed pile carries “to build: team”; board marks “building”.
Brands	One switch re-themes every tile and the definition.	Same switch; token chain shows the brand alias.	Brand themes are a bucket, which makes “themed, not separate” very explicit.
Correcting	Reopen a group from its row; Undo toast.	Revisit link on the library entry; Undo toast.	“Back to belt” on any landed pile; Undo toast.
At scale	The page grows long when several families are open; works best one family at a time.	Scales best: the index and map handle 20+ families and grouping by owner or state.	Belt handles a few piles well; needs pile-of-piles grouping beyond ~8.

How volume stays manageable

Hundreds of instancesInstances are grouped by what differs. Matching ones are filed and only counted. A designer sees a handful of groups, each with one representative and any outliers.

20 familiesThe library answers “what needs me?” in one sentence and one filter, or one map strip in B. Settled families stay quiet.

Several themesBrands are values of the same tokens. One switch re-themes everything; themed instances confirm a mode rather than creating families.

Owners and teamsAgreed changes carry the owning team. B’s “group by owner” turns the same library into each team’s to-build list.

Bulk with careEvery placement states its scope (“11 of 12”) and lets an outlier stay open, so a bulk decision never hides uncertainty.

Strongest patterns

Workbench anchored to its tile (A)Investigating in place, with a visible tie back to the library, removes the “where am I?” cost almost entirely.

Property crops with wiring labels (B)Each property shown as a small visual (corner, height, swatch) with its token or “hardcoded” beside it. The clearest way to separate how it looks from what it is connected to.

Family map strip (B)One line, one cell per family, coloured by state. Works as overview, navigation and orientation at once.

Buckets shaped like the component (C)The options are the component’s own anatomy, so placing evidence visibly builds the system instead of filling a form.

Piles behind library cards (C)Unsorted evidence lives where it probably belongs, so the library itself shows where judgement is needed.

Define the variant, don’t copy the instance (all)Creating Large asks for its intended tokens, and the hardcoded fill is not carried over.

Scope with an exit for outliers (all)“Applies to 11 of 12, Refund left open” keeps bulk decisions honest.