ux/nd: missing ingredient framing uses deficit language and warning color #42

New issue

Open

opened 2026-04-08 06:43:19 -07:00 by pyr0ball · 0 comments

pyr0ball commented

2026-04-08 06:43:19 -07:00

Owner

'You'd need:' header uses text-warning class (amber) and status-warning badge styling on missing ingredients. This frames the user's pantry as deficient — a friction point for users with RSD or anxiety.

Fix:

Change 'You'd need:' → 'Also needed:' or 'To complete this recipe:'
Change text-warning → text-secondary
Change status-warning chips → status-info or neutral
Element gaps card: 'Your pantry is missing…' → 'These would expand your options:'; card-warning → card-secondary

Refs: HIGH-N3, MED-N12

'You\'d need:' header uses `text-warning` class (amber) and `status-warning` badge styling on missing ingredients. This frames the user's pantry as deficient — a friction point for users with RSD or anxiety. **Fix:** - Change 'You\'d need:' → 'Also needed:' or 'To complete this recipe:' - Change `text-warning` → `text-secondary` - Change `status-warning` chips → `status-info` or neutral - Element gaps card: 'Your pantry is missing…' → 'These would expand your options:'; `card-warning` → `card-secondary` **Refs:** HIGH-N3, MED-N12