A16A MARKETPLACE · DESIGN KIT
Design system
The complete visual language behind the twelve-artboard template kit. Switch the colour mode below — the entire site re-tokens without a re-layout.
Colour mode
Your choice is stored in this browser only.
01
Colour tokens
Marketplace Blue is the current mode; Brand Neutral preserves the original VI palette as a rollback.
navy900
#0B2239navy800
#123A5Cnavy700
#1B5A8Camber500
#FFB000dealRed
#B8402ClinkTeal
#0B6E7Apage bg
#F5F7FAsurface
#FFFFFF
Brand Neutral values
Ink #1C1A17 · Rice paper #F5F1E8 · Cinnabar #9E3D32
02
Typography
Outfit for headings, Inter for interface copy. Both fall back to the system stack if Google Fonts is unavailable.
H1 · Outfit 800Everything you need
H2 · Outfit 700Shop by department
H3 · Outfit 600Secure Stripe checkout
Body · Inter 400 / 500 / 600
A multi-department online marketplace. Everyday essentials, crafted objects and personalised gifts, with free standard shipping on orders over $35.
03
Grid & spacing
Desktop 1440 canvas / 1280 content / 80px outer margin / 240px cards / 16px gap. Mobile 390 / 16px inset / single column.
1440 canvas
801280 content80
240px card
171px mobile
BreakpointLayoutNavigation
≥ 1200px3-column hero, 5-column gridFull header + department strip
900–1199pxHero rail stacks, 4-column gridCompact header
600–899px2–3 column gridSearch + scrollable departments
≤ 599pxSingle column, 171px cardsMobile header + bottom tab bar
04
Components
Every control keeps a 44px touch target and a visible :focus-visible ring.
- Cart
- 2Checkout
- 3Complete
05
Department accents
The wordmark stays a single near-black colour; only department markers carry these accents.
Home & Kitchen
#2F7A5E
Electronics
#1B5A8C
Fashion
#8A4B7C
Beauty
#B0576B
Sports & Outdoors
#2E7D6F
Toys & Kids
#D08A2C
Food & Grocery
#A2642A
Pet Supplies
#5A7A9B
Arts & Crafts
#9E3D32
Tea & Incense
#3F7A5E
Auto & Tools
#4A5568
Gifts & Custom
#B8402C
06
Implementation notes
Real data
All product cards, prices, images and department counts come from the live WooCommerce catalogue. No placeholder products.
Coming soon
Six of the twelve departments have no catalogue yet. They link to anchors on the department hub instead of 404 pages.
Checkout
Cart and checkout shortcodes keep stock WooCommerce markup, nonces and validation. Stripe is the only live gateway.
Wordmark
The header uses the plain-letter A16A text mark from the design kit. The vector logo proposal is still unconfirmed and is not applied here.