Components
Every control the product uses, in every state it must support. These are the exact implementations pages 02–16 reuse; a page that invents its own button is a bug.
Buttons
Six heights-free sizes, seven variants. Primary appears once per viewport — the one thing the user should do. Everything else yields to it.
Loading swaps the label for a spinner of identical optical weight and locks the button's width so the row never shifts. Disabled buttons keep their label — never an empty grey pill.
Form controls
Labels always sit above the field — placeholder-only labelling is an accessibility failure and looks broken once filled. Inputs are 46px tall with a 1.5px border: hairline inputs read unfinished at arm's length.
Search field & quantity stepper
Search is a pill with a leading icon, a clear button that appears only when there's text, and an optional suggestion panel (Phase 02). The stepper clamps at min/max and disables its own ends.
Checkbox · radio · switch
Custom-drawn but native underneath: real inputs, real focus rings, real keyboard behaviour. 20px boxes — the 16px Bootstrap default is a missed tap on mobile.
Validation states
Error copy says what's wrong and how to fix it. The message is wired with aria-describedby,
the field keeps its value on failure, and the first invalid field receives focus with a shake.
Australian address fields
The exact composition reused in checkout, saved addresses, returns and admin. State is a select (8 values), postcode is 4-digit numeric with per-state pattern hints, phone is +61 with a masked input.
Cards & surfaces
One card anatomy everywhere: optional header, body, footer. 1px border + xs shadow at rest;
md shadow + 2px lift on hover for clickable cards only.
Includes GST of $21.56. Shipping to VIC 3000.
Hoverable card: 2px lift + md shadow. Used for customers, reviews and report tiles.
Surface-2 inset for coupons, notes and secondary facts.
Pressed well for code blocks and API keys.
Badges, chips & counters
Badges state a fact (sale, new, low stock). Status pills state a lifecycle position. Chips state an active filter and are always removable. Counters are red when they demand action, neutral when informational.
Alerts
Left border carries the status colour; the fill stays soft so long copy remains readable. Title + text + optional inline actions. Dismissible alerts never hide information the user still needs.
card_declined. No money left your account. Try another card or contact your bank.Tabs
Line tabs for page-level switching (product detail, order detail). Pill tabs for in-card filters (reviews by rating). Active state is colour + weight + underline — never colour alone.
Tab one content. Switching animates a 200ms underline slide.
Specifications…
Shipping…
Reviews…
Breadcrumbs
Always present on category, product and account pages — never on marketing or checkout (where exits hurt conversion). On mobile the trail collapses to the last two crumbs.
Pagination
Numbered for SEO-critical listing pages; “Load more” inside modals and drawers. Range text states exactly what slice of results is visible — critical when filters are active.
Tables
Sticky uppercase head, tabular numerals right-aligned, 44px rows, hover tint, selection stripe. Below 992px every table swaps to a stacked data-row card — the mobile view is designed, not squeezed.
Tooltips
For one line of clarification only — never for essential instructions (those go in help text). Shown on hover and keyboard focus.
Dropdown menus
6px padding, 8px items, icons muted until hover. The account menu is the most-used dropdown in the product — it leads with identity, groups by intent, and puts sign-out in danger tone at the bottom.
Modals
Centred ≥576px, bottom sheet below that with a drag handle. Destructive modals name the object, state the consequence, and make the safe action the visual default.
Backdrop 48% deep-green · Escape + backdrop click close non-destructive modals only · focus is trapped and returned.
Toasts
Top-right on desktop, above the bottom nav on mobile, max four stacked, progress bar shows auto-dismiss. Success toasts for cart/wishlist include an inline “View” action so the user never loses their place.
Progress & step indicators
The checkout spine: done steps are tappable to go back, the current step has a halo, errors are red with an icon. The same component, vertical, becomes the order/return timeline.
- Bag
- Details
- 3Delivery
- 4Payment
- 5Review
- Order placed
- Packed at Melbourne DC
- In transit with AusPost
- Delivered
Ratings, price, avatars, media
Stars use the AA-safe ochre at 13px with half-star precision; the numeric rating is never colour-coded. Price stacks current → was → save, and the current price goes red only when discounted.
Tones map 1:1 to categories in Phase 02+ so listings look art-directed before photography exists.
Accordion & product rails
Accordion for long-form policy (one open at a time on mobile). Rails scroll-snap horizontally below 992px and become a clean 4-column grid above it — same DOM, no duplication.
scroll-snap on touch
4-up grid on desktop
no duplicate DOM
snap-align start