Phase 17 — Polish

Component index

Every reusable component in the product, with its class contract, a live specimen and the page to see it working in anger. Specimens render from the real CSS — what you see here is what ships. 140 pages draw from exactly this list.

Buttons & actions

One primary action per view. Outline for equal-weight alternatives, ghost for tertiary, and the small size only inside dense tables and toolbars.

Classes: .apx-btn · -outline · -ghost · -sm · -block · [disabled]
Live: storefront/product.html
Spec: 02 · Components

Badges & status

Badges label things; status pills track things through time. Every status colour ships with its soft fill and border pair, and every pill carries a dot plus words.

Shipped Low stock Refunded Draft

Confirmed Shipped Delivered Failed

Classes: .apx-badge-* · .apx-status .apx-status-*
Live: orders/tracking.html
Spec: 05 · States

Forms & input

Persistent labels, errors in words below the field, validation on blur. Checkboxes and switches are 44px targets; consent switches ship in the off position.

Email address

Email me order updates

Marketing emails (off by default)

Classes: .apx-field · .apx-label · .apx-input · .apx-check · .apx-switch
Live: checkout/address.html
Spec: 02 · Components

Cards & surfaces

Three elevations of "thing on a page": card for content with actions, panel for grouped controls, well for inset context. Shadows are green-tinted — never neutral grey.

Card

Content + actions

Panel

Grouped controls

Well

Inset context

Classes: .apx-card(-body) · .apx-panel · .apx-well
Live: account/dashboard.html
Spec: 02 · Components

Money & stock

Prices show GST-inclusive by law and by choice; sale prices strike the old one out in red and only then. Stock dots never appear without their words.

~~$89.00~~ $62.30 WELCOME10 SPRING-15

In stock Low stock Out of stock Backorder

Classes: .apx-price · .apx-chip · .apx-coupon-code · .apx-stock-*
Live: storefront/product.html, cart/cart-coupon-applied.html
Spec: 03 · Product card

Process & data

Steppers for journeys you finish, timelines for journeys the courier finishes, tabs and pagination for data you scan. Breadcrumbs say where you are, never where you've been.

1Bag 2Address 3Payment

4242 tabular figures · monospace for codes & hashes

Classes: .apx-steps/.apx-step-* · .apx-timeline · .apx-tabs · .apx-pagination · .apx-breadcrumb · .apx-code-mono
Live: checkout/payment.html, orders/tracking.html
Spec: 04 · Global UI

Overlays & feedback

Modals confirm the dangerous, drawers hold the persistent (cart, filters), toasts report the done. All three lock scroll, close on Escape and return focus to their trigger.

Modal — destructive confirms and address edits; never marketing.

Drawer — cart (end) and filters (start); dim 48%, body scroll locked.

Toast — "Added to cart", "Coupon applied"; auto-dismiss 4s, pause on hover.

Classes: .apx-modal-* · .apx-drawer-* · .apx-toast*
Live: storefront/home.html (cart drawer), 01 · Tokens (motion demo)
Spec: 04 · Global UI

Admin family

A parallel chrome in admin.css: darker, denser, keyboard-first. Storefront components never leak in and vice versa — the two families share tokens only.

.adm-brand / .adm-content / .adm-head — shell & page heads with sub-lines for context.

.adm-kpi(-figure/-label) — metric cards with comparison deltas and GST footnotes.

.adm-stepup · .adm-cell-yes/-no · .adm-hash — trust-sensitive additions from P14.

Source: assets/css/admin.css §A–§E
Live: admin/dashboard.html, superadmin/roles.html

Document artefacts

Components for things that aren't screens: an email in an inbox, a fault page, a legal document. Each ships its own frame so context survives a screenshot.

404

Plain-English box: the legal-prose pattern — summary first, clauses after.

Classes: .eml-* (email frame) · .err-* (fault pages) · .apx-prose/.lg-* (documents)
Live: emails/order-confirmation.html, errors/404.html, legal/terms.html
Spec: 07 · Deltas §D–E