---
version: alpha
name: Vodafone Inspired
website: "https://www.vodafone.com"
description: An inspired interpretation of Vodafone's design language — 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 the proprietary Vodafone display sans set at impossibly heavy 800 weight.

seo:
  title: "Vodafone Design System for React — Red #e60000, Vodafone Sans, 144px display"
  metaDescription: "Vodafone's design language as a DESIGN.md file. Red #e60000, custom Vodafone sans at weight 800, 8 colors, 30+ components. For React, Next.js, and AI tools."
  highlights:
    - "Single accent voltage — Vodafone Red #e60000 carries every primary CTA, the speechmark logo orb, and zero secondary use"
    - "Weight 800 uppercase display at 144px with -1px tracking — the stencil hero is the brand's typographic signature"
    - "Two-band page rhythm — ink #25282b hero into white #ffffff content, with no mid-band greys for elevation"
    - "Pill geometry on every interactive — 60px CTA pills are non-negotiable, square buttons do not exist in the system"
    - "No drop shadows — depth comes entirely from surface polarity flip between ink and canvas bands"
  tags:
    - "Communication & Messaging"
    - "Consumer Electronics"
  lastUpdated: "2026-05-12"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Vodafone's design system reads like a campaign poster more than a corporate website. The brand operates from a single voltage of scarlet red (#e60000) paired with near-black ink (#25282b), and trusts its proprietary display sans set at weight 800 in upper case to do the heavy lifting at hero scale. Editorial photography crops portraits and city scenes tight, then a single colossal stencil headline floats on top at 144px with -1px tracking. There is no second accent colour competing for attention, no decorative gradient, no soft drop shadow on cards. The depth cue is surface contrast between dark hero bands and light content bands.

    This page packages that posture into a single DESIGN.md file built to the Google Labs spec. Inside: 8 colour tokens covering primary red, three ink/text greys, two surface tints, and on-dark white; 17 typography roles all drawing from the one custom Vodafone face at weights 300, 400, 600, 700, and 800; 8 spacing tokens on a 4px base; 6 radius tokens running from 0px through pill-lg at 60px; and 30+ components covering buttons, cards, the signature hero bands, the red speechmark logo orb, navigation, footer, and an example surface kit for downstream re-skinning.

    Feed the file to Claude, Cursor, or GitHub Copilot and the agent will reproduce Vodafone's restraint — the red pill, the uppercase 800-weight hero, the two-band rhythm — rather than emit a generic telco theme. Or reference the tokens directly in Tailwind config and CSS variables. The system is worth studying for one reason: it shows how a brand can run a global web surface on three colours, one font, and zero shadow tiers, and still feel like a billboard. Restraint is the product.
  related:
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "/blocks"
      title: "React blocks for shadcn/ui"
      description: "Production-ready hero, pricing, CTA, and dashboard sections built with Tailwind + shadcn primitives."
  questions:
    - id: "primary-color"
      title: "What is Vodafone's primary brand color?"
      answer: "Vodafone Red — #e60000 — is the brand's single accent. It carries every primary CTA pill (`button-primary`), the speechmark logo orb that anchors the centre of each page, and the rare full-bleed `hero-band-red` campaign surface. The brand never introduces a second accent colour. The supporting palette is near-black ink #25282b, white #ffffff canvas, and two grayscale tints (#f2f2f2 canvas-soft and #bebebe mute) for body text and surface separation."
    - id: "typography"
      title: "What typography does Vodafone use, and what should I use if the custom font isn't available?"
      answer: "The system runs a single proprietary face called Vodafone (with Vodafone Rg as the regular fallback name, then Helvetica Neue and Arial as system stacks). It spans weights 300, 400, 600, 700, and 800 — every typographic role pulls from this one family. The signature `display-hero` token sits at 144px / 800 / -1px tracking in upper case. If the proprietary face is unavailable, Inter at weight 800 with letter-spacing -1px is the closest open-source substitute at hero scale; Geist at 700–800 is second-best."
    - id: "shape-language"
      title: "Why does Vodafone use pill-shaped buttons everywhere?"
      answer: "The brand has run pill-shaped CTAs on its marketing surface for years. Every interactive button — primary, outline-red, outline-dark — uses `rounded.pill-lg` at 60px, with badge chips at `rounded.pill-md` 32px and icon containers at `rounded.full` 9999px. Cards stay gentler at 6px (`rounded.card`). The 60px CTA pill is non-negotiable across the brand. Square buttons simply do not exist in the documented system."
    - id: "dark-mode"
      title: "Does Vodafone's design system have a dark mode?"
      answer: "Not as a separate theme. The brand instead alternates light and dark bands within the same page: `hero-band-dark` on #25282b ink with white text and the colossal display headline overlay, followed by `content-band-light` on #ffffff canvas with ink text, finishing on a dark footer band again. Surface polarity is the depth cue. There is no soft mid-grey band, no atmospheric gradient, and the brand relies on this two-band rhythm rather than maintaining parallel light and dark token sets."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React landing page?"
      answer: "Yes — the file is structured so any AI tool that reads YAML token specs (Claude, Cursor, Copilot) will emit components that match Vodafone's restraint: the red pill, the uppercase 800-weight hero, the two-band rhythm, the speechmark orb anchor. You can also reference tokens directly: every hex (#e60000, #25282b, #f2f2f2…), font weight, and radius value in the spec is a quoted value you can paste into Tailwind config, CSS variables, or your own design tokens."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "A handful of things flagged in the file: the full motion / transition system (the brand uses brief easings on CTA hover and image reveals that aren't captured numerically), the semantic palette for success/warning states (the documented marketing system reuses primary red for destructive signals and does not maintain success or warning tokens), the icomoon glyph set used for proprietary icons (loaded as a font but not extracted), and the in-product surfaces beyond marketing (account dashboards, billing flows) which operate under separate tokens not covered here."

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

typography:
  display-hero:
    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
    fontSize: 144px
    fontWeight: 800
    lineHeight: 114px
    letterSpacing: -1px
  display-xxl:
    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
    fontSize: 126px
    fontWeight: 800
    lineHeight: 113px
    letterSpacing: -1px
  display-xl:
    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
    fontSize: 90px
    fontWeight: 800
    lineHeight: 84px
  display-lg:
    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
    fontSize: 48px
    fontWeight: 300
    lineHeight: 52px
  display-md:
    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
    fontSize: 40px
    fontWeight: 300
    lineHeight: 44px
  display-sm:
    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
    fontSize: 32px
    fontWeight: 700
    lineHeight: 40px
  display-xs:
    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
    fontSize: 24px
    fontWeight: 700
    lineHeight: 24px
  eyebrow-uppercase:
    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
    fontSize: 16px
    fontWeight: 800
    lineHeight: 24px
  body-lg:
    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
    fontSize: 22px
    fontWeight: 400
    lineHeight: 24px
  body-md:
    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
  body-md-strong:
    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
    fontSize: 18px
    fontWeight: 600
    lineHeight: 28px
  body-sm:
    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 20px
  body-sm-strong:
    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
    fontSize: 16px
    fontWeight: 700
    lineHeight: 22px
  caption:
    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
    fontSize: 14px
    fontWeight: 400
    lineHeight: 16px
  caption-strong:
    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
    fontSize: 14px
    fontWeight: 700
    lineHeight: 21px
  caption-uppercase:
    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
    fontSize: 12px
    fontWeight: 600
    lineHeight: 16px
    letterSpacing: 0.5691px
  button-md:
    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px

rounded:
  none: 0px
  xs: 1px
  sm: 6px
  card: 6px
  pill-md: 32px
  pill-lg: 60px
  full: 9999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

components:
  nav-bar:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-sm}"
    padding: "{spacing.lg} {spacing.3xl}"
  nav-link:
    textColor: "{colors.on-dark}"
    typography: "{typography.body-sm}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill-lg}"
    padding: "{spacing.md} {spacing.2xl}"
  button-outline-red:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill-lg}"
    padding: "{spacing.md} {spacing.2xl}"
  button-outline-dark:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill-lg}"
    padding: "{spacing.md} {spacing.2xl}"
  button-icon-circular:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    borderColor: "{colors.canvas}"
    rounded: "{rounded.full}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: "{spacing.md} {spacing.lg}"
  badge-chip:
    backgroundColor: "{colors.canvas-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.caption-strong}"
    rounded: "{rounded.pill-md}"
    padding: "{spacing.xs} {spacing.md}"
  card-content:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.card}"
    padding: "{spacing.lg}"
  card-hero:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-sm}"
    rounded: "{rounded.card}"
    padding: "{spacing.lg}"
  hero-band-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.display-hero}"
    padding: "{spacing.3xl} {spacing.3xl}"
  hero-band-red:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.display-xl}"
    padding: "{spacing.3xl} {spacing.3xl}"
  content-band-light:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    padding: "{spacing.3xl} {spacing.3xl}"
  speechmark-logo-orb:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
  divider-on-dark:
    borderColor: "{colors.on-dark}"
  footer:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-sm}"
    padding: "{spacing.3xl} {spacing.3xl}"

  # ─── Examples (illustrative) — auto-derived; resolve any TO_FILL markers below ───
  ex-pricing-tier:
    description: "Default tier card. Mirrors card-content chrome with canvas-soft surface and a hairline border."
    backgroundColor: "{colors.canvas-soft}"
    textColor: "{colors.ink}"
    borderColor: "{colors.mute}"
    rounded: "{rounded.card}"
    padding: "{spacing.lg}"
  ex-pricing-tier-featured:
    description: "Featured tier — polarity-flipped to ink with white text and white pill CTA inside."
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.card}"
    padding: "{spacing.lg}"
  ex-product-selector:
    description: "Tariff-tier picker — repurposed as the brand's plan selector with badge-chip chips inside the frame."
    backgroundColor: "{colors.canvas-soft}"
    rounded: "{rounded.card}"
    padding: "{spacing.lg}"
  ex-cart-drawer:
    description: "Subscription summary — line items per tariff add-on, light hairline dividers."
    backgroundColor: "{colors.canvas}"
    rounded: "{rounded.card}"
    padding: "{spacing.lg}"
    item-divider: "{colors.mute}"
  ex-app-shell-row:
    description: "Sidebar nav row. Active state uses brand primary as a left-edge indicator bar."
    backgroundColor: "{colors.canvas}"
    activeIndicator: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: "{spacing.md} {spacing.lg}"
  ex-data-table-cell:
    description: "Default data-table cell chrome. Header uses caption-uppercase mono-style eyebrow; body uses body-sm."
    headerBackground: "{colors.canvas-soft}"
    headerTypography: "{typography.caption-uppercase}"
    bodyTypography: "{typography.body-sm}"
    cellPadding: "{spacing.md} {spacing.lg}"
    rowBorder: "{colors.mute}"
  ex-auth-form-card:
    description: "Sign-in / sign-up card. Mirrors card-content chrome with text-input primitives inside."
    backgroundColor: "{colors.canvas-soft}"
    rounded: "{rounded.card}"
    padding: "{spacing.lg}"
  ex-modal-card:
    description: "Modal dialog surface — same chrome as card-content; brand uses scrim, not card shadow."
    backgroundColor: "{colors.canvas}"
    rounded: "{rounded.card}"
    padding: "{spacing.lg}"
  ex-empty-state-card:
    description: "Empty-state illustration frame on canvas-soft with generous interior padding."
    backgroundColor: "{colors.canvas-soft}"
    rounded: "{rounded.card}"
    padding: "{spacing.3xl}"
    captionTypography: "{typography.body-md}"
  ex-toast:
    description: "Toast notification surface — card-content shape with caption-strong body."
    backgroundColor: "{colors.canvas}"
    rounded: "{rounded.sm}"
    padding: "{spacing.md} {spacing.lg}"
    typography: "{typography.body-sm}"

---

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

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

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

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 600px | Hero display scales down to ~64 px; story-card grid drops to 1-up; nav collapses to hamburger. |
| Tablet | 600–1023px | Story-card grid 2-up; display headlines drop to 90 – 110 px. |
| Desktop | 1024–1399px | Full display headline at 126 – 144 px; 2-up story grid. |
| Ultra-wide | ≥ 1400px | Container caps at ~1400 px; bands stay edge-to-edge in colour. |

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

| Level | Treatment | Use |
|---|---|---|
| Level 0 — Flat | No shadow, no border. | Default for most cards and panels — surface contrast does the elevation work. |
| Level 1 — Hairline | 1 px solid `{colors.ink}` (#25282b) border. | Form inputs, the `divider-on-dark` between footer columns. |
| Level 2 — Border on Dark | 1 px solid `{colors.on-dark}` (#ffffff) border on `{colors.ink}` surfaces. | Outline buttons sitting on the dark hero band. |

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

| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | 0px | Full-bleed hero bands, footer, banner strips. |
| `{rounded.xs}` | 1px | Tightest inline indicator (rarely used). |
| `{rounded.sm}` | 6px | The brand's canonical content radius — applied to images and inputs. |
| `{rounded.card}` | 6px | Card chrome and image frames (alias for `sm`). |
| `{rounded.pill-md}` | 32px | Badge / chip pills. |
| `{rounded.pill-lg}` | 60px | The brand's signature CTA pill — every primary and secondary button. |
| `{rounded.full}` | 9999px | Circular icon containers (e.g., video play/pause). |

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