Design tokens
Every colour, size, radius, shadow and duration in ApexCommerce is expressed once, here. Components consume tokens — they never hard-code values. This is what keeps 150+ screens across storefront, customer dashboard, admin and super-admin visually identical.
Colour system
A green-tinted neutral palette, not grey. Two accents with strictly separated jobs: amber lives on dark surfaces only (it fails AA on white), and red is reserved for price, sale and destructive/error — never decoration.
Primary — deep eucalyptus
Accent — Australian amber
--apx-accent-text #B45309.Neutrals & surfaces
Status
Order lifecycle palette
Ten statuses, one meaning each. The same nine classes are reused verbatim in customer orders, admin orders, returns, refunds and audit logs.
In context
Eucalyptus Hooded Parka
Country Road · Outerwear
Free express delivery over $150
Dispatched from Melbourne. Metro 1–3 business days, regional 3–6.
Typography
Fraunces carries display and H1–H3 — a variable serif with soft optical sizing that reads Australian-premium rather than tech-generic. Inter carries everything a customer has to act on: body, UI, forms, tables. All numerals that can be compared use tabular figures.
title attribute.Spacing system
A strict 4px base scale. Spacing communicates grouping: related items sit 4–8px apart, groups 16–24px, sections 48–120px. If a gap isn't on this scale, it's wrong.
| Token | Value | Applied to |
|---|---|---|
| --apx-gutter | 16 → 20 → 24px | Grid gap between cards |
| --apx-container-pad | 16 → 24 → 32px | Page edge padding |
| --apx-section-y | 48 → 64 → 80px | Vertical rhythm between page sections |
| --apx-container-max | 1344px | Storefront content width |
| --apx-filter-w | 280px | Shop filter sidebar (desktop) |
| --apx-sidebar-w | 264px | Admin navigation sidebar |
| Card padding | 20px mobile · 24px desktop | .apx-card-body |
| Touch target | 44 × 44px minimum | All mobile interactive controls |
Border radius
Radius scales with surface size: small controls are tight, large surfaces are soft. Pill is reserved for chips, badges and switches — never for primary buttons.
Shadow system
Shadows are green-tinted at very low opacity (6–20%), never neutral black. Elevation is earned: only
floating surfaces (dropdown, drawer, modal, toast) get more than sm. Cards at rest use xs.
outline on :focus-visible so it survives
Windows High Contrast mode and greyscale printing.Motion & easing
Motion answers one question: “where did that come from, and where did it go?” Durations stay between 120–480ms. Nothing bounces except the cart badge and wishlist heart.
| Token | Value | Use |
|---|---|---|
| --apx-dur-fast | 120ms | Colour, background, opacity on hover |
| --apx-dur-base | 200ms | Buttons, inputs, dropdowns, tab underline |
| --apx-dur-slow | 320ms | Drawers, modals, toasts, page reveal |
| --apx-dur-slower | 480ms | Staggered card grid reveal (45ms per item, max 8) |
| --apx-ease-out | cubic-bezier(.22,1,.36,1) | Default for anything entering |
| --apx-ease-in-out | cubic-bezier(.65,0,.35,1) | Progress bars, indeterminate loaders |
| --apx-ease-spring | cubic-bezier(.34,1.56,.64,1) | Cart badge pop, wishlist heart, switch thumb only |
Hover / tap to replay each transition.
Breakpoints & layout grid
Bootstrap 5 breakpoints, unmodified — so the Next.js port can use the grid as-is. Layouts are designed mobile-first and restructured at each step, not scaled.
Layering
A fixed z-index scale prevents the classic “modal under the sticky header” bug across 150 screens.
| Layer | Token | z |
|---|---|---|
| Mobile bottom nav | --apx-z-bottomnav | 1015 |
| Announcement bar | --apx-z-announce | 1020 |
| Sticky sub-header / admin topbar | --apx-z-sticky-sub | 1025 |
| Main header | --apx-z-header | 1030 |
| Drawer backdrop | --apx-z-drawer-backdrop | 1040 |
| Drawer / admin sidebar | --apx-z-drawer | 1045 |
| Modal | --apx-z-modal | 1055 |
| Toasts | --apx-z-toast | 1080 |
| Tooltips | --apx-z-tooltip | 1090 |
Usage rules
These rules are what stop the product drifting into a generic template. They are enforced in the Phase 17 audit checklist.
--apx-accent-text), and for low-stock warning states.