Give every chip three distinct visual states — idle (surface + border, tappable but not chosen), active (filled + check, clearly selected), and disabled (dimmed, no results behind it). If active looks like idle, the filter feels broken.
Make the combination logic legible: OR within a group widens the net (more colors = more matches), AND across groups narrows it (adding a size filters the set down).
Update the result count on the same frame as the tap. If the number doesn't move, users read it as 'nothing happened' and tap twice.
Always ship a single clear-all reset. Stacked filters trap users, and one tap back to zero is the escape hatch — pair it with a live count so the reset is legible.
When chips outrun the screen, keep them in one horizontal scrolling row with a right-edge fade that hints at more. Wrapping into a multi-row wall buries the results below the fold.
Pin active filters in a sticky summary bar on top so users can always see why the list shrank.
Do / Don't
Do: Update the result count instantly on every tap, same frame as the state change
Do: Give each chip clearly distinct idle, active, and disabled states
Do: Offer a single clear-all reset paired with a live result count
Don't: Let active chips look identical to idle ones — the filter reads as broken
Don't: Wrap overflowing chips into a multi-row wall that pushes results off-screen
Don't: Leave the count unchanged after a tap — users assume it failed and tap again
The Design System Blueprint
An 11-page visual guide to consistent, scalable UI: colors, typography, spacing, components, motion.
