Design System Inspiration of Vodafone

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 (Dark)

#15171a

Deepened charcoal — the dark-mode page canvas, derived from the brand's institutional color.

Surface (Dark)

#1d2024

Card and module surface — one step above canvas for subtle elevation distinction.

Charcoal Institutional

#25282b

Footer, share-ticker panel, global-impact map — the brand's formal surface carries through to dark mode.

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

Headline White

#ffffff

All heading text on dark surfaces — full white for maximum contrast.

Body White 85%

rgba(255,255,255,0.85)

Body copy and reading text — softened white to avoid eye strain on dark surfaces.

Secondary White 60%

rgba(255,255,255,0.6)

Meta text, secondary labels, disabled chips.

Border Hairline

rgba(255,255,255,0.12)

Translucent borders for cards, dividers, and chrome separators.

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 dark-mode 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

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 Rectangle

Transparent bg · white text + 1px translucent white outline · 2px radius

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(255,255,255,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 translucent white border, 16px body text — input chrome is intentionally quiet.

Default input Dark surface bg · 1px translucent white border · 2px radius

Error state Please enter a valid email address

Textarea

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 canvas to 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 canvas — the dominant elevation cue.

Design SystemInspiration ofVodafone