A telecom super-brand whose web surface alternates between editorial photography hero bands with massive uppercase display headlines and clean white content bands, anchored by the company's signature scarlet red CTA and a proprietary display sans set at impossibly heavy 800 weight.
Foundation · 01
A near-monochrome system built around a single iconic accent. Vodafone Red is the only chromatic colour — every other surface is white, near-white, or near-black ink. No second accent ever appears in the marketing system.
Vodafone Red
#E60000
The single brand accent. Every primary CTA pill, every speechmark logo, every conversion target.
Canvas
#FFFFFF
Default light content background — every content band.
Canvas Soft
#F2F2F2
Near-white tint for badge-chip backgrounds and table headers.
Ink
#25282B
The brand's near-black surface — dark hero band, nav, footer.
Ink
#25282B
Every heading and body paragraph on light surfaces.
Body
#7E7E7E
Secondary body — captions, metadata, supporting copy.
Mute
#BEBEBE
Lowest-priority text — placeholder, low-key footer links.
On Dark
#FFFFFF
All text on ink surfaces — hero, footer, nav.
Critical
#E60000
No separate semantic palette. Primary red doubles as validation / destructive signal when needed.
Foundation · 02
A single sans family carries the entire system: weight 800 + uppercase at hero scale is the brand signature; weight 300 handles the calmer secondary voice. Inter is loaded here as an open-source substitute for the proprietary Vodafone display sans.
Components · 04
Card chrome stays gentle at 6 px radius — the brand reserves its dramatic pill geometry for CTAs. Story cards host a 16:9 thumbnail, a badge-chip category tag, a heading, and short body.
The rollout brings ultra-low-latency mobile to 12 million more customers across Europe.
The brand's flagship story-card variant scales the headline to display-sm.
Every Vodafone network site will run on certified renewable power within three years.
Speechmark logo orb
A red square hosting the brand's quotation-mark glyph. Sits in the visual centre of every page — the only piece of decorative chrome that is not a CTA.
Components · 05
Inputs follow the canonical content-radius (6 px) and a 1 px ink hairline border. Set in body-sm; comfortable 12 px / 16 px interior padding.
Foundation · 06
A 4 px base unit. Section gutters land at 32 px; card interiors at 16 px; inline gaps at 12 px between siblings.
Foundation · 07
A bimodal scale: 6 px for content surfaces (cards, inputs, images), and the dramatic 60 px pill for every CTA. Nothing in between.
Foundation · 08
Vodafone does not use soft drop-shadows. Depth comes from polarity-flip between ink and canvas bands. The only structural depth tokens are flat (no border) and hairline (1 px).
Components · 09
The brand-native composite surfaces — the dark and red hero bands, the light content band, the speechmark logo orb, badge chips, the dark nav and footer. Together these define every page on the marketing site.
The dark band hosts the brand's massive uppercase display headline at weight 800 with tight -1 px tracking. Editorial portrait photography typically overlays this band at reduced opacity.
The rare full-bleed red hero used on signature campaigns. Headline scales to display-xl at weight 800.
Section headline sets in weight 300 at 40 – 48 px. The 800-to-300 weight swing IS the brand's typographic story: a shout, then a calm sentence.
speechmark-logo-orb
A red square hosting the iconic quotation-mark glyph. Rendered at consistent size (~64 – 96 px) relative to surrounding content; never smaller than 48 px.
badge-chip
nav-bar
footer
Behavior · 10
Four breakpoints, fluid display scale, and a 2-up to 1-up story grid. The massive hero headline scales fluidly from 144 px at desktop to ~64 px at mobile.
| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile | < 600 px | Hero display scales down to ~64 px · story-card grid drops to 1-up · nav collapses to hamburger. |
| Tablet | 600 – 1023 px | Story-card grid 2-up · display headlines drop to 90 – 110 px. |
| Desktop | 1024 – 1399 px | Full display headline at 126 – 144 px · 2-up story grid. |
| Ultra-wide | ≥ 1400 px | Container caps at ~1400 px · bands stay edge-to-edge in colour. |
Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.
For individuals getting started.
For teams ready to ship.
For organizations operating at scale.