Color Palette

A single brand red holds the system together, balanced against a disciplined trio of canvas white, charcoal institutional, and secondary greys.

Primary
Vodafone Red
#e60000
Primary CTA backgrounds, speech-mark logo, full-bleed band dividers, rotated IMPACT brand-mark type.
Secondary & Accent
Pure White
#ffffff
Editorial canvas — page background, card backgrounds, reversed text on dark surfaces.
Signal Blue
#3860be
Inline text links in their resting state — the one non-red interactive accent.
Deep Brand Red Shade
#ac1811
Quiet label chips that need red identity without drawing primary attention.
Surface & Background
Canvas White
#ffffff
Primary page and card surface — every editorial module sits on this.
Light Neutral
#f2f2f2
Filled neutral pill-badge backgrounds and quiet UI chrome.
Charcoal Institutional
#25282b
Footer, share-ticker panel, global-impact map. The same material anywhere formal and numeric.
Translucent White 10%
rgba(255,255,255,0.1)
Glass pill buttons that sit on dark hero imagery — lets the photo breathe through.
Neutrals & Text
Charcoal Headline
#25282b
All heading text on light surfaces — a near-black with a faint cool tint.
Secondary Body Grey
#7e7e7e
Body copy, meta text, and secondary labels — unemphatic but legible.
Form Text Grey
#333333
Borders on input-style ghost buttons and text color inside them.
Disabled Grey
#bebebe
Inactive chip text on subtle ghost-style controls.
Semantic & Accent
Surface Red Band
#e60000
The brand red deployed as a full-width band between editorial sections.
Tag Pill Red Border
#e60000 (1px outline)
Outline on light tag pills — red identity without drowning card content.

Typography Scale

A dual-scale system — monumental uppercase display stretches up to 144px while body copy stays calm at 16-18px. Three working weights: 800 display, 700 UI, 400 reading.

Display / Hero XL — 144 / 800 / 0.79 / -1px
EVERYONE
Display / Hero L — 126 / 800 / 0.9 / -1px
CONNECTED
Display / Hero M — 90 / 800 / 0.93
INVESTORS
Display / Impact — 70 / 800 / 1.17 / -1px
Reporting impact
H1 Light — 48 / 300 / 1.08
A disciplined editorial voice
H1 Bold — 48 / 800 / 1.0 / -1px
116.05 GBX
H2 Light — 40 / 300 / 1.1
Supporting editorial header
H3 Bold — 32 / 700 / 1.25
Card cluster title
H4 Bold — 24 / 700 / 1.0
Editorial card title
H5 Bold — 20 / 700 / 1.3
Compact module header
Lead Body — 20 / 400 / 1.4
Introductory paragraphs sit one step above body copy to carry the opening of every section.
Body Large — 18 / 400 / 1.56
Long-form article body copy that sits inside editorial cards and article modules.
Body Base — 16 / 400 / 1.38
Default paragraph size across forms, captions, and meta rows.
Label Uppercase — 16 / 800 / 1.5
Navigation label
Eyebrow / Date — 14 / 700 / 1.43
14 APR 2026
Tag Pill — 14 / 700 / 1.5
Category pill text
Micro Label — 12 / 600 / 1.33 / uppercase
Micro badge
Button Primary — 14.4 / 700 / 1.0 / 0.144
READ MORE

Button Variants

A two-tier primary system — rectangles for form and utility, pills for editorial content. Both are equally primary; context picks the shape.

Primary Red Rectangle
#e60000 bg · 14.4px / 700 white · 2px radius · 12px × 10px padding
Primary Red Pill
#e60000 bg · 14.4px / 700 white · 60px radius · 16px uniform padding
Ghost White Rectangle
White bg · #333333 text + 1px outline · 2px radius · 12px × 10px padding
Glass Pill
rgba(255,255,255,0.1) bg · white text · 24px radius · 8px × 16px padding — sits on dark hero imagery
Content Ghost Pill
rgba(0,0,0,0.05) bg · #e60000 text · 60px radius · 15px padding — low-emphasis inline CTA
Icon Control Circle
White bg · 50% radius · 40px diameter — video controls and carousel arrows

Cards & Containers

No drop shadows — cards separate through spacing, a tight 6px radius, and the image aspect ratio.

14 APR 2026 Category
News / Editorial Card
16:9 image on top, eyebrow + tag row, then a 24px weight 700 title. 6px radius, no shadow.
Featured
Asymmetric Corner Card
Single-corner radius of 0 6px 0 0 — echoes the speech-mark logo's curved geometry.
Circular Portrait Card
100% radius portrait or ESG pictogram, sits inside institutional content sections.

Form Elements

Sharp 2px corners, 1px charcoal border, 16px body text — input chrome is intentionally quiet.

White bg · 1px #333333 border · 2px radius
Please enter a valid email address
Share price
116.05 GBX
15-min delayed · As of 15 Apr 2026 15:40 BST
Regions of operation
Global
impact surface
The charcoal institutional panel hosts share tickers, world maps, and numeric data displays. Content is reversed to white on the dark surface.
IMPACT

Spacing Scale

8px base unit — fine-grained below, generous above. 32px and 38px are the template's universal rhythm constants.

2px
Hairline separators
4px
Icon-to-text gap
8px
Base rhythm unit
12px
Card internal padding
16px
Paragraph rhythm, pill padding
20px
Section-internal spacing
24px
Card-to-card gutter
32px
Universal constant — section breaks
38px
Universal constant — band-to-next push
64px
Vertical section rhythm
96px
Major module break

Border Radius Scale

Two load-bearing shapes: sharp 2px rectangles for form and utility, fully-rounded 60px pills for editorial content CTAs.

2px
Form / utility buttons
6px
Cards, images, inputs
0 6px 0 0
Asymmetric feature card
24px
Glass pill
32px
Filled neutral pill badge
60px
Primary content pill CTA
50%
Icon control circles
100%
Circular portraits / pictograms

Elevation & Depth

The system is deliberately flat. Elevation comes from a surface shift — switching from white editorial canvas to charcoal institutional panel — rather than a drop shadow.

Level 0 — Surface
No shadow, no border. Default card, default section.
Level 1 — Outline
1px solid border. Ghost buttons, outlined pills.
Level 2 — Inset
inset 0 0 0 1px on focus or pressed controls.
Level 3 — Photo
The photography itself carries the depth.
Level 4 — Surface shift
Charcoal panel below white canvas — the dominant elevation cue.