ProcureGlobal · Brand System · v1.0 · LOCKED
The system, rendered.
Logo, palette, typography, design tokens, and a sample storefront — assembled into one working artifact. Every visual decision below is locked unless explicitly revisited. The storefront at the bottom of this document is what engineering will build against in Phase 1.
01
Logo
Usage rules. Logo always appears with at least 1× its mark-height of clear space on all sides. Minimum size: 24px tall for digital, 12mm for print. Never recolour the mark; use the supplied variants only. The mark and wordmark together is the lockup; the mark alone is permitted as favicon or app icon below 32px.
02
Palette
Primary · 60%
Midnight
#1C1A47
Accent · 20%
Aqua
#60C9D9
Core · 10%
Lavender
#B18FDF
Tint
Mist
#D9BBF1
Urgency · 5%
Coral
#F472B6
Surface
Paper
#FBFAFD
Role allocation. Midnight does the heavy lifting — headers, primary CTAs, body text. Aqua signals trust and interactivity (search submit, currency-active, "verified", trust icons). Lavender is the brand decoration colour — never load-bearing for meaning, always supporting. Coral is reserved strictly for urgency: sale tags, deal countdowns, low-stock warnings, cart count. If everything is coral, nothing is. Paper is the working surface; pure white is never used as a page background — it stays inside cards.
03
Typography
Display · Bricolage Grotesque600 / 700
Procurement, made calm.
- H1 · 64/1.0
- The big idea
- H2 · 40/1.05
- Section heading
- H3 · 24/1.15
- Card title
Body · DM Sans400 / 500 / 700
From your kitchen to your boardroom — order in retail or wholesale quantities, pay in cedis or dollars, settle on terms. Same-day delivery in Greater Accra, next-day to the regions, Net 30 for verified businesses. Free returns within seven days on everything except final-sale and made-to-order items.
- Body L · 17/1.55
- Used for lead paragraphs and hero copy.
- Body · 15/1.55
- Default reading size on the storefront.
- Caption · 12/1.4
- Meta, ratings, fine print.
Mono tag-along. DM Mono is the supporting voice — used only for: timers and countdowns, prices in dense tables, SKU codes, hex codes in admin, system metadata. Never use mono for marketing copy or product titles.
04
Storefront, locked
ProcureGlobal storefront · homeprocureglobal.com
Search
GHSUSD
Sign in
Cart 3
All categories
Food & Beverage
Office & Stationery
Electronics
Cleaning
Industrial
Hardware
Flash · 2h 14m
Independence Week · 25% off 02:14:33
Stock up.
Save in cedis.
Retail or wholesale. From a single 5kg bag of rice to a pallet of generators — paid your way, delivered to you.
Aroma Rice 25kgGHS 360 · Save 25%
5KVA GeneratorFree delivery
LIVE
142 orders today
Food & Beverage
2,341 items
Office
1,108 items
Electronics
3,672 items
Cleaning
589 items
Hardware
1,994 items
Industrial
412 items
Best sellers this week
See all-25%
♡
-18%
♡
HOT
♡
B2B
♡
Fresh on ProcureGlobal
See allNEW
♡
B2B
♡
NEW
♡
-20%
♡
Nationwide deliverySame-day in Accra, next-day to all regions
Pay your wayMoMo, card, bank, or Net 30 for businesses
7-day returnsFree on defective or incorrect items
Secure checkoutPaystack & IT Consortium · PCI-certified
05
Design tokens · Tailwind v4 config
/* @theme — paste into app/globals.css under @theme {} */
/* colours */
--color-midnight: #1C1A47;
--color-midnight-90: #2B2854;
--color-midnight-70: #4D4A75;
--color-aqua: #60C9D9;
--color-aqua-dark: #4AB0C0;
--color-aqua-soft: #D6F0F4;
--color-lavender: #B18FDF;
--color-lavender-light: #D9BBF1;
--color-lavender-mist: #F3EBFA;
--color-coral: #F472B6;
--color-coral-soft: #FCE7F3;
--color-paper: #FBFAFD;
--color-ink: #1C1A47;
--color-ink-soft: #5B587D;
--color-line: #E8E4F0;
--color-line-soft: #F0EDF7;
/* typography */
--font-display: 'Bricolage Grotesque', sans-serif;
--font-body: 'DM Sans', system-ui, sans-serif;
--font-mono: 'DM Mono', ui-monospace, monospace;
--text-display-xl: 72px / 1.0 / -0.04em;
--text-display-l: 56px / 1.0 / -0.038em;
--text-display-m: 40px / 1.05 / -0.03em;
--text-h3: 24px / 1.15 / -0.025em;
--text-body-l: 17px / 1.55 / 0;
--text-body: 15px / 1.55 / 0;
--text-caption: 12px / 1.4 / 0;
/* radii */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 18px;
--radius-pill: 999px;
/* shadows */
--shadow-card: 0 4px 12px rgba(28, 26, 71, 0.06);
--shadow-card-hover: 0 18px 40px -20px rgba(28, 26, 71, 0.3);
--shadow-overlay: 0 20px 60px -30px rgba(28, 26, 71, 0.25);