Guidelines

The rules that make this a design system, not just a component set — how to handle states, accessibility, and the words & numbers of commerce.

Never rely on color alone

Every state must combine color with text and behavior. “Out of stock” is a label + a disabled control, not just a grey button.

loading

Skeletons for content, spinner-in-button for actions. End labels with “…” (“Adding…”).

disabled

Reduced opacity + not interactive. Keep the label; don’t hide why it’s disabled.

error

Payment failed

Inline, next to the cause, and always include the fix — see Content tab.

low-stock

Low stock

Urgency cue. Pair with a count where possible (“Only 3 left”).

out-of-stock

Disabled control + “Sold out” label + overlay on media. Offer “notify me” where relevant.

preorder

Purchasable but labelled distinctly; show the expected ship date nearby.

empty

EmptyState

Icon + real text + a next action. Never render a broken/blank region.

order status

ProcessingPre-orderBackorderedShipped

processing · preorder · backordered · shipped · partial · delivered · cancelled · refunded.