Login
Site Essence — Brand Guidelines
Copied!
Brand Guidelines

Site Essence
Brand Standards

The definitive reference for how we look, speak, and show up — across every digital product, touchpoint, and piece of communication.

We guarantee you the best ISP experience
Your best friend in connectivity
Plus Jakarta Sans Typeface
#0066CC Brand Blue
#E53935 Brand Red
#0D1B2E Dark Navy
SITE ESSENCE
Your bestfriend in connectivity
Primary Blue #0066CC
CTA Red #E53935
Dark Navy #0D1B2E
Typeface Plus Jakarta Sans
02 — Identity

Colour Palette

Anchored by Brand Blue and Brand Red with a dark navy base. Every colour has a specific role — never swap or mix these roles.

#0066CC
Brand Blue
CTAs, links, active states, interactive icons
#E53935
Brand Red
Primary CTAs, urgency, promotional highlights
#0D1B2E
Dark Navy
Primary text, dark backgrounds, footers
#F5F8FC
Page Background
Page canvas, subtle section fills
#FFFFFF
White
Card surfaces, inputs, modal backgrounds
#6B7A8D
Muted Grey
Body copy, placeholders, secondary labels
Functional Palette — system states only, never decorative
Success Green
#43A047
Warning Amber
#F9A825
Error Red
#E53935
Info Blue
#0066CC
03 — Identity

Typography

Our typeface is Plus Jakarta Sans and Plus Jakarta Sans — used at weights 300–900, including italic for hero callouts and display headlines.

Display · Condensed italic hero style
Just R40/month.
Plus Jakarta Sans 900 italic with hollow stroke variant
Reserved for hero price callouts, promotional statements, and display headlines
Aa
Plus Jakarta Sans
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
0123456789 !@#$%&*().,?
Weights in Use
Ag
Light
300
Ag
Regular
400
Ag
Medium
500
Ag
Semibold
600
Ag
Bold ★
700
Ag
Extrabold ★
800
Ag
Black ★
900
Ag
Black Italic ★
900i

★ Bold–Black Condensed are the primary brand weights. Black Italic reserved for display price/promo only.

Type Scale
DisplaySite Essence48px · Condensed 900i
H1Fast, reliable internet.36px · Condensed 900
H2Everything included.28px · Condensed 800
H3Why Site Essence Fibre20px · Condensed 700
BodyNo contracts. Works on your existing phone.15px · Regular 400
SmallSupporting copy, descriptions, and captions.13px · Regular 400
LabelWhy VoIP12px · Condensed 700 · CAPS
MonoMonth-to-month · No contracts12px · JetBrains Mono
04 — Identity

Iconography

Consistent stroke-based icons from the Lucide icon library. Hover any icon for its name, click to copy.

Style rules: Stroke only · 1.8–2px stroke width · Rounded linecaps · No fills · 20–24px display size · Brand Blue for interactive · White for informational · Muted Grey for decorative
globe
globe
wifi
wifi
zap
zap
phone
phone
shield
shield
check
check
lock
lock
clock
clock
mail
mail
message
message
users
users
home
home
star
star
settings
settings
server
server
arrow-right
arrow-right
map-pin
map-pin
dollar-sign
dollar-sign
bar-chart
bar-chart
tool
tool
05 — Design

Spacing System

4px base grid. All spacing values are multiples of 4, creating visual harmony across every layout.

xs
4px
sm
8px
md
12px
lg
16px
xl
20px
2xl
24px
3xl
32px
4xl
40px
5xl
48px
section
72px
Border Radius
4px
tags, chips
8px
small cards
12px
cards
16px
modals
999px
buttons, pills
06 — Design

UI Components

Core building blocks. Never create alternate styles for these patterns.

Buttons
Button rules: Blue = primary navigation. Red = sign-up/promo CTAs. Outlined = secondary. Ghost = cancel/low-emphasis. All use pill shape (50px radius) and Plus Jakarta Sans 700–800.
Badges & Pills
No Contract Promotion Active Month-to-month
Form Inputs
Alert States
Your RICA documents have been received and are under review.
Your fibre line has been activated. Welcome to Site Essence!
Your debit order was returned. Please update your banking details.
Your service has been suspended due to non-payment.
07 — Design

Approved Colour Combinations

Only these combinations are approved. All meet WCAG AA contrast (minimum 4.5:1 for body text).

White on BlueButtons · nav
White / Brand Blue
7.0:1 ✓ AAA
White on RedCTA buttons
White / Brand Red
4.8:1 ✓ AA
White on NavyDark sections
White / Dark Navy
16.0:1 ✓ AAA
White on BlackBrand BG
White / Black
21.0:1 ✓ AAA
Navy on BGBody text
Dark Navy / Page BG
13.2:1 ✓ AAA
Blue on WhiteLinks · accents
Brand Blue / White
7.0:1 ✓ AAA
Never use: light grey on white, yellow on white, red on dark blue, or any combination not listed above.
08 — Communication

Voice & Tone

Consistent across all channels — website, support, WhatsApp, and marketing communications.

Our Brand Slogans
We guarantee you the best ISP experience
Your best friend in connectivity
Both slogans reflect our core promise: reliability, warmth, and being genuinely on the customer’s side.
Never shorten, paraphrase, or use inconsistently across any channel.
Clear & Direct
We say what we mean without jargon. Every customer should understand the offer without reading between the lines.
✓ “R40/month. No contract. Works on your phone.”
✗ “Leverage our competitive telco ecosystem solution.”
Warm & Helpful
We treat every customer like a person. Friendly, patient, genuinely invested in solving their problem.
✓ “We’ll walk you through it step by step.”
✗ “Please consult our FAQ document.”
Honest & Upfront
We don’t hide fees or bury terms. Trust is built by being transparent, not by clever marketing copy.
✓ “A R249 once-off router delivery fee applies.”
✗ Hiding fees until checkout.
Energetic, Not Pushy
We’re enthusiastic — but never pressure. Urgency should be real, never manufactured.
✓ “Free installation — available right now.”
✗ “Only 3 slots left! Act now!!!”
Sentence case always
“Free installation” not “Free Installation”. Caps only for proper nouns.
Active voice
“We install your fibre” not “Your fibre will be installed.”
Short sentences
Aim for 15–20 words. Break long ideas into two sentences.
No jargon
Write for an 8th-grade level. If a grandmother can’t understand it, rewrite it.
Use “you”
“You can cancel anytime” — not “The client may terminate.”
South African English
“Fibre” not “fiber”. “Colour” not “color”. “Centre” not “center”.
09 — Communication

Do & Don’t

These rules protect brand integrity. Deviating from them dilutes our visual identity.

Logo Usage
Do
Use on approved backgrounds only (black, navy, brand blue, white)
Maintain minimum clear space at all times
Scale proportionally — always lock aspect ratio
Use vector formats (SVG, EPS) for print and large-format
Use the S mark alone at 32px and below
Don’t
Never change logo colours outside the brand palette
Never stretch, skew, rotate, or distort the logo
Never add drop shadows, gradients, or effects
Never place on a busy photograph or patterned background
Never recreate or trace the logo freehand
Colour Usage
Do
Use brand blue (#0066CC) for primary interactive elements
Use brand red (#E53935) exclusively for primary CTAs and promotions
Use functional palette only for system status and alerts
Verify contrast meets WCAG AA (4.5:1 minimum)
Don’t
Never introduce colours outside the approved palette
Never use light grey text on a white background
Never use gradients with non-brand colours
Never use brand red for error/destructive UI states
10 — Application

Responsive Brand Guide

How the Site Essence brand scales across every medium — from a favicon to a billboard. Each context has specific sizing, background, and layout rules.

Medium Preview Dimensions Background Logo Version Font Size CTA Colour Notes
Digital — Web
Website Hero
HERO
Full width × 600–900px Blue gradient Full logo · white H1: 48–72px Condensed 900i Brand Red Grid overlay, radial glow. Keep copy minimal. Max 2 CTAs.
Nav Bar
NAV
Full width × 60–72px Dark Navy Full logo · white Links: 14px Condensed 600 Brand Red Sticky on scroll. Sign Up button always red pill.
Pricing Card
R40
280–340px wide Blue gradient (primary) Icon mark only Price: 40–52px Condensed 900i Brand Red Primary plan uses blue gradient. Secondary uses card surface.
Footer
FOOTER
Full width × auto Dark Navy Full logo · white Body: 14px Regular 400 Brand Blue Social icons in white/muted. Legal in muted grey.
Social Media
Instagram Post
1:1
1080 × 1080px Black / Dark navy Full logo or icon mark Headline: 36–52px Condensed 900i Brand Red accent Keep background dark. Radial blue glow for depth.
Instagram Story
9:16
1080 × 1920px Black / Blue gradient Full logo · white · top Headline: 52–72px Condensed 900 Brand Red CTA button Logo top-centre. CTA pill bottom 20%. Swipe-up link area clear.
Facebook Cover
820×312
820 × 312px Navy-to-blue gradient Full logo · white · left Tagline: 24–30px Condensed 700 Brand Blue Slogan centred. URL bottom-right. Keep right 20% clear for profile pic.
WhatsApp Banner
1024×512
1024 × 512px Dark Navy Icon mark · white Body: 16–18px Regular Brand Blue Keep text minimal. Phone number large and prominent.
Digital Advertising
Leaderboard
728×90
728 × 90px Black / Dark navy Full logo · white · left Headline: 18–20px Condensed 900i Brand Red pill One headline, one CTA. Logo left, CTA right. No clutter.
Medium Rectangle
300×250
300 × 250px Black gradient Full logo · top Headline: 22–28px Condensed 900i Brand Red Most common ad unit. Logo top-left, headline mid, CTA bottom.
Half Page
300×600
300 × 600px Dark + blue gradient Full logo · white Headline: 28–36px Condensed 900i Brand Red Use brand slogan. Include feature checklist. Strong CTA.
Skyscraper
160×600
160 × 600px Black Icon mark only · top Price: 32–40px Condensed 900i Brand Red Icon mark at top, price callout, minimal copy, CTA at bottom.
Email
Email Header
600×auto
600px wide × auto height Black / Dark gradient Full logo · white · left Subject: 24–28px Condensed 900i Brand Blue Dark header, white body, navy footer. Max width 600px.
Email Body
600px
600px wide · white White — Body: 16px Regular · Navy Brand Blue Dark navy text on white. CTA button in brand blue pill.
Email Footer
footer
600px wide Dark Navy Full logo · white · left 11–12px Regular · muted — Unsubscribe link, legal text, contact info. Keep it clean.
Print
Business Card
85×54mm
85 × 54mm · 300dpi Black (front) Full logo · white · front Name: 10pt Condensed 800 Brand Blue Front: black with logo. Back: solid brand blue + slogan.
A5 Flyer
A5
148 × 210mm · 300dpi Black / Dark gradient Full logo · top Headline: 28–36pt Condensed 900i Brand Red pill CTA Dark background always. Bullet list of features. Bold price callout.
A4 Poster
A4
210 × 297mm · 300dpi Black / Blue gradient Full logo · top-left Headline: 36–52pt Condensed 900i Brand Red Single strong message. URL and phone bottom. Use radial glow for depth.
Outdoor & Large Format
Billboard 4×3m
4000×3000
4000 × 3000mm · 50–100dpi Black or blue gradient Full logo · white Headline: 200–300pt Condensed 900i Brand Red Max 7 words. Logo top. Single CTA or URL. Visible from 50m+.
Billboard 6×3m
6000×3000
6000 × 3000mm · 50dpi Black / Blue gradient Full logo or icon Headline: 250–400pt Condensed 900i Brand Red Landscape layout. Brand slogan as headline. URL only — no phone.
Street Pole Banner
550×1200
550 × 1200mm · 150dpi Blue gradient vertical Full logo · top-centre Headline: 80–100pt Condensed 900 Brand Red accent band Portrait. Logo top. Price callout large. URL at base. Red accent stripe.
Vehicle Wrap
WRAP
Vehicle specific · 50–72dpi Brand Blue Full logo · doors · white Tagline: 60–80pt Condensed 800 Red accent panels Blue base with red stripe. Logo both doors. Phone on rear. Slogan on sides.
Digital Signage & Screen
TV / Digital Screen
1920×1080
1920 × 1080px (4K: 3840×2160) Black / Blue gradient Full logo · top-left Headline: 60–90pt Condensed 900i Brand Red Loop-friendly. 5–15s display time. Keep animated elements subtle.
Favicon / App Icon
S
16×16 · 32×32 · 512×512px Brand Blue Icon mark ONLY — — Icon mark on solid blue square. Never use full logo at small sizes.
11

Brand in Action

How Site Essence looks across digital, social, print and email touchpoints.

siteessence.co.za
Fibre · VoIP · Smart Voice
Your best friend
in connectivity.
Fast fibre, smart voice, zero contracts.
Get Started → View Plans
SE
Fibre VoIP Support
Sign Up
Website hero · dark gradient · italic display · red CTA
SE
Your best friend
in connectivity.
siteessence.co.za
Instagram post · 1080×1080
SE
Limited Time
FREE
Install.
No contracts · Sign up today
Get Started →
Instagram promo · limited offer
SE
We guarantee you the
best ISP experience.
siteessence.co.za
Facebook cover · 820×428
SE
Thabo Nkosi
Support Specialist
087 729 8200
support@siteessence.co.za
Business card front · 85×54mm
SE
Your best friend in connectivity
Business card back · brand blue
SE
Your best friend
in connectivity.
siteessence.co.za
Sign Up →
Billboard outdoor · 4×3m
Transactional email · welcome / activation