Signal Card — Expanded View

Production-accurate design spec for elaborated signal cards. Uses exact design system classes, tokens, and HTML structure. New elements marked in the notes below.

Product listing
Filter discoverability
Product listing filters and sort options are easy to find and use — participants confidently narrow results by price, material, size, and style without guidance.
Discoverability SUCCESS
#2
Signal 0.49
Concentration 1.6× Agreement 3.0 Intensity 1.3
[01:00] p3 Strongest stand 179 that’s quite cheap a stobie bow frame with soft profilages and high legs the classic shape that will last for many years system response
[03:12] p3 Oh i like that hi it asked you to log in and says a greeting in swedish… i like the way ikea’s kept a pretty bit soul system response
[01:20] p4 Choose. Right. Add [to] shopping bag. … Oh, yes. Right. The pillow to go with it. That is reasonable. Add the pillow. system response
[02:38] p4 Add to shopping bag. And I’ve spent £947. system response
Hide 2/4 p1 p2 p3 p4
Homepage
Discoverability tension
The top navigation makes product categories easy to find, but editorial content on the homepage body competes with the shopping entry point, forcing some first-time visitors to scan past it.
Discoverability TENSION
#4
Signal 0.32
Concentration 1.3× Agreement 3.0 Intensity 1.0
[00:00] p2 This is my test file. I’m going to go looking for a bed at IKEA. I’m at ikea.com, which I found through Google. first-time use
[00:12] p2 … I don’t need that. Beds and mattresses. That’s easy. That’s in the top navigation. visible action
[00:30] p3 Fresh folkloric style the on jangie collection okay okay that’s… ikea stories but we just want to go shopping which at least is wealth it’s a big yellow sign okay i’m going to do that visible action
Hide 2/4 p1 p2 p3 p4
Category navigation
Discoverability gap
The category navigation structure hides specific product attributes (like bed sizes) and forces participants to explore multiple paths — Products, Rooms, Ideas — before reaching their target.
Discoverability GAP
#5
Signal 0.25
Concentration 1.5× Agreement 2.0 Intensity 1.0
[00:45] p3 I’m looking for a bed… beds and mattresses. Beds double beds but i don’t see king size hidden feature
[01:49] p4 So now I need the bed. Let’s go back to… Products. Rooms. The bedroom. Ideas. What’s new? … I’ve flung my way to the bed section again. exploration
Hide 2/4 p1 p2 p3 p4
Homepage
Response delay
The homepage fails to acknowledge clicks immediately — the participant had to click multiple times before the navigation responded, creating uncertainty about whether the interface was working.
Feedback RECOVERY
#7
Signal 0.10
Concentration 0.8× Agreement 1.0 Intensity 1.5
[00:19] p2 And I’m clicking. Why is that not working? delayed feedback
[00:35] p2 … Ah, it worked that time. Okay, and then beds. system response
Hide 1/4 p1 p2 p3 p4
Design spec notes — what’s production code vs. new

Existing (exact copy from analysis.css, badge.css, blockquote.css, tokens.css):
• .signal-card, .signal-card-top, .signal-card-identity, .signal-card-source — card shell
• .signal-card-location — heading (reused as the signal name)
• .signal-card-metrics with .metric-label / .metric-value / .metric-viz — 3-column metrics grid
• .conc-bar-track / .conc-bar-fill — 96px × 6px bar with 0.45 opacity fill
• .intensity-dots-svg — exact SVG from Metric.tsx IntensityDots() (r=5, cx0=7, gap=16, clipPath halves)
• .badge with var(--bn-radius-sm) (3px) — not 9999px pills
• .signal-group-badge — font-weight: var(--bn-weight-emphasis)
• .signal-quote-tag — tag badge in quotes
• blockquote .quote-row .timecode .quote-body .speaker — exact quote structure
• .signal-card-quotes with .signal-card-footer — quote container + footer
• .participant-grid .p-box .p-present .participant-count — participant mini-badges with color-mix()
• .signal-card-link .signal-card-toggle — footer link
• All tokens: --bn-weight-*, --bn-colour-*, --bn-space-*, --bn-radius-*, --bn-group-*, --bn-ux-*-bg, --bn-emo-*-bg
• Dark mode via light-dark() with color-scheme — exact production pattern

New (to be added to analysis.css):
• .signal-card-right — flex column wrapper replacing flat .signal-card-metrics on the right side
• .signal-card-badges — row of group badge + pattern badge
• .pattern-label + .pattern-success|tension|gap|recovery — coloured allcaps pattern type badge
• .signal-rank — #N counter in muted mono
• .signal-sparkbars / .signal-sparkbar — mini bar chart inside the Signal row’s .metric-viz cell. N bars for N signal cards. Width = 96px (matches .conc-bar-track). Grey bars at max 0.45 opacity; current card’s bar uses var(--card-accent) at full opacity. Heights and opacities proportional to real signal values, normalised to max
• .signal-elaboration — one-sentence finding. <strong> wraps the core assertion (roughly the first third), ending at the first natural punctuation break (em dash, comma before dependent clause, or parenthetical). Regular weight for evidence/nuance/specifics after the break

Badge colour: uses var(--bn-ux-1-bg) / var(--bn-emo-1-bg) — the OKLCH codebook tag colours from tokens.css, not custom colour sets

Card accent: --card-accent is a vivid, light version of the codebook group hue — bright enough to pop at small bar scale against grey context. UX set: #71DAFF (cyan-blue), emo set: #FF8FAB (pink). In production, derive from the codebook OKLCH hue with high lightness + chroma. Present participant badges reuse the same variable via color-mix(in srgb, var(--card-accent) 12%, var(--bn-colour-bg))