packages/shared-skills/skills/frontend/references/design/vodafone.md
Vodafone's corporate web system carries the confident, broadcast-scale presence of a global telecom brand — built around a single, fiercely-owned brand red and a restrained, editorial layout that lets imagery and type carry the emotional weight. Every page opens the same way: a cinematic dark hero image behind a towering, tight-tracked uppercase display headline ("EVERYONE. CONNECTED.", "INVESTORS", "OUR BUSINESS") followed by a deep red full-width band that acts as a chapter break, then a crisp white editorial grid or a near-black section reserved for institutional content (share ticker, global map, ESG data). The voice is institutional but human: warm documentary photography — cable-laying crews, coral reefs, pine forests, urban twilight — photographed with color-graded realism and set against clean neutral surfaces that never compete with the content.
The typography system is the signature. A custom Vodafone display face runs all the way up to 144px in heavy 800-weight uppercase with negative tracking, and it holds that voice consistently across every page template. Body copy sits in a calm 16-18px mid-weight rhythm. This dual scale — monumental at the top, almost quiet at the bottom — creates the "corporate newsroom" feeling: every page reads like the front of a national paper whose masthead happens to be red.
Surface treatment is disciplined and predictable: a three-surface pass of white (editorial canvas) → Vodafone red (band dividers, CTA buttons, the famous speech-mark logo) → near-black charcoal (footer, share-ticker panel, global-impact map). There is almost no decorative shadow, almost no gradient, and almost no rounded-corner softness. Edges are small and clinical (2px and 6px), buttons operate as a two-tier system — tight 2px rectangles for utility/form actions, and fully-rounded 60px pills for primary content CTAs. This is a design system that trusts the brand color to do the heavy lifting and gets out of its way everywhere else.
Key Characteristics:
#e60000) is the single dominant accent — used for CTAs, dividers, band sections, the speech-mark logo, and the rotated "IMPACT" brand-mark type on the sustainability map#25282b) is reused as the footer AND the institutional data panel (share ticker, world map) — a single material for anything formal and numeric#e60000): The brand's single, non-negotiable signature — used for primary CTA backgrounds, the speech-mark logo, full-bleed band dividers between editorial sections, tag-pill outlines, and the rotated brand-mark type that labels the global-impact map. This red must never be substituted or tinted; it is the identity.#ffffff): The dominant editorial canvas — page background, card backgrounds, reversed text on dark or red surfaces, and circular icon-button fills.#3860be): Reserved for inline text links in their resting state (underlined), providing a calm accessible blue that reads clearly against both white and dark surfaces.#ac1811): A darker red appears on quiet label chips (notably on the sustainability page) — used sparingly for low-prominence tag elements that need red identity without drawing primary attention.#ffffff): The primary page and card surface. Every editorial module sits on this canvas.#f2f2f2): Used for filled neutral pill-badge backgrounds and quiet UI chrome where full white would disappear against the canvas.#25282b): The same color used for text is reused as a full-width dark surface for the footer, the share-ticker panel, and the global-impact map section. It transforms the page into a "data mode" environment.rgba(255,255,255,0.1)): A soft glass tint used for pill buttons that sit on dark hero imagery — lets the photo breathe through the button.#25282b): All heading text on light surfaces and the charcoal surface color itself — a near-black with a faint cool tint, never pure black.#7e7e7e): Body copy, meta text, and secondary labels — a true mid-grey that reads as unemphatic but still legible.#333333): Borders on input-style ghost buttons and the text color inside them.#bebebe): Inactive chip text on subtle ghost-style controls.rgba(255,255,255,0.25)): Hairline column dividers on dark institutional panels (footer columns, map legend rows).#e60000): The same brand red deployed as a full-width band between editorial sections — functions as a chapter divider and a visual amplifier for the brand. Appears on every page template.#e60000): 1px outline on light tag pills, letting the brand color touch small UI without drowning card content.Vodafone's design is intentionally gradient-free. The only tonal variation is a subtle photographic vignette on hero imagery (dim coral reefs, pine forests, cable-laying crews, urban twilight), where the image itself — not a CSS gradient — provides the tonal ramp. No linear gradients are used on buttons, cards, or surfaces.
Vodafone (custom corporate sans-serif)Vodafone, "Helvetica Neue", Arial, sans-serificomoon — carries pictograph glyphs at 18px/24px/48px fixed sizesfont-smoothing: antialiased across the board; OpenType features are not aggressively used — the design relies on weight and tracking, not stylistic alternates| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|
| Display / Hero XL | 144px | 800 | 0.79 | -1px | Uppercase; the signature "EVERYONE. CONNECTED." treatment |
| Display / Hero L | 126px | 800 | 0.90 | -1px | Uppercase; used when the hero headline is longer |
| Display / Hero M | 90px | 800 | 0.93 | — | Uppercase; secondary hero or full-bleed section heads |
| Display / Impact | 70px | 800 | 1.17 | -1px | Sustainability section numeric / callout scale |
| H1 — Light | 48px | 300 | 1.08 | — | Section headlines set in light weight for editorial calm |
| H1 — Bold | 48px | 800 | 1.00 | -1px | Institutional data headers (share price on charcoal panel) |
| H2 — Light | 40px | 300 | 1.10 | — | Sub-section headers |
| H2 — Bold | 40px | 700 | 1.10 | — | Denser sub-section headers |
| H3 — Bold | 32px | 700 | 1.25 | — | Card cluster titles and feature intros |
| H4 — Bold | 24px | 700 | 1.00 | — | Card titles (news, feature, article modules) |
| H4 — Light | 24px | 300 | 1.42 | — | Intro paragraphs on investor / sustainability pages |
| H5 — Bold | 20px | 700 | 1.30 | — | Compact module titles and side callouts |
| Lead Body | 20px | 400 | 1.40 | — | Introductory paragraphs under large headlines |
| Body Large | 18px | 400 | 1.56 | — | Long-form article body and prominent copy |
| Body Bold | 18px | 600 | 1.56 | — | Emphasized inline phrases |
| Body Base | 16px | 400 | 1.38 | — | Default paragraph size |
| Label Uppercase | 16px | 800 | 1.50 | — | Uppercase navigational labels |
| Eyebrow / Date | 14px | 400/700 | 1.43 | — | Article date stamps and meta (14 APR 2026) |
| Tag Pill | 14px | 700 | 1.50 | — | Badge text inside red-outlined pills |
| Caption Uppercase | 14px | 400 | 1.14 | — | Uppercase meta label |
| Caption | 12px | 500 | 2.00 | — | Footer meta, legal lines |
| Micro Label | 12px | 600 | 1.33 | — | Uppercase tiny labels on badges and counters |
| Button Primary | 14.4px | 700 | 1.00 | 0.144px | Primary filled button label |
| Button Compact | 12px | 700 | 1.00 | 0.12px | Compact button label |
The Vodafone corporate typeface is proprietary. When recreating the look in open systems, substitute with Inter at weights 400/600/800, or Neue Haas Grotesk if available. Inter needs its letter-spacing reduced by roughly 1-2% at display sizes (80px+) to approximate the Vodafone face's tight tracking; its line-height should be set to 0.85-0.95 for the uppercase display tier.
Vodafone operates a genuine two-tier primary button system. Both tiers are used as primary calls to action — the difference is context (form/chrome vs editorial/content), not hierarchy.
Primary Red Rectangle (utility / form CTA — "Accept All Cookies", "Subscribe")
#e60000)#ffffff), 14.4px, weight 700, letter-spacing 0.144px#e60000)0.9 on pressPrimary Red Pill (editorial / content CTA — "Link to Our approach to ESG", "EXPLORE CONNECTING PEOPLE")
#e60000)#ffffff), 14.4px, weight 700, letter-spacing 0.144px0.9 on pressGhost White Rectangle (secondary form action)
#ffffff)#333333), 14.4px, weight 700#333333)0.9 on pressGlass Pill (sits on dark hero imagery — secondary content CTA)
rgba(255,255,255,0.1))#ffffff), weight 700Content Ghost Pill (inline within editorial cards — low-emphasis content CTA)
rgba(0,0,0,0.05))#e60000), 14.4px, weight 700Icon Control Button (video play/pause, carousel arrows, close)
#ffffff)#25282b)News / Editorial Card (homepage article tile)
#ffffff)object-fit: cover and rounded top corners (6px top-left/top-right)Asymmetric Corner Card (featured homepage cards)
#ffffff)0px 6px 0px 0px — a deliberate single-corner-rounded shape that echoes the Vodafone speech-mark logo's curved geometryCircular Portrait / Pictogram Container (sustainability page)
#ffffff)Vodafone's corporate site does not expose many inline form controls on the homepage, but button-style inputs follow these rules:
#ffffff)#333333), 16px, weight 400#333333)#e60000) and error message text inherits the same red at 12px weight 600Top bar
#ffffff) on scroll or interior pages#25282b) on white; reversed to white when sitting on dark hero imageryMobile collapse
Two distinct pill styles appear:
Outlined Red Pill (used inline on article card metadata, e.g., "EMPOWERING PEOPLE")
rgba(255,255,255,0.8))rgba(0,0,0,0.8)), 12px, weight 600, uppercase#e60000)Filled Neutral Pill (quieter tags)
#f2f2f2)#25282b), 14px, weight 700A signature reusable component that appears on every page template: a full-width band of Vodafone Red (#e60000) that runs horizontally across the page to separate the monumental hero from the editorial body beneath it. It carries no text and no controls — it simply is the brand's way of saying "new chapter." Typical height: 40-80px.
A distinctive institutional component that anchors the investor template:
#25282b)rgba(255,255,255,0.25)) separate the ticker from the footer columnsA signature reusable component that anchors the sustainability template:
#25282b)#e60000) plotted on geographic locations where the brand operatesA universal component across all page templates:
#25282b)rgba(255,255,255,0.25) between column group and legal rowBase unit: 8px. The scale accommodates both tight UI (1px, 2px, 4px) and generous editorial rhythm (16px, 20px, 24px, 32px). Two values (32px and 38px) appear across every page in the analysis, making them the template's universal rhythm constants.
| Token | Value | Typical Use |
|---|---|---|
| 2xs | 2px | Hairline separators |
| xs | 4px | Icon-to-text gap in tight controls |
| sm | 8px | Base rhythm unit |
| md | 12px | Card internal padding, eyebrow-to-title gap |
| base | 16px | Paragraph rhythm, card padding, pill button padding |
| lg | 20px | Section-internal spacing |
| xl | 24px | Card-to-card spacing, column gutters |
| 2xl | 32px | Section intro-to-content breaks — universal constant |
| 3xl | 38px | Band-to-next-section vertical push — universal constant |
| section | 64-96px | Vertical rhythm between major editorial modules |
Vodafone's editorial canvas leans generous — whitespace is used as a visual palette cleanser between a monumental headline and the card grid or data panel that follows. Sections are separated by tall vertical rhythm (64-96px) plus the occasional red band that acts as both a separator and a brand signal. Within cards, spacing is tight and efficient (12-16px) so the photography can take the stage.
| Token | Value | Typical Use |
|---|---|---|
| hairline | 1px | Inline text wraps, small badges |
| button-tight | 2px | Primary and secondary rectangle button corners — the brand's utility-form look |
| card | 6px | News cards, images, input fields |
| asymmetric | 0px 6px 0px 0px | Featured cards (top-right corner only) |
| glass-pill | 24px | Translucent white pills sitting on dark hero imagery |
| badge-pill | 32px | Filled neutral pill badges |
| cta-pill | 60px | Primary red content CTAs — the brand's editorial button look |
| circle | 50% | Icon buttons, carousel arrows, close controls |
| portrait | 100% | Circular portraits and ESG pictograms |
Vodafone's system is deliberately flat. There is almost no conventional box-shadow in the UI. Hierarchy is carried by color (red bands, charcoal institutional panels), typography weight (800 vs 400), and spacing.
| Level | Treatment | Use |
|---|---|---|
| 0 — Surface | No shadow, no border | Default card, default section |
| 1 — Outline | 1px solid border at low-opacity | Ghost buttons, outlined pills |
| 2 — Inset Highlight | inset 0 0 0 1px on focus | Pressed / focused controls |
| 3 — Photographic depth | The photography itself carries the depth | Hero imagery |
| 4 — Surface shift | Charcoal institutional panel below a white editorial canvas | Share ticker / world map / footer |
Shadow philosophy: Vodafone treats drop shadows as a distraction from brand clarity. The few extracted shadow tokens are reserved for inset focus rings. The dominant "elevation" in the system is a color surface shift — switching from the white editorial canvas to the charcoal institutional panel — rather than a lift-off drop shadow.
The only decorative depth cues are:
#e60000) as the single loudest element on any screen — one primary CTA per fold, one red band per editorial break#25282b) — the footer always, and on investor/sustainability pages extend the same color up to include the share ticker or the global-impact map#000000) for text or surfaces — always use Charcoal Headline (#25282b)The practical tiers observed across all three templates:
| Name | Width | Key Changes |
|---|---|---|
| Mobile | ≤ 600px | Nav collapses to hamburger; hero display drops to ~56-72px; cards stack 1-up |
| Mobile Large | 601-767px | Hero display ~72-90px; cards still stack 1-up |
| Tablet | 768-1023px | Nav re-expands; cards grid 2-up; hero display ~90-120px |
| Laptop | 1024-1199px | Full nav; cards 3-up; hero display ~120-144px |
| Desktop | 1200-1439px | Standard editorial layout; cards 3-up or 4-up |
| Wide | ≥ 1440px | Content caps at 1440px; outer canvas padding grows |
All interactive controls meet a 44×44px minimum on mobile. Icon buttons use 40×40px circular hit areas which expand with 4px invisible padding on touch devices. Primary CTA buttons land at approximately 48×48px on mobile (16px top/bottom + text line for pills; 12px + text line for rectangles).
loading="lazy" is standard#e60000)"#ffffff)"#25282b)"#7e7e7e)"#25282b)"#3860be)"#f2f2f2)"#e60000) background, pure white 14.4px weight 700 text, 2px border radius (sharp corners), 12px vertical × 10px horizontal padding. Use for form and utility actions. No shadow, no gradient."#e60000) background, pure white 14.4px weight 700 text, 60px border radius (fully pill-shaped), 16px uniform padding. Use for editorial content calls-to-action."#e60000), 64px tall on desktop and 40px on mobile, no text, no controls — it acts purely as a visual chapter break between editorial sections."#25282b) background, large numeric display at 48px weight 800 white with negative letter-spacing, 14px weight 400 grey meta row beneath. Use for share ticker or stats callout."#25282b) background, minimal grey world-map illustration, red Vodafone-red circular markers on operational locations, the brand word 'IMPACT' set at large display size in brand red and rotated 90° to run vertically along one edge."When refining existing screens generated with this design system: