Phase 17 — Polish

Design-system deltas

Phase 01 froze the foundations. Everything added since — every new component family, CSS section and behavioural rule — is logged here, with the page it first shipped on. This is the changelog the Next.js build diffs against; if a class isn't in Phase 01 or in this page, it doesn't exist.

Storefront & customer (P02–P12)

The shopping surface grew from tokens to a full commerce language: catalogue states, money feedback, checkout ceremony, and a customer account that reads like a service desk, not a settings dump.

apex.css §4–§9 — product-card states: out-of-stock and unavailable variants with watchlist CTA instead of a dead buy box · first shipped storefront/product-out-of-stock.html.

.apx-coupon-* — coupon applied / rejected feedback with the reason in words, never a silent no-op · first shipped cart/cart-coupon-error.html.

.apx-steps / .apx-step-* — checkout stepper with done/current states and guest-vs-account fork made visible · first shipped checkout/address.html.

.apx-price sale strikethrough + unit pricing; .apx-stock-* dots always paired with a text label · first shipped storefront/shop.html.

.apx-timeline — order tracking scan timeline with proactive delay cards on top · first shipped orders/tracking.html.

Account family: notification matrix, linked services, rewards ledger, security with step-up · first shipped account/notifications.html, account/security.html.

Returns wizard + ACL decision panel; review composer with verified-buyer badge · first shipped returns/start.html, reviews/write.html.

Admin & operations (P13)

A second chrome for people who live in this tool eight hours a day: darker sidebar, denser type, tables that sort and scan, and money surfaces with limits written into the UI.

admin.css §A–§E — #0E2B21 sidebar, topbar with wrapping search, .adm-kpi metric cards, sortable data tables · first shipped admin/dashboard.html.

Inline flex bar charts with role="img" + aria-label — no chart library, no canvas, screen-reader safe · first shipped admin/reports.html.

Fulfilment board, refund queue with the $500 single-click limit surfaced at the button, exception list · first shipped admin/fulfilment.html.

GST/settings locks: inclusive-display locked ON with the reason, BAS figures with lodge-by dates · first shipped admin/settings.html.

Super-admin & platform (P14)

The layer above admin: who can do what, what changed, what's flagged. Built on the admin chrome with three additions for trust-sensitive screens.

.adm-stepup — step-up authentication interstitial before roles, keys and audit exports · first shipped superadmin/roles.html.

.adm-cell-yes / .adm-cell-no — permission matrix cells readable by shape and text, never colour alone · first shipped superadmin/permissions.html.

.adm-hash — monospace hash chips for audit rows and API keys, select-all on click · first shipped superadmin/audit.html.

Transactional emails (P15)

Emails ship as design artefacts: a client-frame shell so reviewers see the inbox context, plus an annotation rail carrying trigger, merge tags and the SMS mirror.

apex.css §34 .eml-* — client chrome with anti-phishing line, 640px message on grey canvas, legal footer · first shipped emails/order-confirmation.html.

Annotation rail pattern: "behind this email" spec + rule cards (quiet hours, SMS mirror length, batch start) · first shipped emails/shipping-update.html.

Errors & legal (P16)

Fault pages and long-form documents got their own voice: own the mistake, protect the shopper, date every promise — and let legal prose breathe with a real reading layout.

apex.css §35 .err-* — error hero with Fraunces code, suggestion list, trace chip; standalone shell for maintenance/offline · first shipped errors/404.html.

.apx-prose + .lg-toc / .lg-summary / .lg-meta — legal reading layout with sticky contents and plain-English boxes · first shipped legal/terms.html.

Rule deltas since P01

Behavioural rules added as the product met real life. These bind every surface, including pages not yet designed.

Honest scarcity: real numbers only ("41 watchers, 60 units"), no countdowns, no fake holds, watchlists re-arm themselves.

Dated deadlines: "by Tuesday 15 September", never "soon" — refunds, maintenance windows, gap fixes alike.

GST line mandatory & exact on anything that shows money: cart, checkout, emails, invoices, refunds.

Consent is unticked: marketing checkboxes never pre-filled; guests never marketed to; quiet hours 8am–8pm.

Dark patterns banned: no confirmshaming, no pre-filled extras, no hidden unsubscribe, "empty it" links honoured, reject = same size as accept.

Error pages own the fault: cart saved, no double charge, trace reference offered, humans reachable.

Failures published: accessibility gaps and missed promises ship with fix dates in public-facing copy.

What never changed

Seventeen phases, zero drift on the foundations. Anything below that moves gets a design-system review before it merges.

Primary #123F31, admin sidebar #0E2B21, amber via accent-text #B45309 on light, red for price/sale/destructive only.

Fraunces for display/H1–H3; Inter for everything actionable; tabular figures for comparable numbers.

4px spacing scale, radii xs→pill, green-tinted shadows, focus ring 0 0 0 3px rgba(45,106,79,.28), motion 120/200/320/480ms.

Bootstrap as mechanics only — grid, collapse, offcanvas; never its visual classes raw.