Vodafone Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

8tokens

20type steps

5radius steps

2pxspacing base

Vodafone, in one page

Vodafone is a global telecom super-brand and its web surface delivers exactly that posture: heroic editorial photography, occasionally cropping a portrait so tight only an eye line and a phone hand are visible, with a single colossal uppercase headline floating on top in the brand's proprietary heavy display weight. The page reads like a campaign poster more than a corporate site, then breaks into a calmer content rhythm of light-canvas story cards and a single red marker (the iconic speechmark logo) drawing the eye to the brand's centre of gravity. There is no second accent colour competing — the entire decorative palette is {colors.primary} Vodafone red, near-black {colors.ink}, and the surrounding white and grayscale neutrals.

Type is the second decisive voice. Vodafone's custom display sans (extracted as Vodafone) carries every headline at impossibly heavy weight 800 in upper case for hero scale ({typography.display-hero} 144 px, {typography.display-xxl} 126 px) and at lighter weight 300 for the sub-displays that follow. Body text stays in the same family at weight 400 with neutral tracking. The contrast between display weight 800 and display weight 300 IS the brand's typographic story: a shout, then a calm sentence.

Every interactive CTA renders as a generously rounded pill ({rounded.pill-lg} 60 px) — Vodafone has never used a square button on its marketing surface in years, and the brand's pill scale ladder runs from 32 px (badge pills) through 60 px (CTA pills) up to 9999 px (icon circular containers). Cards stay gentler at {rounded.card} 6 px.

Key Characteristics:

A single primary CTA color {colors.primary} (#e60000) — Vodafone Red. Pill-filled for primary, pill-outline for secondary. No third button variant.
Massive uppercase display weight 800 ({typography.display-hero} and siblings) is the brand's signature. The 300-weight headline siblings ({typography.display-lg} / {typography.display-md}) handle calmer secondary moments.
The speechmark-logo-orb — a red square hosting Vodafone's quotation-mark icon — is the only piece of decorative chrome that's not a CTA. It anchors the brand's centre of every page.
Pill geometry on every interactive shape — {rounded.pill-lg} 60 px for buttons, {rounded.pill-md} 32 px for inline badges. Card chrome stays at {rounded.card} 6 px.
A two-band page rhythm — {colors.ink} dark hero / {colors.canvas} light content. No mid-band greys; the brand uses surface contrast, not soft neutrals, for elevation.
Editorial photography (real portraits, real cities, real cabling) is the only consistent decorative system — no illustration, no atmospheric gradients.

Do's and don'ts

Do

Reserve {colors.primary} Vodafone Red for primary CTAs and the speechmark-logo-orb. Every conversion target uses the red pill.
Set hero headlines in {typography.display-hero} weight 800 UPPERCASE with tight -1px tracking. That stencil look IS the brand voice.
Use {rounded.pill-lg} 60 px on every interactive pill. The brand never uses square corners on CTAs.
Cycle page surfaces in {colors.ink} dark hero → {colors.canvas} light content → {colors.ink} footer. Surface contrast is the depth cue.
Pair editorial portrait photography with the massive display headline overlay — that combination IS the brand's signature.
Render the speechmark logo orb at consistent size relative to surrounding content — it's the brand's centre of gravity on every page.

Don't

Don't introduce a second accent colour. The brand operates with red + ink + grayscale only.
Don't render headlines in sentence case at hero scale. Hero display IS uppercase weight 800.
Don't render the primary CTA as a square rectangle. The 60 px pill is non-negotiable.
Don't drop a soft drop-shadow on cards. The brand relies on surface-colour contrast, not shadow.
Don't substitute the speechmark logo orb with a wordmark or a different shape. The orb is the iconic mark.
Don't pair the weight 800 display face with letter-spacing 0 at 144 px — the -1px tracking is part of the brand's calibration.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Vodafone design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #e60000
- on-primary: #ffffff
- ink: #25282b
- body: #7e7e7e
- mute: #bebebe
- canvas: #ffffff
- canvas-soft: #f2f2f2
- on-dark: #ffffff

Type:
- families: Vodafone, Vodafone Rg, Helvetica Neue, Arial
- scale: 12, 14, 16, 18, 20, 21, 22, 24, 28
- weights: 300, 400, 600, 700, 800

Shape:
- radius: 0, 1, 6, 32, 60
- elevation: `ex-toast` — Toast notification surface — feature-card shape + medium shadow.

Spacing: 2, 4, 8, 12, 16, 20, 24, 32

Rules:
- Reserve `{colors.primary}` Vodafone Red for primary CTAs and the `speechmark-logo-orb`. Every conversion target uses the red pill.
- Set hero headlines in `{typography.display-hero}` weight 800 UPPERCASE with tight `-1px` tracking. That stencil look IS the brand voice.
- Use `{rounded.pill-lg}` 60 px on every interactive pill. The brand never uses square corners on CTAs.
- Cycle page surfaces in `{colors.ink}` dark hero → `{colors.canvas}` light content → `{colors.ink}` footer. Surface contrast is the depth cue.
- Pair editorial portrait photography with the massive display headline overlay — that combination IS the brand's signature.
- Render the speechmark logo orb at consistent size relative to surrounding content — it's the brand's centre of gravity on every page.

Avoid:
- Don't introduce a second accent colour. The brand operates with red + ink + grayscale only.
- Don't render headlines in sentence case at hero scale. Hero display IS uppercase weight 800.
- Don't render the primary CTA as a square rectangle. The 60 px pill is non-negotiable.
- Don't drop a soft drop-shadow on cards. The brand relies on surface-colour contrast, not shadow.
- Don't substitute the speechmark logo orb with a wordmark or a different shape. The orb is the iconic mark.
- Don't pair the weight 800 display face with letter-spacing 0 at 144 px — the `-1px` tracking is part of the brand's calibration.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Brand & Accent

Vodafone Red ({colors.primary} — #e60000): The single brand accent. Every primary CTA pill, every speechmark logo, every conversion target. The most iconic red in telecom — never desaturated, never used at scale for body fills (reserved for high-attention surfaces).

Surface

Canvas ({colors.canvas} — #ffffff): The default light content background.
Canvas Soft ({colors.canvas-soft} — #f2f2f2): A near-white tint used as the badge-chip background.
Ink ({colors.ink} — #25282b): The brand's near-black surface — used as the dark hero band, the nav background, and the footer fill. Doubles as the primary text color on light surfaces.

Text

Ink ({colors.ink} — #25282b): Every heading and body paragraph on light surfaces.
Body ({colors.body} — #7e7e7e): Secondary body text on light surfaces — captions, metadata, supporting copy.
Mute ({colors.mute} — #bebebe): The lowest-priority text color — placeholder text, low-key footer links.
On Dark ({colors.on-dark} — #ffffff): All text on {colors.ink} surfaces (hero, footer, nav).

Semantic

The brand does not maintain a separate semantic palette. The primary red doubles as validation / destructive signal when needed; success / warning use are reserved for in-product contexts and are not part of the documented marketing system.

Type scaleRead the full spec

Font Family

A single custom face carries the entire system: Vodafone, the brand's proprietary display sans. The face spans weights 300 (light), 400 (regular), 600, 700, and 800 — every role in the system pulls from this one family. There is no mono companion; technical labels (rare on the marketing surface) borrow the same face at smaller sizes.

The icomoon icon-font is loaded for proprietary glyphs but does not render as a typographic role.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display-hero}`	144px	800	114px	-1px	The hero stencil (`"STAY CONNECTED"`) — uppercase, ultra-tight tracking, brand's signature size.
`{typography.display-xxl}`	126px	800	113px	-1px	Slightly smaller hero variant.
`{typography.display-xl}`	90px	800	84px	0	Mid-hero scale.
`{typography.display-lg}`	48px	300	52px	0	Section-headline sub-display in the lighter weight.
`{typography.display-md}`	40px	300	44px	0	Sub-section displays.
`{typography.display-sm}`	32px	700	40px	0	Card headings, story-card titles.
`{typography.display-xs}`	24px	700	24px	0	Inline display micro-headings.
`{typography.eyebrow-uppercase}`	16px	800	24px	0	Uppercase eyebrow tags above section headlines.
`{typography.body-lg}`	22px	400	24px	0	Lead body paragraphs.
`{typography.body-md}`	18px	400	28px	0	Default paragraph body.
`{typography.body-md-strong}`	18px	600	28px	0	Bolded inline body.
`{typography.body-sm}`	16px	400	20px	0	Secondary body.
`{typography.body-sm-strong}`	16px	700	22px	0	Bolded short body.
`{typography.caption}`	14px	400	16px	0	Captions, fine print.
`{typography.caption-strong}`	14px	700	21px	0	Bold captions, badge labels.
`{typography.caption-uppercase}`	12px	600	16px	0.57px	Uppercase metadata, footer eyebrows.
`{typography.button-md}`	18px	400	28px	0	Default button label.

Principles

Weight 800 + uppercase = hero voice. This is the entire reason the brand reads as a billboard rather than a tech site.
Weight 300 = the calmer secondary voice. Used at 40 – 48 px for sub-displays; never below 24 px to keep legibility.
Single family throughout. The brand never mixes a serif or a mono into the typographic system. Consistency is the calm.
Tracking stays tight at display sizes. -1px at 144 px is the brand's calibration; reverting to neutral tracking softens the stencil look.

Note on Font Substitutes

The Vodafone display sans is proprietary. Open-source substitutes:

Display sans — *Inter* weight 800 at hero scale with letter-spacing: -1px is the closest free match. *Geist* weight 700–800 is the second-best.
Lighter display weight (300) — *Inter* weight 300 holds its line-height well at 48 px display sizes.

Components and layoutRead the full spec

Buttons

button-primary — the red pill CTA, brand's primary conversion target.

Background {colors.primary}, text {colors.on-primary}, 1 px solid {colors.primary} border, label set in {typography.button-md}, padding {spacing.md} {spacing.2xl}, shape {rounded.pill-lg} 60 px.

button-outline-red — the secondary pill, red-text-on-white with red border.

Background {colors.canvas}, text {colors.primary}, 1 px solid {colors.primary} border, same label / padding / shape as button-primary.

button-outline-dark — the tertiary pill, ink-text-on-white with ink border.

Background {colors.canvas}, text {colors.ink}, 1 px solid {colors.ink} border, same label / padding / shape.

button-icon-circular — the round white icon button (video play / pause / chevron).

Background {colors.canvas}, ink icon, 1 px solid {colors.canvas} outline (effectively borderless), shape {rounded.full}.

Cards & Containers

card-content — the default story-card chrome.

Background {colors.canvas}, text {colors.ink}, padding {spacing.lg}, shape {rounded.card} 6 px. Hosts a 16:9 thumbnail at the top + headline + caption.

card-hero — the slightly larger card variant used as the lead story.

Same chrome as card-content but headline scales to {typography.display-sm}.

Inputs & Forms

text-input — the canonical text input.

Background {colors.canvas}, text {colors.ink}, 1 px solid {colors.ink} border, body in {typography.body-sm}, padding {spacing.md} {spacing.lg}, shape {rounded.sm} 6 px.

Navigation

nav-bar — the dark top nav, fixed to the page top.

Background {colors.ink}, text {colors.on-dark}, padding {spacing.lg} {spacing.3xl}. Layout: logo left, link row right with login / search affordances.

nav-link — the link items inside nav-bar.

Text {colors.on-dark}, set in {typography.body-sm}.

footer — the dark footer band.

Background {colors.ink}, text {colors.on-dark}, padding {spacing.3xl} {spacing.3xl}. Body in {typography.body-sm}; column eyebrows in {typography.caption-uppercase}.

Signature Components

hero-band-dark — the dark navy/ink hero band hosting the massive display headline.

Background {colors.ink} with full-bleed editorial photography overlay at reduced opacity; text {colors.on-dark}; padding {spacing.3xl} {spacing.3xl}. Headline in {typography.display-hero} (uppercase, weight 800).

hero-band-red — the rare full-bleed red hero used on signature campaigns.

Background {colors.primary}, text {colors.on-primary}, padding {spacing.3xl} {spacing.3xl}. Headline in {typography.display-xl}.

content-band-light — the white content band that follows every hero.

Background {colors.canvas}, text {colors.ink}, padding {spacing.3xl} {spacing.3xl}. Section headline in {typography.display-md} or {typography.display-lg} (weight 300).

speechmark-logo-orb — the red square hosting Vodafone's quotation-mark icon. The brand's visual anchor.

Background {colors.primary}, white icon glyph, shape {rounded.sm}. Acts as a focal element between content bands, often near the centre of long pages.

badge-chip — the inline metadata pill used for category tags inside story cards.

Background {colors.canvas-soft}, text {colors.ink}, label in {typography.caption-strong}, padding {spacing.xs} {spacing.md}, shape {rounded.pill-md} 32 px.

divider-on-dark — the 1 px hairline used between sections / columns on dark surfaces.

1 px solid {colors.on-dark} (often at 25 % opacity at the component level).

Examples (illustrative)

Auto-derived kit-mirror demonstration surfaces (scripts/derive-examples-block.mjs). Each ex-* entry references brand-native primitives so downstream consumers (/preview-design, /generate-kit) re-skin the same 10 surfaces consistently. TO_FILL markers indicate missing primitives — resolve in the LLM judgment pass.

ex-pricing-tier — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

Properties: backgroundColor, textColor, borderColor, rounded, padding

ex-pricing-tier-featured — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).

Properties: backgroundColor, textColor, rounded, padding

ex-product-selector — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).

Properties: backgroundColor, rounded, padding

ex-cart-drawer — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).

Properties: backgroundColor, rounded, padding, item-divider

ex-app-shell-row — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.

Properties: backgroundColor, activeIndicator, rounded, padding

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-vodafone {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #25282b;
  --heading-color: #25282b;
  --link-color: #e60000;
  --link-hover-color: #b30000;
  --border-color: #d8d8d9;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(37,40,43,0.06);
  --card-hover-shadow: 0 6px 18px rgba(37,40,43,0.12);
  --header-bg: #25282b;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #717375;
  --button-bg: #e60000;
  --button-text-color: #ffffff;
  --button-hover-bg: #b30000;
  --button-border: none;
  --button-border-radius: 6px;
  --button-secondary-bg: #f2f2f2;
  --button-secondary-text-color: #25282b;
  --button-secondary-hover-bg: #e5e5e6;
  --button-secondary-border: 1px solid #d8d8d9;
  --prompt-bg: #f4f4f4;
  --prompt-text-color: #25282b;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-helvetica);
  --card-border-radius: 6px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

hoshinoresorts 83.3%
hyke 74.0%
replicate 72.0%
mingeikan 71.6%
roland 70.7%

Where this came from

Source document: volt/design-md/vodafone/DESIGN.md · 27.3 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.