Design Token Catalog

Design System
Inspired by
Vodafone

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.

Primary CTA Secondary

01 / Colors

Color Palette

Primary & Action

Vodafone Red
#e60000
Brand anchor. CTAs, stat callouts, active states

Surfaces & Backgrounds

White
#ffffff
Default page background, card surfaces
Light Gray
#f2f2f2
Badge backgrounds, secondary surfaces
Dark Charcoal
#25282b
Navigation shell, dark editorial sections
Warm Divider
#d7d7d7
Table headers, horizontal rules, row separators

Neutrals & Text

Contrast Text
#333333
Primary body copy on white, form text
Mid Gray
#7e7e7e
Secondary copy, captions, muted metadata
Pure Black
#000000
Utility overlays, focus ring outlines

Interactive States

Focus Teal
#1eaedb
Keyboard focus on buttons and inputs only
Hover Blue
#3860be
Inline link hover on light backgrounds

02 / Typography

Type Scale

Voda
Campaign Hero — 144px / 800 / 0.79 / -1px / Inter (stand-in)
Hello
Display XL — 126px / 800 / 0.90 / -1px / Inter (stand-in)
Power to you
Display L — 90px / 800 / 0.93 / none / Inter (stand-in)
Together
Display M — 70px / 800 / 1.17 / -1px / Inter (stand-in)
Connected world
Display S — 58px / 800 / 1.14 / -1px / Inter (stand-in)
Learn more
Nav / Large Link — 48px / 400 / 0.58 / none / Inter (stand-in)
Get Started Now
Button Label — 16px / 800 / 1.0 / none / Inter (stand-in)
Plans from €9.99/month. Terms apply.
Caption — 14px / 400 / 1.14 / none / Inter (stand-in)

03 / Buttons

Button Variants

Primary
#e60000 · 60px radius
Primary Hover
#fff · border #25282b
Focus (Keyboard)
#1eaedb · border #000
Neutral Tag Badge / Tag
#f2f2f2 · 32px radius

04 / Cards

Cards on Light Background

Consumer
99%

Coverage nationwide

Vodafone's network reaches more homes and businesses than any competitor, with consistent speeds across urban and rural areas.

Check your area →
Business

Enterprise Solutions

Dedicated account management, SLA-backed uptime, and flexible contracts for companies of all sizes.

Get a quote →
Highlighted

Elevated Card

This card uses the elevated shadow — used for dropdowns, sticky headers, and panels that need to stand above the surface.

Learn more →

04 / Cards

Cards on Dark Background

IoT
5G

Next Generation

Ultra-low latency and massive device capacity — enabling the connected devices that define modern life.

Explore 5G →
Partner

Developer APIs

Build on Vodafone infrastructure. SMS, voice, data and network APIs available for registered developers.

Start building →

05 / Forms

Input States

Default — #fff bg · 1px solid #8a8a8a · 3px radius
Focus — #1eaedb bg · 1px solid #000 · 3px radius
Textarea — same token as default input

06 / Spacing

Spacing Scale

nano — 2px Hairline offsets, border nudges
xs — 4px Icon-to-text gaps, tight inline padding
sm — 6px Compact element spacing
base — 8px Core rhythm unit
md — 12px Most-used component padding
lg — 16px Standard section padding
xl — 24px Card internal padding, CTA padding
2xl — 32px Between component groups
3xl — 48px Section inner spacing
section — 64px Major vertical rhythm
hero — 96px Hero and banner vertical spacing

07 / Radius

Border Radius Scale

micro
2px
Focus rings, state indicators
input
3px
Form field corners
standard
6px
Cards, images, containers
medium
20px
Accent spans, highlights
badge
32px
Tags, badges, neutral chips
pill
60px
Primary CTA buttons
circle
100%
Avatars, media icons

08 / Elevation

Shadow System

Level 0
Flat
Default page surfaces, navigation, inline elements. No shadow.
Level 1
Ambient
Background containers, section wrappers.
rgba(0,0,0,0.08) 1px 1px 19px 0px
Level 2
Card
Standard card elevation, content tiles.
rgba(0,0,0,0.16) 0px 2px 8px 0px
Level 3
Elevated
Dropdowns, sticky headers, highlighted panels.
rgba(0,0,0,0.2) 0px 4px 8px 0px
Source: www.designmd-store.com