Vodafone Inspired Design System

Overview

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 (#e60000), near-black {colors.ink} (#25282b), 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} (#25282b) dark hero / {colors.canvas} (#ffffff) 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.

Colors

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 #e60000 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.

Typography

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

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.

Layout

Spacing System

• Base unit: 4 px (mostly multiples of 4; a few 5/7 px appear inside icon-padding compensation).
• Tokens: {spacing.xxs} 2 px · {spacing.xs} 4 px · {spacing.sm} 8 px · {spacing.md} 12 px · {spacing.lg} 16 px · {spacing.xl} 20 px · {spacing.2xl} 24 px · {spacing.3xl} 32 px.
• Section padding: hero bands and content bands use {spacing.3xl} 32 px gutters; vertical spacing inside hero is fluid (fill-the-band).
• Card interior padding: story cards use {spacing.lg} 16 px around image + headline.
• Inline gap: button rows and chip rows use {spacing.md} 12 px between siblings.

Grid & Container

• Marketing content uses a wide container (effectively edge-to-edge with {spacing.3xl} gutters on desktop, shrinking on mobile).
• Story-card grids: 2-up at desktop, 1-up at mobile.
• Hero photography fills the viewport; the headline overlays at the top-left.

Whitespace Philosophy

The hero's massive display headline owns the whole top of the page; whitespace below is generous to let the second band breathe. Inside content cards, headline and copy hug close ({spacing.sm} 8 px gap), then a wider gap ({spacing.3xl}) before the next card. The footer band is dark and dense.

Responsive Strategy

Breakpoints

Touch Targets

The button-primary pill renders at ~52 px tall (12 px vertical padding + 28 px line-height). All buttons comfortably meet WCAG AAA at every breakpoint.

Collapsing Strategy

• Nav: full link row at desktop. Collapses to a hamburger menu at mobile; the menu opens as a dark overlay with the same link list stacked.
• Hero: the massive display headline scales fluidly. At mobile, the photography crop tightens to the figure's face only.
• Story-card grid: 2-up → 1-up at the breakpoint above.
• Speechmark logo orb: stays at consistent size relative to surrounding content; never shrinks below ~48 px.

Image Behavior

• Hero photography: full-bleed 16:9 or 4:3 portraits at desktop; tighter crops at mobile.
• Story-card thumbnails: 16:9 landscape inside {rounded.card} 6 px chrome.
• Speechmark orb: always rendered as the red SVG quote-mark icon, never substituted.
• Logo bar (if present on partner pages): monochrome SVGs at consistent height.

Elevation & Depth

The brand does not use soft drop shadows; depth comes from polarity-flip between {colors.ink} (#25282b) and {colors.canvas} (#ffffff) bands.

Decorative Depth

• Editorial photography: the hero photo (real-person portrait or environment shot) is the brand's only true atmospheric effect.
• Speechmark logo orb as visual anchor: the red orb hosting the quote-mark icon acts as a single point of focal-depth in the centre of the otherwise-flat content rhythm.

Shapes

Border Radius Scale

Photography Geometry

• Hero portraits: edge-to-edge 16:9 or 4:3 with no internal frame.
• Story-card thumbnails: 16:9 landscape inside {rounded.card} chrome.
• Speechmark logo orb: square with {rounded.sm} corners (visually a tilted-square mark; the SVG mark itself fills the orb).

Components

Buttons

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

• Background {colors.primary} (#e60000), text {colors.on-primary} (#ffffff), 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} (#ffffff), text {colors.primary} (#e60000), 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} (#ffffff), text {colors.ink} (#25282b), 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} (#ffffff), 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} (#ffffff), text {colors.ink} (#25282b), 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} (#ffffff), text {colors.ink} (#25282b), 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} (#25282b), text {colors.on-dark} (#ffffff), 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} (#ffffff), set in {typography.body-sm}.

footer — the dark footer band.

• Background {colors.ink} (#25282b), text {colors.on-dark} (#ffffff), 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} (#25282b) with full-bleed editorial photography overlay at reduced opacity; text {colors.on-dark} (#ffffff); 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} (#e60000), text {colors.on-primary} (#ffffff), padding {spacing.3xl} {spacing.3xl}. Headline in {typography.display-xl}.

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

• Background {colors.canvas} (#ffffff), text {colors.ink} (#25282b), 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} (#e60000), 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} (#f2f2f2), text {colors.ink} (#25282b), 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} (#ffffff, 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.

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

• Properties: backgroundColor, textColor, borderColor, rounded, padding

ex-pricing-tier-featured — Featured tier — polarity-flipped to ink (#25282b) fill + white text.

• Properties: backgroundColor, textColor, rounded, padding

ex-product-selector — Tariff-tier picker — re-purposed as the brand's plan selector with badge-chip chips inside the frame.

• Properties: backgroundColor, rounded, padding

ex-cart-drawer — Subscription summary — line items per tariff add-on, light hairline dividers.

• Properties: backgroundColor, rounded, padding, item-divider

ex-app-shell-row — Sidebar nav row. Active state uses brand primary (#e60000) as the left-edge indicator bar.

• Properties: backgroundColor, activeIndicator, rounded, padding

ex-data-table-cell — Default data-table th + td chrome. Header uses caption-uppercase eyebrow typography; body uses body-sm.

• Properties: headerBackground, headerTypography, bodyTypography, cellPadding, rowBorder

ex-auth-form-card — Sign-in / sign-up card. Re-uses card-content chrome with text-input primitives inside.

• Properties: backgroundColor, rounded, padding

ex-modal-card — Modal dialog surface — same chrome as card-content; brand uses scrim, not card shadow.

• Properties: backgroundColor, rounded, padding

ex-empty-state-card — Empty-state illustration frame on canvas-soft (#f2f2f2) with generous interior padding.

• Properties: backgroundColor, rounded, padding, captionTypography

ex-toast — Toast notification surface — card-content shape with caption-strong body.

• Properties: backgroundColor, rounded, padding, typography

Do's and Don'ts

Do

• Reserve {colors.primary} Vodafone Red (#e60000) 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} (#25282b) dark hero → {colors.canvas} (#ffffff) 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.

Known Gaps

• Motion / transition system: the brand uses brief easings on CTA hover and image reveals, but the precise timing functions and durations are not captured in the spec.
• Semantic palette beyond primary: the documented marketing system reuses primary red #e60000 for destructive signals and does not maintain success or warning tokens; full in-product semantic colours are not included.
• Icomoon glyph set: the proprietary icon font is loaded across the brand surfaces but the individual glyph names and codepoints are not extracted here.
• In-product surfaces: account dashboards, billing flows, and self-service portals operate under separate tokens (typography overrides, denser table chrome) not represented in this marketing-surface spec.
• Photography art direction: the editorial portrait crops (figure-only, eye-line, hand-and-phone) are stylistically distinctive but the specific framing rules and grading recipe live in a separate brand guideline not included in DESIGN.md.