Each widget is designed here in isolation, in its own container-query sandbox,
decoupled from where it lands on a dashboard. Drag a sandbox's right edge — or hit a face preset —
to feel its compact / normal / expanded faces resolve. Colour comes from the real design-system
tokens; Scheme flips the shipped data-color-theme="edo" palette and
Mode flips color-scheme — so the theme matrix falls out of tokens, not hand-tuning.
The settled bricks in the RAM grid. cfull bricks (stats · verbatim · sessions) are full-width row-breaks;
the tiling bricks (Sections | Themes · Signals · Coverage) pack between them, so it never goes ragged-right. Each brick is its own container,
so widgets adapt their faces to brick width while the grid changes column count — both at once.
| ID | Participant | Start | Duration | Interviews |
|---|---|---|---|---|
| s1 | P1 · Parent | 09:12 | 28m | Zoom |
| s2 | P2 · Student | 11:40 | 19m | Teams |
| s3 | P3 · Designer | 14:05 | 24m | Meet |
Card internals MIRROR .bn-project-stat (28px display value, label, paired cards share one border).
Redesign: the container goes from flex-wrap (content-sized, ragged right) to a
justified grid — fixed --bn-space-md gutters, cards flex to fill, flush both edges.
Singles span 1 unit, pairs span 2. Every card is conditional, so units are data-driven (1–8).
width — · —
Card styling MIRRORS .bn-featured-quote (label-size text, bracketed context, real mono .badge footer).
Measure-bound at both ends — min 390px and max 544px — so a line stays between 7.5 and ~11 words in every face
(calibrated at ~45.6px/word for 13px text). Responsive at 1·2·3·4·5; text size constant throughout.
width —
The kudos/kvetch order book, conformed: it’s the real .bn-featured-quote card in two polarity columns
— zero new elements. Dropped the order-book “spread” (false signal — the paired quotes aren’t counterparties).
Length is the challenge: two columns halve the width, so a real 79-word quote is worse here than in the single row —
same fix, the featured pull/clamp. Toggle Clamp → 0 to see the wall. width —
Card MIRRORS .signal-card (source eyebrow · 18px heading link · finding · pattern label), but
trimmed to the Signal metric only — right-aligned, tucked under the tag. No confidence badge — hidden in the real UI.
Cards are wider than quotes (~480 min), so you get 3 quotes / 2 signals, or 5 quotes / 3 signals.
width —
Card styling MIRRORS .bn-dashboard-pane--pair + .bn-dashboard-nav (accent links, shared border, no divider,
no counts — the shipped dashboard has none). Redesign: columns are ~200px (≈30 chars, non-wrapping at 13px) and the total is split
between the groups in proportion to their counts, so columns come out ~equal length even when lopsided. Stress-test the counts above;
drag the sandbox to add columns. width — · —
This nav-list pair is now the compact face of the Signal grid
(dashboard-signal-grid.html, designed in a parallel session, 17 Jul 2026): the rows are the same section/theme labels, and the expanded face reveals a
participant × cell matrix (hue = sentiment, depth = count, dot = residual). Same widget, richer with width — not a replacement. See signal-grid.md.
MIRRORS the shipped .bn-coverage-box — 8px bar, round legend dots. Colours are palette-specific:
flip Scheme to Edo and the bar re-tones (blue→slate, ochre) while the sentiment widgets stay put.
Session 1
Session 3
“Where do participants agree — and disagree?” Rows = participants, columns = sections, cell hue = dominant sentiment, cell depth = quote count. Reads Scharp’s three continua at a glance. width —
Beds category is pervasive (6 of 8) — everyone went, nobody agrees. Aftercare is sporadic (1) but maximum-heat.
p1 is unbalanced (front-loaded, healthcare). p3 is balanced with high variance.
Checkout is split (p3 satisfaction, p4/p6 frustration) — live disagreement worth a rewatch.
⁺ marks an intensity-3 quote in the cell. Method after Scharp, K. (2021), J. Communication 71(4). Empty cells are information — who didn’t reach a section.
More benches land here as Phase 1 proceeds (friction heatmap → saturation → fingerprint → …). Gallery lives flat in docs/mockups/ so it stays in the dev About→Design listing.