prismdinstrument

EXTRACTED · 9 SECTIONS · 8 COLORS · GRADE C

vodafone.com

Accent #5e6ad2 · Vodafone — every value below measured via getComputedStyle(), not asserted by hand.

colors

faces

keyframes

breakpoints

DESIGN.md tokens.json

real render · source of truth

vodafone.com is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(230, 0, 0) as the high-saturation accent for primary actions. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Vodafone as the primary typeface. Vodafone is paired with icomoon for secondary roles. Depth comes from borders and surface contrast rather than shadows — a flat, structural elevation model. Motion is a first-class concern — 20 keyframe animations plus transition-driven interactions.

Color — roles, semantics & the full census

8 colors measured · click any swatch to copy

Canvas

#ffffff

AAA 14.82:1

Ink

#25282b

AAA 14.82:1

Accent

#5e6ad2

AA 4.7:1

Line

#25282b

AAA 14.82:1

Semantic states

error#bd0000success#008a00warning#eb6100info#055160

4 semantic roles found.

8 colors mined from the live renderexpand

Type — the ladder, in the real face

7 roles · rendered live in the real Inter (captured woff2) · lines are editable, click any spec to copy

display xl

display-xl126px · 800

display md

display-md32px · 700 · ×3.94

headline

headline23.9994px · 400 · ×1.33

body

body12px · 400 · ×2.00

caption

caption20px · 700 · ×0.60

button

button24px · 700 · ×0.83

mono

mono12px · 400 · ×2.00

Motion — easings, transitions & live keyframes

1 easing curve · 20 keyframes · hover a tile to preview

Easing & transitions

transition-5ease-in-out

20 keyframe animations extracted

fade-in

fade-in-top

fade-in-left

shimmer

slideInUp

marquee

fadeOut

fadeIn

scaleInfont

scaleOutfont

fadeIntop

fadeOuttop

Spacing & radius, made spatial

9 spacing steps · 7 radii · bars are exact px widths

Spacing scale

xxs · 2px

xs · 8px

sm · 16px

md · 24px

base · 32px

lg · 43px

xl · 48px

2xl · 56px

3xl · 64px

Radius

none
0px

xs
4px

sm
6px

md
12px

lg
24px

xl
32px

full
9999px

Components — the closed vocabulary

18 component families · 82 variants counted on the live DOM

Component	Variants found
badges	×10
cta Banner	×10
links	×9
price Tag	×9
nav Links	×8
heading H2	×8
buttons	×5
cards	×4
footer Links	×4
tabs	×3
accordion	×3
inputs	×2
heading H4	×2
status Badge	×1
heading H1	×1
heading H3	×1
captions	×1
divider	×1

Component style specs (§4)expand

Buttons

Pill

Background: rgba(0, 0, 0, 0.1)
Text: #ffffff {colors.on-primary}
Padding: 16px
Radius: 60px
Font: 24px weight 700
Use: Status pills, tags, chips
Focus: backgroundColor: rgba(0, 0, 0, 0.086), color: rgb(191, 192, 192), border: 0px none rgb(191, 192, 192)

Ghost

Background: transparent
Text: #25282b {colors.hairline}
Padding: 8px
Radius: 0px
Font: 24px weight 400
Use: Subtle action, toolbar, nav button
Focus: backgroundColor: rgba(0, 0, 0, 0.086), color: rgb(191, 192, 192), border: 0px none rgb(191, 192, 192)

Pill

Background: #e60000 {colors.primary}
Text: #ffffff {colors.on-primary}
Padding: 8px 32px 8px 8px
Radius: 60px
Font: 16px weight 800
Use: Status pills, tags, chips
Focus: backgroundColor: rgba(0, 0, 0, 0.086), color: rgb(191, 192, 192), border: 0px none rgb(191, 192, 192)

Cards & Containers

Standard Card

Background: transparent
Padding: 0px
Radius: 6px
Use: Content containers, listing items

Inputs & Forms

Text Input

Background: transparent
Text: #25282b {colors.hairline}
Padding: 16px 63.9993px
Radius: 6px
Border: 1px solid rgb(126, 126, 126)
Font: 23.9994px weight 400
Use: Text fields, search inputs

Tabs

Ghost Tab

Background: transparent
Text: rgba(255, 255, 255, 0.25) {colors.on-primary}
Padding: 1px 6px
Radius: 0px
Font: 16px weight 400
Use: Navigation tabs, filter tabs

Layout — structure & dimensions

4 layout metrics measured

max Width1200px

header Height192px

sidebar Width0px

container Padding0px

Responsive — real breakpoints

51 media-query stops read from the live CSS

320px

359px

360px

368px

400px

420px

425px

426px

449px

450px

500px

530px

550px

575px

576px

600px

601px

639px

640px

767px

768px

890px

891px

896px

899px

900px

991px

992px

1019px

1020px

1024px

1025px

1050px

1100px

1199px

1200px

1299px

1300px

1320px

1350px

1370px

1399px

1400px

1440px

1499px

1500px

1514px

1538px

1600px

1800px

2000px

Do's & Don'ts

21 enforceable rules pulled verbatim from the spec

Use Body (`#25282b`) for text — not pure black, it's warmer and more readable

Use Vodafone as the primary typeface — it defines the brand personality

Use negative letter-spacing (-1px) at display sizes for compressed, editorial headlines

Use Stats (`#e60000`) as the primary accent — it's the brand's signature interactive color

Use 60px border-radius on primary buttons — the brand uses generously-rounded CTAs

Use 6px border-radius on cards — consistent with the grid card corners

Style form inputs with a `1px solid rgb(126, 126, 126)` border — use border-based inputs, not floating labels or underline-only

Maintain nav height at 73.9688px — consistent vertical space for the navigation bar

Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar

Use a single primary CTA in the hero — the design intentionally avoids choice paralysis

Each card includes a top image — imagery is part of the card identity, not optional

Use a 3-column grid on desktop — density matters for this content type

Don't

Don't use pure black (`#000000`) for text — the near-black adds warmth

Don't substitute with generic sans-serif or serif — the custom font carries the brand

Don't increase letter-spacing on headings — the type is designed to run tight at scale

Don't introduce additional saturated accent colors — the palette is intentionally controlled

Don't use sharp-cornered or pill buttons — 60px is the CTA border-radius standard

Don't remove the input border — the border is the primary affordance indicator for form fields

Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence

Don't make the nav sticky — this design lets it scroll away to maximize content focus

Don't put a CTA button in the nav — this design uses links only at the top

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the vodafone.com design system. Canvas #ffffff · ink #25282b · accent #5e6ad2. Type: Vodafone — respect the size/weight ladder in §3. Radius, spacing, shadow: use only the extracted scales (no magic numbers). Full spec follows — paste the DESIGN.md below into your agent.

Every value above was getComputedStyle-verified.

$ npx prismd add vodafone

DESIGN.md · narrative spec tokens.json

A · Instrument B · Press