← POS Design System

Modifier Ingredient Card

The card used inside the modifier modal — distinct from the Product card. 176×100 · r:4 · metal-grey fill / grey-300 stroke · centred name (body1 · 500). Badges keep the product-card structure: Price +₼ navy top-right, StopLimit coral bottom-left, selection circle / qty / check bottom-right (2px inset), decrement half-out top-right. Add = green border + tint, Remove = red border + tint, Image = photo + 40% scrim.

Variants
tap once → select (qty 1) · tap again → increment · ⊖ decrements / deselects · remove-card → red check