Design system
Brand kit
Tokens pulled from the flyer so future pages stay on-brand. Source of truth:
css/brand.css + data/brand.json.
Colors
Metallics for brand; Pan-African green / yellow / red sparingly for location & contact.
Typography
Bouza Motion
Greenbay Hill & Cooks Hill
Body copy uses Manrope — clear and readable on dark surfaces.
| Role | Font | CSS variable |
|---|---|---|
| Display / logo | Exo 2 (italic 800) | --bm-font-display |
| Body / UI | Manrope | --bm-font-body |
| Location accent | Pacifico | --bm-font-accent |
Layout cues
| Content max | --bm-max 720px / --bm-max-wide 960px |
| Radius | --bm-radius 14px · pills --bm-radius-pill |
| Spacing scale | --bm-space-1 … --bm-space-6 |
| Background | Dark textured stack via --bm-texture (not flat single color) |
| CTA priority | WhatsApp (green) first, Call (gold border) second |
Data module
Import js/brand-data.js for name, services, phones, and
whatsappUrl(message) helpers. JSON twin: data/brand.json.
import { brandData, whatsappUrl } from "./js/brand-data.js";
window.open(whatsappUrl("Hi Bouza Motion — …"));Flyer reference
