# Vodafone — Design System
> Global telecommunications provider.
- **Canonical:** https://uiuxskills.com/library/vodafone
- **Source:** https://www.vodafone.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:18:08.311Z

---

---
version: alpha
name: Vodafone
description: Global telecommunications provider.
tone: Professional, authoritative, and direct.
color-scheme: light
colors:
  primary: "#E60000"
  surface: "#FFFFFF"
  on-surface: "#333333"
  on-primary: "#FFFFFF"
  surface-dim: "#F4F4F4"
  outline: "#D1D5DB"
  error: "#D32F2F"
  success: "#388E3C"
  warning: "#F57C00"
  info: "#1976D2"
typography:
  display-lg:
    fontFamily: Vodafone Rg, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: Vodafone Rg, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Vodafone Rg, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Vodafone Rg, sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: Vodafone Rg, sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: Vodafone Rg, sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: Vodafone Rg, sans-serif
    fontSize: 0.875rem
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    width: auto
  button-primary-hover:
    backgroundColor: "#C20000"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#C20000"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.display-lg}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-warning:
    backgroundColor: "{colors.warning}"
    typography: "{typography.display-lg}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-info:
    backgroundColor: "{colors.info}"
    typography: "{typography.display-lg}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Vodafone maintains a high-contrast, bold visual identity centered around its iconic red brand color. The design language is professional, clean, and focused on accessibility and clear communication.

## Colors

The color strategy relies on a high-contrast palette to ensure readability and brand recognition. The signature red is used exclusively for primary actions and highlights, while a neutral grayscale provides the structural foundation.

*   Primary (inferred) (#E60000): The signature Vodafone red used for branding and primary actions.
*   Surface (inferred) (#FFFFFF): Standard white background for clean content presentation.
*   On-surface (inferred) (#333333): Dark grey text for high readability on white surfaces.
*   On-primary (inferred) (#FFFFFF): White text for use on primary red backgrounds.
*   Surface-dim (inferred) (#F4F4F4): Light grey for subtle section backgrounds.
*   Outline (inferred) (#D1D5DB): Neutral border color for dividers and inputs.
*   Error (inferred) (#D32F2F): Standard error red for validation states.
*   Success (inferred) (#388E3C): Standard success green for positive feedback.
*   Warning (inferred) (#F57C00): Standard warning orange for alerts.
*   Info (inferred) (#1976D2): Standard info blue for helpful context.

## Typography

The typography system uses a consistent sans-serif family to maintain a professional and authoritative tone across all touchpoints.

*   Display-lg (inferred): Large hero headlines.
*   Display-md (inferred): Secondary headlines.
*   Headline-lg (inferred): Section titles.
*   Headline-md (inferred): Sub-section titles.
*   Headline-sm (inferred): Small headers.
*   Body-md (inferred): Standard paragraph text.
*   Body-sm (inferred): Secondary or footer text.

## Layout

Vodafone utilizes a responsive grid system that centers content on larger screens and uses full-width containers on mobile. The system follows a 4px base unit to maintain vertical rhythm, with {spacing.md} (16px) serving as the default gutter between grid columns.

## Elevation & Depth

Depth is used sparingly, primarily to differentiate interactive elements like cards and modals from the background. Values are inferred based on standard corporate design patterns.

*   elevation.sm: Subtle card lift.
*   elevation.md: Dropdown or popover depth.
*   elevation.lg: Modal or drawer overlay.

## Shapes

The design system favors subtle rounding for UI components to maintain a balance between modern softness and professional structure. 

Interactive elements like inputs use {rounded.sm} (2px) to define boundaries, while cards utilize {rounded.md} (4px) to soften their appearance without losing the structural integrity required for a corporate identity.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Buttons
Primary buttons use {colors.primary} with {colors.on-primary} text, shifting to a darker shade on hover. Secondary buttons are transparent with a {colors.primary} border and text, suitable for lower-priority actions.

### Cards
Cards are defined by a {colors.surface} background and {colors.outline} border. Use {card-elevated} when additional depth is required to separate content from the background.

### Input Fields
Inputs utilize {rounded.sm} and an {colors.outline} border. On focus, the border color transitions to {colors.primary} to provide clear visual feedback.

### Badges
Badges use {colors.surface-dim} for neutral status, while semantic badges (error, success, warning, info) use their respective color tokens to communicate state clearly.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary call-to-action buttons. | Never use {colors.primary} for body text. |
| Apply {typography.headline-lg} for main page titles. | Avoid using {typography.display-lg} for secondary content. |
| Use {colors.outline} for all structural dividers. | Do not use sharp corners (0px) on interactive components. |
| Ensure {colors.on-primary} is used for text on {colors.primary} backgrounds. | Never mix {colors.error} and {colors.success} in a way that confuses user intent. |
| Use {rounded.md} for card components to maintain consistency. | Avoid excessive use of {elevation.lg} on flat surfaces. |
| Apply {spacing.md} as the default gutter between grid columns. | Do not use {spacing.xs} for primary layout margins. |
| Use {input-field-focus} for active form states. | Do not use {colors.outline} for primary button backgrounds. |
| Apply {typography.body-md} for standard paragraph content. | Do not use {typography.display-lg} for body copy. |

## Content Style

CTA labels should be direct, action-oriented verbs in sentence case. Keep labels concise to maintain the professional, authoritative tone.

Headings should be clear, benefit-driven statements that provide immediate context to the user. Avoid vague marketing fluff in favor of direct communication.

Copy density should be kept low; use scannable paragraphs and frequent lists to break up information. This ensures the content remains accessible and easy to digest on mobile devices.

## Imagery & Icons

The brand uses a mix of high-quality lifestyle photography and clean, minimal iconography. Icons should feature rounded edges that align with the {rounded.md} scale, ensuring they feel integrated with the UI components. Photography should be professional and authentic, avoiding overly stylized filters.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Vodafone, a global telecommunications brand with a professional, authoritative, and direct tone. Apply visual design tokens from the spec exactly. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.sm}` — never hardcode hex values, pixel sizes, or font families directly.
2. Use only the component variants defined under `components:`. Do not invent button styles, badge variants, or card treatments the spec does not list.
3. Follow the Shapes section when applying radius: `{rounded.sm}` on inputs, `{rounded.md}` on cards. Use elevation values (`{elevation.sm}`, `{elevation.md}`, `{elevation.lg}`) sparingly per the Elevation & Depth narrative.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it — for example, using `{colors.primary}` for body text — surface the conflict explicitly before proceeding.
5. All color tokens in this spec are marked "(inferred)" and are visual approximations. If an authoritative token source (Figma tokens, Storybook, theme file) is available, those values supersede this spec.

## Output contract

**Must:**
- Use token names for every color, spacing, radius, elevation, and typography decision.
- Render hover, focus, and disabled states for all interactive components when the spec defines them (`{button-primary-hover}`, `{input-field-focus}`, `{link-hover}`).
- Use `{spacing.xs}` through `{spacing.2xl}` for all padding, margin, and gap values.
- Apply `{typography.headline-lg}` for main page titles and `{typography.body-md}` for standard paragraph text.
- Keep CTA copy direct, action-oriented, sentence case — matching the Content Style section.

**Must NOT:**
- Introduce colors, fonts, radii, or elevation levels not present in the spec.
- Use generic utility defaults when a brand token exists.
- Use `{colors.primary}` for body text or decorative purposes unrelated to primary actions.
- Add emoji, filler phrases, or unsolicited marketing copy.
- Rewrite, replace, or invent page copy, headings, labels, or navigation items.
- Alter information architecture as a side effect of applying tokens.

## When in doubt
- If the spec does not define a value, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous background roles, default to `{colors.surface}`; for text on those backgrounds, use `{colors.on-surface}`; for primary actions, use `{colors.primary}`.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px, using `{spacing.md}` as the column gutter per the Layout section.
- Tokens marked "(inferred)" are approximations; defer to any authoritative design system source the product team provides.