Design System

Everyone.
Connected.

Clean connectivity with bold confidence. A light, spacious canvas energized by the iconic Vodafone Red.

18 color tokens 20+ type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Light neutrals with Vodafone Red as the singular brand accent. 18 tokens across surfaces, text, interaction, and status colors.

Cloud White
#ffffff
Primary page background
Snow
#f7f7f7
Secondary sections
Mist
#eeeeee
Borders, dividers
Silver
#d9d9d9
Inactive states
Iron
#999999
Placeholders, labels
Charcoal
#333333
Primary text
Night
#1a1a1a
Strongest emphasis
Vodafone Red
#e60000
Primary brand, CTAs
Deep Red
#a50000
Hover states
Signal Red
#ff3333
Errors, alerts
Crimson
#990000
Pressed states
Ember
#cc0000
Gradient stops
Teal
#00b0ca
Informational accents
Forest
#008a00
Success states
Amber
#f5a623
Warning states

Gradients

red-glow
Subtle brand-tinted background highlight
red-sweep
Hero banners, feature cards
neutral-wash
Section transitions
Typography

Type Scale

Vodafone as primary typeface (Inter substitute). Clean geometry with open letterforms for excellent readability across all screen sizes.

Display-lg Everyone connected 48px / 1.0 / -0.02em
Display Bold headlines 40px / 1.1 / -0.02em
Heading-lg Section heading 32px / 1.2 / -0.02em
Heading Subsection heading 24px / 1.25 / -0.01em
Body Default body text for readable content 16px / 1.5 / 0
Body-sm Dense data, comparison rows 14px / 1.5 / 0.01em
Caption Meta info · Footer · Labels 12px / 1.5 / 0.02em

Fonts

Primary Vodafone 400-700 · 12-18px
Bold Vodafone Bold 700 · 24-48px · Heroes
Mono Vodafone Mono 400 · 14px · Data only
Fallback Inter Substitute for all above
Layout

Spacing & Shapes

Base unit 4px. Comfortable density with generous breathing room. 14-step spacing scale, 5 border radius values.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
9696px

Border Radius

default 4px
buttons 8px
input 8px
xl 12px
cards 16px
pill 9999px

Shadows

Subtle border only
Elevated cards, hover
Floating modals, popovers
Elevation

Depth & Surfaces

Border-first elevation system. Subtle shadows on hover and for modals. 4 distinct surface levels on a light canvas.

Depth Levels

Cloud White
Base page background — the canvas
Level 0
Snow
Secondary sections, alternate content areas
Level 1
Content Card
Elevated panels, cards with border
Level 2
Modal Overlay
Modals, dialogs, popovers
Level 3

Surface System

Cloud White #ffffff
Snow #f7f7f7
Content Card #ffffff + shadow
Modal Overlay #ffffff + shadow
Components

Button Variants

Primary action (Vodafone Red), secondary outlined, and ghost variants for a clear interaction hierarchy.

Primary Action Button
Main call to action — highest visual weight
.btn-primary
Vodafone Red (#e60000) background, Cloud White text, 8px radius. Use exclusively for the single most important action on any page.
Secondary Button
Alternative actions, supporting CTAs
.btn-secondary
Cloud White background, Vodafone Red text, 1px Vodafone Red border, 8px radius. For secondary actions that still need visibility.
Ghost Button
Tertiary actions, subtle interactions
.btn-ghost
Transparent background, Charcoal text, 1px Silver border, 8px radius. Hover reveals Snow background.
Navigation Bar
Site-wide navigation
.nav
Vodafone Plans Devices Support Business
Cloud White background, Vodafone Red wordmark, Charcoal links with Vodafone Red hover indicator. 64px height, sticky.
Content Card
Information display, feature highlights
.card
Stay connected
Our next-gen networks keep you connected wherever you go.
Cloud White background, 16px radius, 24px padding, 1px Mist border. Title in Charcoal at 20px, body in Iron at 14px.
Input Field
User text input
input
Cloud White background, 8px radius, 12px padding. Silver border by default, Vodafone Red on focus.
Guidelines

Do's & Don'ts

Do — Embrace
  • Cloud White (#ffffff) as primary background
  • Vodafone Red (#e60000) for CTAs and brand moments
  • Charcoal (#333333) for all body text
  • Night (#1a1a1a) only for strongest emphasis
  • 8px radius for buttons, 16px for cards
  • 4px-based spacing with generous breathing room
  • Snow (#f7f7f7) for alternate section backgrounds
Don't — Avoid
  • Vodafone Red for large background areas
  • Red text on dark backgrounds without contrast check
  • Mixing red shades in a single interactive element
  • Amber or Signal Red outside warning/error contexts
  • Dense, tight spacing without breathing room
  • Decorative gradients on small UI elements
  • Monospace font for non-technical content