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:**

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.

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.

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

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

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.

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

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.

| 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}` border. | Form inputs, the `divider-on-dark` between footer columns. |

| Level 2 — Border on Dark | 1 px solid `{colors.on-dark}` 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}` and `{colors.canvas}` bands.

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

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

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

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

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

**`card-content`** — the default story-card chrome.

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

**`text-input`** — the canonical text input.

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

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

**`footer`** — the dark footer band.

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

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

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

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

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

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

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

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

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

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

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

**`ex-data-table-cell`** — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.

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

**`ex-modal-card`** — Modal dialog surface — same chrome as feature-card with elevated shadow.

**`ex-empty-state-card`** — Empty-state illustration frame.

**`ex-toast`** — Toast notification surface — feature-card shape + medium shadow.