SAVE R 700,00
Design System · v1.0
CAR-PARTS.CO.ZA UI Kit for WordPress + WooCommerce
Production-ready specification for an Astra Pro build on the Brandstore starter template, assembled with Spectra blocks and WooCommerce. 12-column responsive grid, 8px spacing system, reusable components.
Astra ProBrandstoreWooCommerceSpectra12-col grid8px scale
01 — Foundations
Build stack & layout rules
Every component below maps to a native Astra global style, a WooCommerce template part or a reusable Spectra block pattern — nothing requires custom PHP.
CMS
WordPress 6.x (block editor)
Theme
Astra Pro
Starter
Brandstore Starter Template
Commerce
WooCommerce + Woo Blocks
Builder
Spectra (Ultimate Addons for Gutenberg)
Grid
12 columns · 24px gutter · 1440px max
Spacing
8px base scale (4 → 128)
Components
Reusable blocks + global styles
12-column grid
1440px container · 24px gutters · 16/32/48px outer padding. Mobile collapses to 4 columns, tablet to 8.
123456789101112
8px spacing scale
All padding, gaps and section rhythm are multiples of 8 (4px only for icon nudges).
- 4px
- 8px
- 16px
- 24px
- 32px
- 48px
- 64px
- 96px
- 128px
02 — Colour palette
Brand colours & Astra global tokens
Mapped 1:1 to Astra's global colour slots so every block inherits the palette. Contrast checked to WCAG AA on body text.
Primary Red
#D71920
CTAs, sale badges, links
Primary Dark
#A81217
Hover / pressed
Secondary
#222222
Header bar, dark footer
Body
#3B3B3B
Body copy
Section
#F6F6F6
Alternating sections
Border
#E4E4E4
Dividers, inputs, cards
Success
#28A745
In stock, delivery
White
#FFFFFF
Cards, canvas
03 — Typography
Poppins headings · Open Sans body
Loaded locally in Astra (Local Google Fonts) for Core Web Vitals. Fluid clamp between mobile and desktop sizes.
Display / H1Poppins Bold · 48 / 56 px · -2%
H2Poppins Bold · 36 / 44 px · -2%
H3Poppins SemiBold · 24 / 32 px · -1%
H4Poppins SemiBold · 20 / 28 px · -1%
Body LOpen Sans Regular · 18 / 30 px · 0
BodyOpen Sans Regular · 16 / 26 px · 0
Small / MetaOpen Sans SemiBold · 13 / 20 px · 0
EyebrowPoppins SemiBold · 11 / 16 px · +18%
Genuine parts, fitment checked
Brakes, service kits & suspension
Same-day dispatch from Midrand
Body copy in Open Sans at 16/26. Comfortable measure of 60–75 characters keeps product descriptions and fitment notes readable on mobile.
Eyebrow label · uppercase
05 — Cards
Content, feature & category cards
One card shell (white surface, 1px border, 24px radius, soft shadow) reused across every block pattern.
Feature card
Icon, heading and supporting copy. Used for USP strips and service promises.
Category card
1 840 parts · Brakes & Discs
Promo card
Free delivery over R1 500
Dark variant for offers and the footer CTA band.
06 — Navigation
Sticky header, mega menu & breadcrumbs
Astra sticky header (shrink on scroll) with a Spectra mega-menu panel. Announcement bar on top, utility icons right, full-width category dropdown below.
Free nationwide delivery over R1 50024-month warranty · 010 000 0000
Home / Brakes & Discs / Brake Pads
Service & Filters
Suspension & Steering
07 — Forms
Inputs, selects & validation
14px radius fields, 1px border, red focus ring at 4px. Labels always visible — never placeholder-only.
Enter a valid 10-digit number.
08 — Tables
Order history & fitment tables
Used in WooCommerce My Account and product fitment tabs. Rows collapse into stacked cards below 768px.
| Order | Date | Items | Total | Status |
|---|---|---|---|---|
| CP-10241 | 02 Aug 2026 | Brembo Front Pads ×1 | R 1 249.00 | Delivered |
| CP-10238 | 28 Jul 2026 | Castrol EDGE 5W-30 ×2 | R 1 118.00 | In Transit |
| CP-10230 | 19 Jul 2026 | NGK Iridium Plugs ×4 | R 796.00 | Processing |
| CP-10214 | 04 Jul 2026 | Monroe Shocks ×2 | R 2 480.00 | Delivered |
09 — Product cards
WooCommerce product card
Square image, brand eyebrow, two-line title, fitment line, rating, price with strike-through, stock pill and full-width add-to-cart.
Bosch
Oil Filter & 5L Full Synthetic Service Kit
Fits: Toyota Hilux 2.8 GD-6 · 2016–2024
(94)
R 899,00
In StockSAVE R 250,00
NGK
Iridium Spark Plug Set (4 Piece)
Fits: Ford Ranger 2.2 TDCi · 2012–2019
(61)
R 1 149,00R 1 399,00
Low Stock
10 — Icons
Icon set
Single stroke family at 1.75px weight, 20/24px sizes, always paired with a text label for accessibility.
Brakes
Service
Engine
Suspension
Electrical
Lighting
Clutch
Body
Delivery
Warranty
Wishlist
Cart
11 — Modals, dropdowns & filters
Interactive components
All three are live — click through them. Built as Spectra modal, Astra dropdown and a WooCommerce widget filter rail.
Modal
Centered, 24px radius, dimmed backdrop, dismiss on backdrop or ✕.
Dropdown
Sort control used above every grid.
Filters
Brand facet with live chips.
Bosch
12 — Wireframes
Low-fidelity page blueprints
Block order per template, expressed in 12-column spans so it drops straight into Spectra containers.
Home
Sticky header + mega menu
Hero + Vehicle Finder
Category grid (12-col ÷ 4)
Deals carousel
Trust strip
Dark footer
Shop / Category
Breadcrumb
Filter sidebar (3 cols)
Product grid (9 cols)
Sort + pagination
SEO copy block
Product
Gallery (6 cols)
Buy box (6 cols)
Fitment checker
Tabs: specs / fitment / reviews
Related products
Checkout
Progress steps
Address form (7 cols)
Order summary sticky (5 cols)
PayFast / Ozow / EFT
Trust seals
13 — High-fidelity mockups
Live production screens
Each mockup is a working page — the same components, tokens and grid documented above.
14 — Prototype
Clickable user flows
Primary journeys wired end-to-end. Follow any flow in the live site — every link in this prototype resolves.
1
Home → Vehicle Finder → filtered Category results
2
Category → Filters (brand / price / stock) → Product
3
Product → Fitment confirmed → Add to cart → Mini-cart drawer
4
Mini-cart → Checkout → PayFast → Order confirmation
5
Header search → Suggestions dropdown → Product
6
Request a Part → VIN + photo upload → WhatsApp follow-up
15 — Sticky header & dark footer
Global chrome specification
Both are live on every page of this build — scroll to see the header stick and the dark footer close the page.
Sticky header
- Announcement bar (secondary #222) — delivery + warranty
- Row 2: logo, full-width search, account / wishlist / cart
- Row 3: mega menu trigger + primary nav + branch locations
- Sticks on scroll, collapses to logo + search + cart on mobile
- Cart and wishlist counters bind to WooCommerce fragments
Dark footer
- Secondary #222 background, white text at 60% for body
- Four columns: brand, categories, shop/company, contact
- Payment badges: Visa, Mastercard, PayFast, Ozow, EFT, SnapScan
- Legal bar: terms, privacy, returns policy
- Floating WhatsApp button pinned bottom-right