Mode-dependent treatment. Light: washed (pale bg, dark text) for both AI and user tags. Dark: AI stays pale-on-dark; user tags switch to white-on-saturated. 0.72rem, 90% resting opacity, 100% on hover.
When asked to complete a purchase[04:23]"I keep clicking 'Continue' but nothing happens... I've tried three times now. Is the site broken or am I doing something wrong?" — p1frustration usability performance request +
[06:11]"Wait, where did my basket go? I was just on the checkout page and now I'm... on the homepage? I don't understand what happened." — p3confusion navigation disoriented basket +
[08:45]"I'm not sure I'd put my card details in here. There's no padlock icon and the URL looks weird... it just doesn't feel like a real checkout page." — p2doubt credibility security privacy +
[12:30]"Oh nice, the search actually shows results as I type. That's exactly what I'd expect from a site like this." — p1satisfaction expectation search +
[14:02]"Oh I love this! You can just drag things into the basket without leaving the page? That's really clever, I wish every site did that." — p4delight joy need basket +
[16:55]"Huh, that's not what I expected at all. I clicked 'Filters' and it took me to a completely different page instead of opening a panel." — p2surprise navigation mismatch filters +
[19:18]"I know exactly what to do here. The layout is really clear — basket on the right, delivery options, payment. Standard stuff, no surprises." — p5confidence expectation checkout +
[22:40]"In my day job I'm switching between Slack, Jira, and about four different spreadsheets just to track one project. It's... exhausting, honestly." — p3frustration tooling workflow need +
[25:03]"We usually do a team standup at nine, check the dashboard, then just... react to whatever fires come in. There isn't really a structured process." — p1workflow process workaround +
When asked about their experience with competitor products[28:17]"The other tool we tried had this brilliant feature where you could just... tag everything in bulk and then see it all on a board. We don't have anything like that. I'd pay extra for it." — p4delight request competitor willingness tooling +
[31:05]"My manager would never approve a tool that stores data outside the EU. That's the first thing she'd ask — where's the data going?" — p2doubt privacy compliance anxiety stakeholder +
[34:22]"The delivery estimate said 3-5 days but then at checkout it changed to 7-10. That's annoying — I was making a decision based on the faster number." — p5frustration credibility frustration delivery checkout +
5 sets at pentadic hue anchors (~72° apart). ±25° range per set, ~12° steps. Light mode: washed bg (L=94%, C=0.03). Dark mode: saturated bg (L=48-55%, C=0.09-0.12).
Auto-generated. Dark text on pale bg in both modes. Toggle above to hide.
Light mode: Both AI and user tags use dark text on pale background ("washed"). User tags at oklch(94% 0.03 H) — barely-there tinted wash. Quote text dominates; tags are quiet metadata.
Dark mode: AI tags keep existing dark-mode treatment (light text on dark-muted bg). User tags switch to white text on saturated coloured bg (oklch(50-55% 0.10-0.12 H)). Saturated pills work on dark backgrounds without dominating.
Opacity: 90% resting, 100% on blockquote hover. Hover signals interactivity (click for rename/filter/analyse).
Font: 0.72rem throughout (no reduction).
Placement: Inline below quote (unchanged). Right-hand gutter and two-column layouts explored in mockup-tag-placement.html and rejected.
Hue spread: ±25° per set (50° total, up from v3's ±12°). ~12° steps between tags. Better within-set distinguishability.
Chroma: 0.09-0.12 for saturated badges (dark mode), 0.03 for washed badges (light mode). Calmed from v3's 0.13-0.19.
Tag names: Mostly single word. Two words only where one is ambiguous.
AI workflow: AI tags bootstrap analysis (spot frustrations, find patterns). Once user tags are applied, AI becomes redundant — toggle off. This is the intended flow.