Brand Design System · v1.0

The way Ventura looks, sounds & builds.

A single source of truth for Ventura Builders & Developers — engineered to international standards so every touchpoint, from this website to site signage, feels unmistakably Ventura.

Domain venturabuilders.africaStandards W3C Design Tokens · WCAG 2.2 AA · 8-pt gridPrepared for client approval
01

Brand strategy

Who Ventura is before how it looks — the foundation every design decision answers to.

Framework: brand archetypes + Simon Sinek's Golden Circle

Archetype

The Builder (Creator) × The Hero

Capable, dependable and precise — a maker that turns ambitious plans into solid, lasting structures, and a hero that overcomes site challenges so clients can build a better future with confidence.

DependablePreciseBoldSafety-firstGrounded
Promise

Build with confidence.

Engineering-grade reliability and safety for residential, commercial and industrial builds across the region.

Visual metaphor:shield = security & trust · hard hat = safety · “V” = forward momentum.

Why

We believe everyone deserves to build with confidence — structures that are safe, lasting and worthy of trust.

How

By working to international standards, putting safety first, and delivering best value through disciplined planning and quality control.

What

Main contracting, design & build, turnkey projects, steel structures, MEP, fit-out and specialist cold-room works.

03

Colour system

Navy for trust, amber for energy — specified across screen, print and signage, and checked for accessibility.

Cross-media HEX/RGB/CMYK/Pantone · live WCAG 2.2 contrast (4.5:1 text, 3:1 UI)

Brand

Navy#1B2C7A
Navy
Primary — headers, footers, headings, the shield
HEX#1B2C7A
RGB27, 44, 122
CMYK78, 64, 0, 52
Pantone≈ 2755 C
On swatch: 12.44 · AAAOn white: 12.44 · AAA
Accent Blue#0087FF
Accent Blue
Accent — highlights, eyebrows, focus ring
HEX#0087FF
RGB0, 135, 255
CMYK100, 47, 0, 0
Pantone≈ Process Blue
On swatch: 5.01 · AAOn white: 3.55 · AA Large
Link Blue#0F62C7
Link Blue
Text links (darkened to meet AA on white)
HEX#0F62C7
RGB15, 98, 199
CMYK92, 51, 0, 22
Pantone≈ 2387 C
On swatch: 5.85 · AAOn white: 5.85 · AA
Amber#F7941D
Amber
CTA & highlight — the hard-hat colour (use navy text on it)
HEX#F7941D
RGB247, 148, 29
CMYK0, 40, 88, 3
Pantone≈ 1375 C
On swatch: 7.81 · AAAOn white: 2.28 · Fail
Ink#0F1535
Ink
Body text on light surfaces
HEX#0F1535
RGB15, 21, 53
CMYK72, 61, 0, 79
Pantone≈ 5255 C
On swatch: 17.81 · AAAOn white: 17.81 · AAA

Neutrals

White#FFFFFF
White
Base surface
HEX#FFFFFF
RGB255, 255, 255
CMYK0, 0, 0, 0
Pantone
On swatch: 17.81 · AAAOn white: 1.00 · Fail
Mist#F5F7FB
Mist
Alternate section background
HEX#F5F7FB
RGB245, 247, 251
CMYK2, 1, 0, 2
Pantone
On swatch: 16.61 · AAAOn white: 1.07 · Fail
Cloud#ECEFF6
Cloud
Subtle fills, table stripes
HEX#ECEFF6
RGB236, 239, 246
CMYK4, 3, 0, 4
Pantone
On swatch: 15.47 · AAAOn white: 1.15 · Fail
Line#DFE4EF
Line
Borders & hairlines
HEX#DFE4EF
RGB223, 228, 239
CMYK7, 5, 0, 6
Pantone
On swatch: 13.98 · AAAOn white: 1.27 · Fail
Muted#4C5670
Muted
Secondary / muted text (AA on white)
HEX#4C5670
RGB76, 86, 112
CMYK32, 23, 0, 56
Pantone≈ 7546 C
On swatch: 7.31 · AAAOn white: 7.31 · AAA

State

Success#15803D
Success
Valid input, confirmations
HEX#15803D
RGB21, 128, 61
CMYK84, 0, 52, 50
Pantone≈ 7740 C
On swatch: 5.02 · AAOn white: 5.02 · AA
Warning#B45309
Warning
Cautions, pending states
HEX#B45309
RGB180, 83, 9
CMYK0, 54, 95, 29
Pantone≈ 1605 C
On swatch: 5.02 · AAOn white: 5.02 · AA
Error#C02B1D
Error
Errors, destructive actions
HEX#C02B1D
RGB192, 43, 29
CMYK0, 78, 85, 25
Pantone≈ 1795 C
On swatch: 5.83 · AAOn white: 5.83 · AA

Distribution follows the 60-30-10 rule: ~60% white/neutral, ~30% navy, ~10% amber. Amber never carries body text — it fails AA on white and with white text, so it pairs with navy text only.

04

Typography

Montserrat builds the headlines; Inter carries the reading. One geometric voice, one workhorse.

Major-Third (1.25) modular scale · measure 45–75 characters

Aa
Montserrat — display / headings
Bold 700Extrabold 800
Aa
Inter — body / UI
Regular 400Medium 500Semibold 600
Build with confidence
Display · 76px · Hero statements
Build with confidence
H1 · 61px · Page titles
Build with confidence
H2 · 49px · Section titles
Build with confidence
H3 · 39px · Subsection titles
Build with confidence
H4 · 31px · Card / block titles
Build with confidence
H5 · 25px · Lead-ins
Build with confidence
H6 · 20px · Eyebrow / labels
Build with confidence — engineered to last.
Body L · 18px · Intro paragraphs
Build with confidence — engineered to last.
Body · 16px · Default body copy
Build with confidence — engineered to last.
Small · 14px · Captions, meta
Build with confidence — engineered to last.
Caption · 13px · Fine print, legends
05

Grid & spacing

Everything snaps to a rhythm, so layouts feel calm and scale predictably across devices.

8-pt spacing grid · 12-column responsive layout

Spacing scale (8-pt)

space 1 · 4px
space 2 · 8px
space 3 · 12px
space 4 · 16px
space 5 · 24px
space 6 · 32px
space 7 · 48px
space 8 · 64px
space 9 · 80px
space 10 · 96px

12-column grid

1
2
3
4
5
6
7
8
9
10
11
12
06

UI components

The real, accessible building blocks of the site — not mock-ups. Approve these and the site is half-built.

Token-driven · keyboard-focus & ARIA · WCAG 2.2 AA

Buttons
Badges
ResidentialFeaturedISO-alignedDraftOn trackPendingDelayed
Cards — services

Main Contracting

End-to-end delivery of civil and structural works.

Design & Build

Single-point responsibility from concept to handover.

Turnkey Projects

Fully finished, ready-to-use facilities.

Steel Structures

Warehouses, sheds and industrial steel buildings.

Cards — values

Innovation

Bringing modern methods and technology to every site.

International Standards

Meeting and exceeding global quality benchmarks.

Safety First

Everyone goes home safe — no compromise on HSE.

Best Value

Optimal returns through disciplined cost control.

Form fields

We'll only use this to reply.

Please enter a number.

07

Iconography

A single line-icon family speaks a universal, cross-cultural language across services and UI.

24px grid · 2px stroke · two-tone navy + amber

Building
Design
Turnkey
Steel
MEP
Fit-out
Renovation
Cold room
Safety
Standards
Innovation
Value
Call
Email
Location
Done
08

Data-visualisation & infographics

Turn proof points — projects, sectors, safety — into scannable visuals. One message per graphic.

Chart matched to data type · animated count-up (reduced-motion safe)

0+
Projects delivered
0+
Years of experience
0
Sectors served
0%
Safety commitment
Projects by sector (share)
Residential
Warehouse
Commercial
Industrial
Education
Delivery process
1 Brief2 Design3 Build4 Handover

Quantities → bars · steps → process chips · single headline metric → count-up. Keep text minimal and the flow obvious.

09

Imagery & art direction

Real construction, real people, real scale — unified by a navy-graded treatment.

Consistent duotone treatment · 4:3 / 16:9 ratios

Natural photo
Navy duotone (brand treatment)
Overlay for text legibility
Do
  • Show finished work, crews on site, and human scale.
  • Apply the navy duotone for cohesion across sources.
  • Keep a focal subject; leave room for headlines.
✕ Don't
  • Use generic clip-art or heavily filtered stock.
  • Mix wildly different colour grades in one set.
  • Bury the subject behind text with no overlay.

Tiles illustrate the treatment; real Ventura project photography will replace them before launch.

10

Motion

Movement should feel purposeful and quick — confirming actions, never showing off. Hover a card to preview.

Duration & easing tokens · honours prefers-reduced-motion

--dur-fast150ms
Hover, small UI feedback
--dur-base250ms
Most transitions, reveals
--dur-slow400ms
Large/overlay transitions

Standard easing cubic-bezier(.2,0,0,1). All motion collapses to instant for users who prefer reduced motion.

11

Voice & tone

Confident, clear and human — the way Ventura would talk a client through a site walk.

Four principles + applied sample copy

Clear, not clever

Plain language that a client, an engineer and an investor all understand. Lead with the point.

Confident, not boastful

State capability with evidence — projects, standards, numbers — never empty superlatives.

Human and respectful

We speak to people, not 'stakeholders'. Warm, professional, and straight.

Safety runs through it

Care for people and quality is implied in how we say things, not just what we say.

Sample copy — in voice

Residential · Commercial · Industrial

Build with confidence.

Ventura Builders & Developers delivers safe, high-quality construction — engineered to international standards and finished on time.

12

The system, applied

A homepage hero built entirely from the tokens and components above — the brand in situ.

Logo + colour + type + components + voice, composed

Residential · Commercial · Industrial

Build with confidence.

Ventura Builders & Developers delivers safe, high-quality construction — engineered to international standards and finished on time.