Corporate Identity

Same brand. Better structure.

The reference for the MTN SME Hub redesign: the exact colour, type, and component rules the mockups must be held to. This is not a new brand. It is MTN's real corporate identity, documented so the redesign can't drift.

Primary · MTN Yellow #FFC502 Headings · MTN Brighter Sans XBold Body · MTN Brighter Sans Regular Ink · rgb(33,37,41)

How to use this document

One reference, held constant

Every value on this page was pulled from the live site's computed styles, not guessed or reinterpreted. Where the redesign proposes something new, like a neutral scale, a component, or a nav pattern, it's marked Proposed. Everything else is Locked: MTN's actual identity, not ours to change.

Redesign scope

What actually changes

The brand palette is locked, so this redesign is not a colour refresh. It's an information architecture and hierarchy upgrade. Same yellow, same ink, same logo, restructured around how people actually browse a resource hub.

Today: blog layout
Nav: Home / Business Advice / Insights only
5 content pillars exist only as homepage tiles
Articles: no date, no author, no read time
Same articles repeated across multiple homepage tabs
Insights sub-sections (Guides/Templates/L&D/Events) buried one level deep
Redesign: publication layout
Nav: pillar-aware, all 5 categories + Insights sub-nav surfaced
Pillars become primary browsing structure, not decoration
Articles carry date + read time as standard metadata
Cross-tagged content de-duplicated, shown once per surface
Insights promoted to a first-class nav destination

01 · Colour (Locked)

Brand colours

MTN Yellow, ink, and white are the entire brand palette pulled from the live site. Everything else on this page (neutral scale, tints) is derived, proposed for this redesign, and open to revision. The three above are not.

Core palette (from live site)
#FFC502
MTN Yellow
Buttons, tags, active states, key accents
HEX #FFC502RGB 255 197 2
rgb(33,37,41)
Ink
Body text, headings, dark surfaces
RGB 33 37 41HEX #212529
#FFFFFF
White
Page background
HEX #FFFFFF
Neutral scale (Proposed)
#5C6570
Muted
Secondary text, meta lines, captions
HEX #5C6570
#8A929B
Muted 2
Placeholder text, disabled state
HEX #8A929B
#F7F8F9
Surface
Card fills, section washes
HEX #F7F8F9
#E7E9EC
Border
Hairlines, card outlines
HEX #E7E9EC
#FFFAE6
Yellow tint 95%
Category-tag fill, safe yellow wash
HEX #FFFAE6
#CC9E00
Yellow shade 20%
Eyebrow/label text only. See contrast rule.
HEX #CC9E00
Contrast rule: the one mistake this brand invites

MTN Yellow at full saturation fails text contrast against white. It looks bright and "on-brand" but is close to unreadable as body or link text. Yellow is a fill and accent colour, never a text colour on a light background. Use ink text on a yellow fill, or a darkened shade of yellow for small label text only.

Yellow text on white Contrast ≈ 1.6:1 Fails WCAG AA
Ink text on yellow fill Contrast ≈ 11:1 Passes AAA
Yellow on ink Contrast ≈ 7:1 Passes AA
Yellow tints toward white
100
85
70
55
40
25
10
0

02 · Typography (Locked family, proposed scale)

Brighter Sans, two weights

MTN Brighter Sans Extra Bold for headings, Regular for body. This is real MTN corporate identity, confirmed from the live site. The size scale below is proposed for the redesign's hierarchy (the current site uses far fewer distinct sizes).

Display
XBold · 46px
-2% tracking
Grow your business, faster.
Heading 1
XBold · 32px
Connect My Business
Heading 2
XBold · 23px
What Are Working Capital Loans?
Heading 3
XBold · 18px
Why Businesses Take Working Capital Loans
Body
Regular · 16px
1.6 line height
A content hub for South African small businesses, sponsored by MTN. Body copy stays in Brighter Sans Regular for comfortable reading at article length.
Small / Meta
Medium · 13px
Connect My Business · Finance · 6 min read
✓ Do
  • Use Brighter Sans XBold for all headings and nav labels
  • Keep body copy in Brighter Sans Regular
  • Use ink (#212529) for all body and heading text
  • Let article body breathe: 1.6+ line height at length
✕ Don't
  • Don't introduce a second typeface anywhere in the UI
  • Don't set long paragraphs in the heading weight
  • Don't use yellow as heading or body text colour
  • Don't substitute a condensed or narrow face for Brighter Sans

04 · Buttons (Proposed)

Actions

Primary actions use the yellow fill with ink text. It's the one place yellow appears at full strength and stays accessible.

Read Article Subscribe View All Register Free View Recap

06 · Content cards (Proposed)

Article card, with credibility signals

Same card used everywhere: homepage, category archive, search. Adds date and read time, which the current site has nowhere.

16:10 image
Connect My BusinessFinance

What Are Working Capital Loans?

Short-term loans businesses take to cover regular operational expenses during a cash-flow shortfall.

12 Aug 2026·6 min read
16:10 image
Build My BusinessEcommerce

10 eCommerce Trends to Watch

Staying up to date with the latest eCommerce trends matters if you run an online store.

3 Jul 2026·4 min read
16:10 image
Feature My Business

MTN Business Celebrates SME Excellence

Kevinot Farming named winner of MTN's SME JumpStarter campaign, aligned with Ambition 2025.

28 May 2026·3 min read

07 · Business Solutions (Proposed)

Real products, no photography, never flat

MTN Business plans and Managed Security Solutions don't have product photography, but a plain white card reads as an afterthought. The fix is a yellow-infused surface treatment: a soft radial glow, a gradient edge, and an arrow affordance instead of a button, since these link through to a configurator or lead form rather than an instant purchase.

Made For Business L
23GBData
1,000Minutes
R499pm x36 months
Managed Firewall

Full network protection with deployment, patching, and 24/7 monitoring.

✓ Do
  • Use the yellow radial-glow + gradient-edge treatment on every plan/solution card
  • Use an arrow affordance when the card leads to a detail page or configurator
  • Use a full "Get a Quote" button only when the card leads straight to the lead form
✕ Don't
  • Don't use stock photography on plan or solution cards
  • Don't ship a plain flat white card with no yellow treatment
  • Don't fabricate pricing for a term or add-on MTN hasn't confirmed

08 · Interactive components (Proposed)

Event card

In-person events (Insights → Events) get a real spec instead of collapsing into a generic card. Date chip, format tag, and a single clear Register action.

10Sep
Event

Funding Your Business in 2026

A live session on grants, loans and MTN Business support options.

10:00 to 11:30 SAST · Online
Register Free

09 · Global rules

What holds every screen accountable

✓ Do
  • Ink text on white/surface, ink text on yellow fills
  • One accent colour, yellow, used with restraint
  • Pillar identity via labels/tags, not a rainbow of category colours
  • Every article card carries date + read time
  • Nav always exposes the 5 pillars, Insights sub-nav, and Business Solutions
  • Business Solutions cards use the yellow-glow treatment: never flat, never a stock photo
✕ Don't
  • Don't invent secondary brand colours to "add variety"
  • Don't use yellow as body or link text on light backgrounds
  • Don't restructure the 5 pillars or rename them
  • Don't let a mockup screen ship a value not on this page