telecom · corporate · light · red · editorial · broadcast · institutional · photographic
Vodafone
Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design.
By webdesignhot · www.vodafone.com
$ npx design-md add vodafone
Learn more about the CLI → Compare to…
Adidas Pure-black sport-utility, AdihausDIN/adidasFG uppercase, three-stripe geometry — the engineering canon for global sportswear. Adobe Creative-suite chrome — paper-white canvas, magenta-to-orange wordmark gradient, and Adobe Clean carrying every product grid. AgentKit Three swappable themes for AI agent products — editorial dark, daylight bright, fintech cool-blue. Airbnb Pure-white marketplace canvas with one Rausch coral and Cereal — generous photography, soft pills, modest type. Airtable White-canvas editorial workflow software with full-bleed coral and forest signature cards punctuating a near-black pill-CTA system. Alibaba Electric orange `#ff6a00` + dense merchant grids — the global B2B wholesale floor as a website. Amazon Smile-orange CTA, Amazon Ember sans, dense product grids — the canonical everything-store interface. Amazon Web Services Squid-ink navy with Smile-orange CTAs — the densest tile-portal on the cloud-platform internet. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. Apple White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent system. Apple Music Pink-red gradient hero with album-grid kinesthetics — SF Pro precision, signature `#fa233b` brand pink, glassy dark canvas. Apple TV+ Pure-black cinematic theatre with SF Pro and ruthless minimalism — content as the only voice. Arc Browser-as-personality marketing — buttery cream canvas, Marlin Soft display, hand-tooled blue-and-coral palette. Are.na Bare grey-and-orange minimalism — a single Helvetica-class sans, hairline borders, and a stubborn refusal to optimise for engagement. Asana Approachable work management in soft purple — Asana Sans at modest weights with a rainbow accent palette and warm sky-tinted whitespace. Astro Cosmos navy canvas with violet-to-orange brand gradient — Mona Sans display, Inter body, Astro''s star-chart MPA framework dressed as an observatory dashboard. ASUS Republic of Gamers red `#cd0000` on black with bold sans — Taiwan engineering meets esports brutalism. Audi Vorsprung durch Technik on near-black — Audi Type sans, four-rings precision, and a near-monochrome canvas with `#bb0a30` reserved for sport. Auth0 Twilight-blue dark canvas with TWK Lausanne 300 display + Aeonik body — the original identity-platform aesthetic. Axiom Deep-navy observability with a cyan electric accent — Inter for body, JetBrains Mono for every event label, and a structural grid that reads as logs at planet scale. Axios Smart-brevity in chromatic form — blocky white canvas, Tiempos-flavored Atiza serif, signature `Why it matters:` time-bars and bullet-first prose. Base Coinbase-adjacent L2 minimalism — coinbaseSans on white, signature electric blue Baseten White canvas with Inter and a signature `#6c5ce7` purple — ML model deployment dressed in approachable workshop chrome. BBC News Signature BBC red (`#bb1919`), Reith Sans + Reith Serif, the global broadcaster authority typography of the world''s public-service news. Bear Off-white canvas, a custom bearsans display, a red bear icon, and tealish handwritten underlines — a Markdown notes app dressed as a Mac Pro magazine. beehiiv Aggressive black-on-yellow newsletter punch — heavy display sans, hyper-flat cards, and a `#ffd60a` highway-yellow that reads like a tabloid front page. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. Bloomberg Iconic black-orange financial broadsheet — BWHaasHead headlines, AvenirNextPForBBG chrome, terminal-grade data density. Bluesky Sky-blue `#0085ff` on bright white with Inter sans — the AT-Protocol social network rendered as airy, federated, open. Blur Pure-black canvas, neon `#ff8700` orange voltage, and JetBrains-Mono-default everywhere — brutalist NFT trader terminal as competitive instrument. BMW Corporate-blue calm — BMW Type Next on a cream-tinted white, dark navy hero bands, and the M-stripe triplet in reserve. BMW M Performance black on M-blue/M-violet/M-red — the motorsport variant that turns BMW corporate into track-day theatre. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. Bose Pure black canvas, Helvetica restraint, and premium-audio confidence — sound presented as engineering art. Brex Cool grey-blue surfaces, magenta-to-purple-to-indigo gradient, Söhne 600 — fintech as fast, modern, slightly flashy. Bugatti French-engineered austerity — pure black canvas, three Bugatti typefaces, and full-bleed photography as the only voltage. Bun Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as a 1970s bakery sign. Cal.com Open-source calendly with one bold custom font — Cal Sans on a soft `#f4f4f4` paper canvas. Calm Signature `#0066ff` deep blue + Aktiv Grotesk + meditation-deep cool atmospheric calm. Capacities Cream-yellow canvas, Inter at 700 with a Crimson Pro serif fallback, and a yellow underline as page ornament — a PKM that thinks like a sketchbook. Cartesia Bright clinical white with a single deep-blue action — voice-AI presented as scientific instrument rather than consumer product. Cash App Electric `#00d54b` green on near-black, Cash Sans monospace-flavoured geometry, and p2p-money youth aesthetic. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. Cloudinary Media-API technical infrastructure in confident blue — Inter at modest weights with a deep navy-blue brand and a single chromatic accent for media moments. Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Discord Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. ElevenLabs Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand. Epic Games Pure-black canvas with custom Brutal Type / Heading Now display — Fortnite-saturated marketing meets PC-storefront merchandising. Ethereum Off-white canvas, ethereum-blue `#1c64f2` voltage, and Inter + serif duet — community-owned protocol as open documentation. Etsy Burnt-orange CTA, Graphik humanist sans, handcrafted-warmth aesthetic — the marketplace for makers and small batch. Excalidraw Literal hand-drawn whiteboard — wobbly SVG strokes, Virgil-style handwriting, and a deliberately primitive UI that turns digital sketching into nostalgia. Expedia Navy commerce + Mango yellow voltage — Expedia Sans, dense travel-funnel density with One Key loyalty colour-coding. Fantastical White paper, Effra geometric sans, full-round blue pills, and a rainbow of app-icon glass squares — a calendar app marketed like Apple''s Pro Apps. Ferrari Cinematic editorial in near-black — Rosso Corsa restraint, FerrariSans 500, and full-bleed cavallino photography. Figma Bright multi-color section bands with figmaSans display and figmaMono eyebrows — a marketing site that designs in scenes. Financial Times Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, paired with Financier display + MetricWeb sans for global markets coverage. Fireworks AI Light canvas with Inter sans and a signature `#6720ff` purple-amber-orange spark — fast-inference platform dressed in speed-of-light kinetic chrome. Fly.io Mackinac display + Fragment Mono on a violet-saturated canvas — a PaaS that dresses like a small-press magazine. Ford American-truck heritage in corporate blue — Antenna sans, oval-script wordmark, and a deep `#003478` voltage that has carried the brand since 1927. Framer Black-on-white maximalism with electric gradient floods — Inter Display at heroic sizes, motion as a first-class material. Frontegg PP Neue Machina display + Neue Montreal body — plug-and-play user-management with deep-blue gravitas. Gemini (Google) Blue-into-violet gradient, Google Sans, soft Material 3 surfaces — Google''s house style applied to a chat interface. Ghost Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surface, and a single confident green for action. GitHub Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accent, near-black ground. GitHub Copilot Pure-white canvas, pure-black inverted CTAs, Mona Sans display — GitHub's editorial confidence applied to AI tooling. Grafana Dark observability canvas with the iconic `#f46800` orange — Inter for body, Roboto Mono everywhere a label hides, multi-colour chart palette ripped straight from a real dashboard. Granola White paper, a custom Quadrant book serif, and an olive-green CTA — an AI notepad that dresses like a stationery shop. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. HashiCorp Black canvas hosting a per-product color portfolio — Terraform purple, Vault yellow, Consul red, Waypoint cyan — multi-product identity made literal. Hashnode Developer publishing platform — deep navy canvas, electric blue brand, Inter sans + JetBrains Mono code chrome. HBO Max Deep purple-black premium streaming canvas with custom Sharp Grotesk and the unmistakable Max wordmark. Headspace Signature `#ffac1d` orange + custom round display + meditation-friendly playful warmth. Height AI-PM workspace dressed in chalk pastels — Inter at modest weights over a near-paper canvas, with a single confident accent and an AI-purple voltage moment. Honda Reliability-first restraint — HondaGlobalFont on white, signature red HP Cyan-blue `#0096d6` HP-circle on white with Forma DJR — the 84-year-old technology brand''s mainstream face. Hugging Face AI community canvas — deep blue-black ground, Source Sans Pro headlines, pill auth + 8px tile cards. Hulu Near-black canvas anchored on Hulu Green `#1ce783` with Graphik sans — the bright, cable-meets-streaming UI. IBM Carbon Design System made literal — pure-white canvas, IBM Plex Sans at light 300, square corners, and one assertive `#0f62fe` blue. Ideogram A bright white canvas with a single saturated violet cue — a typography-first AI image tool that lets the gallery do all the talking. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green Kagi A premium search engine dressed in warm cream and Plex — the indie answer to ad-funded search. KAYAK Burnt-orange flight-search density — Open Sans on white, comparison-engine maximalism, price-graph data viz. Khan Academy Signature `#14bf96` mint green on white with Lato sans — free-for-everyone education in a warm, encouraging register. Kinde White canvas with Inter 72/500 display + dev-friendly pink-coral accent — the approachable auth-billing-access platform. Kit A cream newsletter canvas with a custom KitSans display, a Libre Franklin secondary, and a pastel-rainbow chip set — the editorial register reborn from ConvertKit. Kraken Kraken Purple `#7132f5` on white — Kraken-Brand display + Kraken-Product UI for a calmer, less-bombastic crypto exchange. Krea A pure-black studio with Suisse Intl set quietly at 60px — a creative-AI gallery that lets the work and the cobalt CTA carry the colour. Lamborghini Cathedral of darkness — true black canvas, Lamborghini Gold accents, and LamboType angled-terminal display. LangChain Deep navy canvas with Inter precision and a quietly confident teal accent — agent orchestration dressed as engineering documentation. Linear Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pill CTAs. LiveKit Realtime audio-video infra — Public Sans 300 weight on near-black, signature cyan LlamaIndex White canvas with Inter and a signature `#1b9aff` blue — RAG infrastructure dressed as a clean technical reference card. Logitech Soft consumer-tech blue gradients with Brown sans — design for the way you work, play, and create. Lovable Pink-into-violet gradient on white — vibe-coding dressed in playful, friendly chromatics. Magic Eden Mint-cream canvas, magenta-mint accent duet, and a custom Foundry display — Solana-native marketplace as boutique gallery. Mailchimp Cavendish-yellow chunkiness — a custom display serif (Cooper Light), the signature `#ffe01b` block, and a brand voice that hugs you while it ships campaigns. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. Mercedes-Benz Three-pointed-star authority — MBCorpo on near-black canvas, silver-blue Mercury A near-pure white canvas with a literary serif headline and a signature mercury-mint accent — banking dressed as a quiet magazine. Meta Optimistic blue (#0467df) on a white corporate canvas — Optimistic Display headlines, generous space, social-platform conglomerate at rest. Microsoft Fluent surfaces — off-white canvas, Segoe UI Variable Display, and a Cortana-blue action color carrying every product. Midjourney A deep cosmic canvas where JetBrains Mono headlines float over a wide-gamut OKLCH rainbow — a research lab dressed as a chapel. MiniMax Stark monochrome canvas broken open by vibrant gradient product cards — coral, magenta, blue, purple as model identity. Mintlify Documentation-platform marketing — pure white canvas, mint-green accent, Inter at tight tracking, near-black pill CTAs. Miro Canary-yellow Mistral Butter-yellow canvas, Arial as a deliberate anti-tech statement, and zero-radius rectangles — French AI as a brutalist art-school manifesto. Modal Serverless GPU infra in lime-green — `#0c0c0c` canvas, electric `#7fee64` accent, custom Modal Mono on every chip and code block. Monday.com Project management in confident red-pink — Poppins display at bold weights with a colorful saturated palette and a playfully energetic visual rhythm. MongoDB Signature MongoDB green Motion AI-calendar productivity in green-and-purple — Inter at modest weights with a green-to-purple voltage gradient signaling the AI scheduler, anchored by a clean white canvas. MSI Dragon-red `#ff0000` on jet black with bold display sans — the Taipei dragon-heritage gaming hardware brand. Mux Video API for developers — Aeonik on light-cream, Rotonto display, JetBrainsMono CTAs, sharp 0px corners. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. Nuxt Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos. NVIDIA Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. OpenAI Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the only action that matters — try ChatGPT. OpenRouter Pure-black canvas with custom display typography and pragmatic mono — LLM-router infrastructure dressed as a terminal billing dashboard. OpenSea Pure-black canvas, electric `#2081e2` blue, and Inter at trader-pro density — the original NFT marketplace as financial terminal. Optimism Pure-white canvas, signature `#ff0420` red voltage, and Inter at confident L2 register — Ethereum rollup as bold optimistic infrastructure. Ory White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Plaid Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SoundCloud Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. Starbucks Forest-green storefront — SoDoSans, full-pill buttons, warm-cream canvas, and a floating Frap CTA the brand calls home. Steam Deep blue-gray `#1b2838` with Motiva Sans — the utilitarian PC-gaming library that runs the world's largest digital storefront. SteelSeries Esports orange `#ff6900` on near-black with Inter — Danish precision peripherals for competitive play. Strava Signature `#fc4c02` orange + Inter on white — endurance-athlete data-driven storefront with map-overlay heritage. Stripe Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, signature `#533afd` purple CTAs. Stytch Paper-cream canvas with Booton display + Chivo Mono body — passwordless-modern auth, joined Twilio. Substack Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff6719` orange CTAs. Suno A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas. Sunsama Thoughtful daily planning in warm cream and ink — Inter at modest weights over a paper-cream canvas with sage and rose accents and a calm, unhurried voice. Supabase Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type discipline. Superhuman White paper canvas, a custom Super Sans variable, and a single confident lavender — premium email dressed as a stationery brand. Supreme Box-logo red, Courier monospace, skate-deadpan minimalism — the most influential streetwear store on the web. Svelte Hot orange #ff3e00 against clean white with a confident sans — the framework that wears its flame as a wordmark. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Venmo A single confident `#3d95ce` blue, Aktiv Grotesk geometry, and a social-feed informality — payments dressed as group chat. Vercel Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white type, Geist sans + mono, conic-gradient accents. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. Warp Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell. Weaviate White canvas with Inter and a signature `#1cdb46` open-source green — modular vector database dressed in approachable engineering chrome. webdesignhot AI-era editorial dark — pure black with one acid-lime accent. Webflow Indigo-to-purple gradient discipline with a precise structural sans — the visual builder that markets itself like a design conference. WHOOP Lime `#a0d10b` voltage on jet-black, Inter precision, recovery-data athlete-grade aesthetic. WIRED Newsstand-density editorial grid, sharp-corner buttons, mono ALL-CAPS kickers — Conde Nast meets engineering lab. Wise A flexible bright-lime green on cream-white — money that travels in sans-serif and a single confident accent. Workday HR-warm professional in tangerine — Adelle Sans humanist curves, signature `#f37721` orange, and a calm white people-first canvas. WorkOS Pure-white canvas with Untitled Sans 80/500 display + indigo-violet h2 — the B2B-enterprise gravitas aesthetic. X Pure-black canvas with Chirp display — algorithmic minimalism, single-letter wordmark, ruthless type discipline. Y Combinator Brutalist orange monolith — system-font sans on white canvas, signature `#f26625` orange-red blocks with hard 0px corners. You.com Crisp white developer-doc canvas, custom Lumen Sans, and the indigo `#5368EE` accent — a search API rebrand done as enterprise infrastructure. YouTube YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
1440 × 900
mobile · 390 × 844
Tokens design.md/v1.5
- bg
#ffffff - bg-page
#ffffff - surface
#ffffff - surface-soft
#f2f2f2 - surface-strong
#eeeeee - surface-dark
#25282b - surface-translucent
rgba(255,255,255,0.1) - brand AA · 4.8
#e60000 - brand-deep
#ac1811 - brand-dim
#cc0000 - brand-band
#e60000 - text AAA · 14.8
#25282b - text-strong
#25282b - text-muted
#7e7e7e - text-form
#333333 - text-soft
#bebebe - text-on-dark
#ffffff - text-on-brand
#ffffff - link
#3860be - link-visited
#5e2a8c - link-hover
#3860be - border — · 1.6
#cccccc - border-soft
#e8e8e8 - border-strong AAA · 12.6
#333333 - border-on-dark
rgba(255,255,255,0.25) - border-pill-red
#e60000 - scrim
rgba(37,40,43,0.5) - shadow-card
rgba(0,0,0,0.06) - shadow-elev
rgba(0,0,0,0.12) - on-brand
#ffffff - success
#067f5b - warning
#a35316 - danger
#e60000 - info
#3860be
Ship faster than ever.
display-hero-xl "Vodafone" 144px w800 -1px
Ship faster than ever.
display-hero-lg "Vodafone" 126px w800 -1px
Ship faster than ever.
display-hero-md "Vodafone" 90px w800 0
Ship faster than ever.
display-impact "Vodafone" 70px w800 -1px
Ship faster than ever.
h1-light "Vodafone" 48px w300 0
Ship faster than ever.
h1-bold "Vodafone" 48px w800 -1px
Built for teams that ship.
h2-light "Vodafone" 40px w300 0
Built for teams that ship.
h2-bold "Vodafone" 40px w700 0
A complete kit
h3-bold "Vodafone" 32px w700 0
The quick brown fox jumps over the lazy dog.
h4-bold "Vodafone" 24px w700 0
The quick brown fox jumps over the lazy dog.
h4-light "Vodafone" 24px w300 0
The quick brown fox jumps over the lazy dog.
h5-bold "Vodafone" 20px w700 0
The platform your team will actually use — design, code, deploy.
lead-body "Vodafone" 20px w400 0
The quick brown fox jumps over the lazy dog.
body-lg "Vodafone" 18px w400 0
The quick brown fox jumps over the lazy dog.
body-bold "Vodafone" 18px w600 0
The quick brown fox jumps over the lazy dog.
body-md "Vodafone" 16px w400 0
OUR DESIGN SYSTEM
label-uppercase "Vodafone" 16px w800 0
The quick brown fox jumps over the lazy dog.
button-primary "Vodafone" 14.4px w700 0.144px
The quick brown fox jumps over the lazy dog.
eyebrow "Vodafone" 14px w700 0
The quick brown fox jumps over the lazy dog.
tag-pill "Vodafone" 14px w700 0
OUR DESIGN SYSTEM
caption-uppercase "Vodafone" 14px w400 0
OUR DESIGN SYSTEM
caption "Vodafone" 12px w500 0
The quick brown fox jumps over the lazy dog.
micro "Vodafone" 12px w600 0
The quick brown fox jumps over the lazy dog.
button-compact "Vodafone" 12px w700 0.12px
- step-0 2px
- step-1 4px
- step-2 8px
- step-3 12px
- step-4 16px
- step-5 20px
- step-6 24px
- step-7 32px
- step-8 38px
- step-9 48px
- step-10 64px
- step-11 80px
- step-12 96px
- step-13 128px
- micro
1px - sm
2px - md
6px - lg
24px - xl
32px - pill
60px - circle
9999px
Text link →
Card preview
A complete kit — everything your product needs.
Hero, pricing, FAQ, dashboard, docs — every layout your product needs.
New
Stable
v1.0
Export
4 formats · paste-ready
Tailwind
theme.extend block for tailwind.config.js
CSS variables
:root { --bg, --text, --brand, … } you can paste anywhere
DTCG JSON
W3C Design Tokens Community Group format
Figma Variables
Importable into Figma → Variables → Import
---
name: Vodafone
tagline: Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design.
author: webdesignhot
source_url: https://www.vodafone.com
spec: design.md/v1.5
quality: curated
featured: false
categories: [media]
tags: [telecom, corporate, light, red, editorial, broadcast, institutional, photographic]
preview_swatch: ['#ffffff', '#e60000', '#25282b']
related: [ibm, ft, theatlantic]
description: 'Vodafone''s corporate web system carries the confident, broadcast-scale presence of a global telecom brand built around a single fiercely-owned brand red (`#e60000`) and a restrained editorial layout. Every page opens the same way: a cinematic dark hero photograph behind a towering, tight-tracked uppercase display headline at 90–144px in 800 weight, followed by a deep red full-width chapter-divider band, then a crisp white editorial grid or a near-black charcoal (`#25282b`) section reserved for institutional content (share ticker, global-impact map, ESG data). The voice is institutional but human: documentary photography of cable-laying crews, coral reefs, and urban twilight against clean neutral surfaces. Type runs the proprietary Vodafone face up to 144/800 with -1px tracking, paired with calm 16-18px body copy — the dual scale creates a "corporate newsroom" feeling where every page reads like the front of a national paper whose masthead happens to be red. Two-tier button system: tight 2px-radius rectangles for utility actions, fully-pill 60px buttons for editorial CTAs.'
colors:
bg: '#ffffff' # canvas white — the dominant editorial surface
bg-page: '#ffffff' # same
surface: '#ffffff'
surface-soft: '#f2f2f2' # light neutral pill-badge background
surface-strong: '#eeeeee' # rare divider band
surface-dark: '#25282b' # charcoal institutional panel — footer, share ticker, world map
surface-translucent: 'rgba(255,255,255,0.1)' # glass pill on dark hero imagery
brand: '#e60000' # Vodafone Red — the single non-negotiable signature
brand-deep: '#ac1811' # darker red for low-prominence tag chips
brand-dim: '#cc0000' # rare hover/pressed variant
brand-band: '#e60000' # full-width red chapter-divider band — same hex
text: '#25282b' # charcoal headline — near-black with faint cool tint
text-strong: '#25282b' # same — there is no deeper text colour
text-muted: '#7e7e7e' # secondary body grey — meta and labels
text-form: '#333333' # form-input text and ghost-button outline
text-soft: '#bebebe' # disabled grey — inactive chip text
text-on-dark: '#ffffff' # white reverse on charcoal panels and red bands
text-on-brand: '#ffffff' # white on Vodafone Red CTAs
link: '#3860be' # signal blue — inline links at rest
link-visited: '#5e2a8c' # rare visited state
link-hover: '#3860be' # link hover stays signal blue with underline thickening
border: '#cccccc' # default 1px hairline
border-soft: '#e8e8e8' # editorial dividers
border-strong: '#333333' # form-input outline
border-on-dark: 'rgba(255,255,255,0.25)' # hairline column dividers on charcoal panels
border-pill-red: '#e60000' # red 1px outline on tag pills
scrim: 'rgba(37,40,43,0.5)' # modal backdrop using charcoal
shadow-card: 'rgba(0,0,0,0.06)' # rare; system is mostly flat
shadow-elev: 'rgba(0,0,0,0.12)' # rare elevation
on-brand: '#ffffff'
success: '#067f5b' # rare success green
warning: '#a35316' # rare warning amber-brown
danger: '#e60000' # error uses brand red
info: '#3860be' # info shares signal blue
typography:
display:
family: '"Vodafone", "Helvetica Neue", Arial, sans-serif'
weights: [300, 400, 600, 700, 800]
opentype-features: []
body:
family: '"Vodafone", "Helvetica Neue", Arial, sans-serif'
weights: [300, 400, 500, 600, 700, 800]
mono:
family: '"icomoon", "SF Mono", Menlo, monospace'
weights: [400]
scale:
display-hero-xl: { size: 144, weight: 800, lineHeight: 0.79, tracking: '-1px', family: display, transform: uppercase }
display-hero-lg: { size: 126, weight: 800, lineHeight: 0.90, tracking: '-1px', family: display, transform: uppercase }
display-hero-md: { size: 90, weight: 800, lineHeight: 0.93, tracking: '0', family: display, transform: uppercase }
display-impact: { size: 70, weight: 800, lineHeight: 1.17, tracking: '-1px', family: display, transform: uppercase }
h1-light: { size: 48, weight: 300, lineHeight: 1.08, tracking: '0', family: display }
h1-bold: { size: 48, weight: 800, lineHeight: 1.0, tracking: '-1px', family: display }
h2-light: { size: 40, weight: 300, lineHeight: 1.10, tracking: '0', family: display }
h2-bold: { size: 40, weight: 700, lineHeight: 1.10, tracking: '0', family: display }
h3-bold: { size: 32, weight: 700, lineHeight: 1.25, tracking: '0', family: display }
h4-bold: { size: 24, weight: 700, lineHeight: 1.0, tracking: '0', family: display }
h4-light: { size: 24, weight: 300, lineHeight: 1.42, tracking: '0', family: display }
h5-bold: { size: 20, weight: 700, lineHeight: 1.30, tracking: '0', family: display }
lead-body: { size: 20, weight: 400, lineHeight: 1.40, tracking: '0', family: body }
body-lg: { size: 18, weight: 400, lineHeight: 1.56, tracking: '0', family: body }
body-bold: { size: 18, weight: 600, lineHeight: 1.56, tracking: '0', family: body }
body-md: { size: 16, weight: 400, lineHeight: 1.38, tracking: '0', family: body }
label-uppercase: { size: 16, weight: 800, lineHeight: 1.50, tracking: '0', family: body, transform: uppercase }
eyebrow: { size: 14, weight: 700, lineHeight: 1.43, tracking: '0', family: body }
tag-pill: { size: 14, weight: 700, lineHeight: 1.50, tracking: '0', family: body }
caption-uppercase: { size: 14, weight: 400, lineHeight: 1.14, tracking: '0', family: body, transform: uppercase }
caption: { size: 12, weight: 500, lineHeight: 2.0, tracking: '0', family: body }
micro: { size: 12, weight: 600, lineHeight: 1.33, tracking: '0', family: body, transform: uppercase }
button-primary: { size: 14.4, weight: 700, lineHeight: 1.0, tracking: '0.144px', family: body }
button-compact: { size: 12, weight: 700, lineHeight: 1.0, tracking: '0.12px', family: body }
radius:
micro: 1
sm: 2 # tight rectangle button corners — utility/form CTA signature
md: 6 # news cards, images, input fields
lg: 24 # glass pill on dark hero
xl: 32 # filled neutral pill badges
pill: 60 # primary red content CTA — the brand's editorial button look
circle: 9999 # icon buttons, portraits
spacing:
base: 8
scale: [2, 4, 8, 12, 16, 20, 24, 32, 38, 48, 64, 80, 96, 128]
layout:
page-width: 1440
prose-width: 720
header-height: 64
red-band-height: 64
card-gutter: 24
section-vertical: 96
components:
button-red-rect:
bg: '#e60000'
color: '#ffffff'
radius: 2
padding: '12px 10px'
border: '1px solid #e60000'
height: 44
font: button-primary
use: 'Utility / form CTA — Accept All Cookies, Subscribe. Sharp 2px corners.'
button-red-pill:
bg: '#e60000'
color: '#ffffff'
radius: 60
padding: '16px 16px'
border: 'none'
height: 56
font: button-primary
use: 'Editorial / content CTA — Explore connecting people, ESG approach. Fully pill-shaped.'
button-ghost-rect:
bg: '#ffffff'
color: '#333333'
radius: 2
padding: '12px 10px'
border: '1px solid #333333'
height: 44
font: button-primary
use: 'Secondary form action — paired with red rectangle.'
button-glass-pill:
bg: 'rgba(255,255,255,0.1)'
color: '#ffffff'
radius: 24
padding: '8px 16px'
border: 'none'
height: 40
font: button-primary
use: 'Glass pill on dark hero photography — secondary content CTA.'
button-ghost-pill:
bg: 'rgba(0,0,0,0.05)'
color: '#e60000'
radius: 60
padding: '15px 15px'
border: 'none'
height: 56
font: button-primary
use: 'Inline editorial card CTA — low-emphasis red-text pill.'
button-icon-circle:
bg: '#ffffff'
color: '#25282b'
radius: 9999
width: 40
height: 40
border: '1px solid #ffffff'
use: 'Carousel arrows, video play/pause, close. White circle.'
card-news:
bg: '#ffffff'
color: '#25282b'
radius: 6
padding: '0 16px 16px 16px'
border: 'none'
use: 'Editorial article tile — 16:9 image on top, eyebrow + tag pill, H4 title.'
card-asymmetric:
bg: '#ffffff'
color: '#25282b'
radius: '0px 6px 0px 0px'
padding: '0 16px 16px 16px'
use: 'Featured homepage card — single-corner-rounded shape echoing the speech-mark logo.'
card-portrait:
bg: '#ffffff'
color: '#25282b'
radius: 9999
use: 'Circular portrait / pictogram container — ESG executive headshots.'
text-input:
bg: '#ffffff'
color: '#333333'
radius: 2
padding: '12px 10px'
border: '1px solid #333333'
height: 44
use: 'Form input — sharp 2px corners matching button system.'
red-band:
bg: '#e60000'
color: '#ffffff'
radius: 0
height: 64
use: 'Full-width chapter divider — runs horizontally between hero and body. No text, no controls.'
share-ticker:
bg: '#25282b'
color: '#ffffff'
radius: 0
padding: '32px 48px'
use: 'Investor share-price panel — large 48/800 numeric display, 14/400 grey meta.'
impact-map:
bg: '#25282b'
color: '#ffffff'
radius: 0
use: 'Sustainability section world map — dark grey illustration, red markers, vertically-rotated IMPACT wordmark.'
nav-bar:
bg: 'transparent'
color: '#ffffff'
height: 64
padding: '0 32px'
use: 'Top nav — transparent over hero, solid white on scroll/interior pages.'
nav-bar-solid:
bg: '#ffffff'
color: '#25282b'
height: 64
border: '1px solid #e8e8e8'
use: 'Solid white variant on interior pages and scroll-past-hero.'
tag-pill-red:
bg: 'rgba(255,255,255,0.8)'
color: 'rgba(0,0,0,0.8)'
radius: 2
padding: '6px 6px'
border: '1px solid #e60000'
font: micro
use: 'Outlined red pill — uppercase article-card meta tag.'
tag-pill-neutral:
bg: '#f2f2f2'
color: '#25282b'
radius: 32
padding: '4px 12px'
font: tag-pill
use: 'Filled neutral pill — quieter tags.'
footer:
bg: '#25282b'
color: '#ffffff'
radius: 0
padding: '64px 32px'
use: 'Charcoal universal footer — 4-column link grid, social row, legal line.'
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
duration-fast: 120
duration-standard: 200
duration-slow: 300
button-press: 'opacity drops to 0.9 on :active over 120ms'
red-hover: 'red rectangle/pill button: bg darkens via 5% opacity overlay over 200ms'
link-hover: 'inline link: underline thickens 1px → 2px over 150ms; colour holds at signal blue'
card-hover: 'editorial card: image zooms 1.0 → 1.03 inside 6px-radius clip over 200ms; card itself does not lift'
page-transition: 'instant route changes — no fade between pages on this institutional site'
reduced-motion: 'respects prefers-reduced-motion: reduce — image zoom suppressed, opacity transitions preserved at 100ms'
breakpoints:
mobile: 600
mobile-large: 767
tablet: 1023
laptop: 1199
desktop: 1439
wide: 1440
shadows:
ambient: 'none — system is intentionally flat'
hover-card: 'none — cards rely on spacing, not lift'
modal: 'rgba(37,40,43,0.12) 0 8px 24px'
ring: 'inset 0 0 0 2px #e60000'
philosophy: 'Vodafone treats drop shadows as a distraction from brand clarity. Elevation is communicated by surface-colour shift (white editorial canvas → charcoal institutional panel) rather than by lift-off shadow.'
accessibility:
contrast-text-on-bg: 12.4 # #25282b on #ffffff — AAA
contrast-text-on-brand: 5.1 # #ffffff on #e60000 — AA at body, AAA at large
contrast-text-on-dark: 12.6 # #ffffff on #25282b — AAA
contrast-link-on-bg: 5.4 # #3860be on #ffffff — AA at body, AAA at large
contrast-mute-on-bg: 4.5 # #7e7e7e on #ffffff — AA at body sizes minimum
focus-ring: 'inset 0 0 0 2px #e60000 — Vodafone red focus ring on inputs and buttons'
reduced-motion-honored: true
touch-target-min: 44
keyboard-nav: 'Tab cycles top utility bar → main nav → masthead search → primary CTA → red band → article grid → footer columns. Skip-link present at very top.'
aria-patterns: 'institutional panels (share ticker, world map) use role="region" with aria-label; red-band dividers are decorative aria-hidden="true".'
dark-mode: null # Light-only — Vodafone has no dark mode variant. The charcoal panels are surface contrast within the light theme, not a separate mode.
---
## 1. Visual Theme & Atmosphere
Vodafone's corporate web system carries the confident, broadcast-scale presence of a global telecom brand built around a single fiercely-owned brand red. The pages don't whisper — they declare, the way the front of a national newspaper declares headlines to a commuter platform. Every page template (homepage, investor relations, sustainable business, our purpose) opens the same way: a cinematic dark hero photograph behind a towering uppercase display headline ("EVERYONE. CONNECTED.", "INVESTORS", "OUR BUSINESS") followed by a deep red full-width band that acts as a chapter break, then a crisp white editorial grid or a near-black charcoal section reserved for institutional content like share-price tickers and global-impact maps.
The voice is institutional but human. Documentary photography — cable-laying crews on a moonlit beach, coral reefs threaded with subsea fibre, pine forests, urban twilight, indigenous communities operating connectivity hubs — is colour-graded with realism rather than glossed up. The imagery sits against clean neutral surfaces (mostly white, occasionally charcoal) that never compete with the content. Where Apple's brand uses photography to seduce and Tesla's uses it to dramatise, Vodafone's photography is documentary: it shows people and infrastructure doing the work of global connectivity.
The typography system is the signature. The proprietary Vodafone display face runs all the way up to **144px in heavy 800-weight uppercase with -1px negative tracking**, and it holds that voice consistently across every page template. Body copy sits in a calm 16–18px mid-weight rhythm. This dual scale — monumental at the top, almost quiet at the bottom — creates the "corporate newsroom" feeling: every page reads like the front of a national paper whose masthead happens to be red.
Surface treatment is disciplined and predictable: a three-surface pass of **white** (editorial canvas) → **Vodafone Red** (band dividers, CTA buttons, the speech-mark logo, the rotated IMPACT mark on the world map) → **near-black charcoal** `#25282b` (footer, share-ticker panel, global-impact map). There is almost no decorative shadow, almost no gradient, almost no rounded-corner softness. Edges are small and clinical (2px and 6px), buttons operate as a two-tier system — tight 2px rectangles for utility/form actions, and fully-rounded 60px pills for editorial content CTAs. This is a design that trusts the brand colour to do the heavy lifting and gets out of its way everywhere else.
**Key Characteristics:**
- Vodafone Red (`#e60000`) is the single dominant accent — CTAs, dividers, band sections, the speech-mark logo, the rotated IMPACT mark
- Monumental uppercase display type up to 144px / weight 800 / -1px tracking paired with calm 16–18px body
- A universal page rhythm: dark atmospheric hero → monumental headline → red band → white editorial → charcoal institutional → charcoal footer
- Two-tier button system: 2px rectangles for utility/form, 60px pills for editorial — both equally primary, context-selected
- Documentary photography (people, infrastructure, cities, nature) over illustration; no stock-icon noise
- Near-absence of shadows and gradients — hierarchy from type weight, colour blocks, and spacing
- Charcoal `#25282b` doubles as footer AND institutional data panel (share ticker, world map) — a single material for anything formal and numeric
- Asymmetric corner cards (`0px 6px 0px 0px`) echo the speech-mark logo's curved geometry
## 2. Color Palette & Roles
### Primary
- **Vodafone Red** (`#e60000`): the brand's single non-negotiable signature. Used for primary CTA backgrounds, the speech-mark logo, full-bleed band dividers between editorial sections, tag-pill outlines, and the rotated brand-mark type that labels the global-impact map. This red must never be substituted, tinted, or paired with another saturated hue.
### Brand & Dark
- **Charcoal Institutional** (`#25282b`): the same near-black used for headline text is reused as a full-width dark surface for the footer, the share-ticker panel, and the global-impact map. It transforms the page into a "data mode" environment — the brand's institutional voice.
- **Deep Brand Red Shade** (`#ac1811`): a darker red used only on quiet label chips (notably on the sustainability page) — for low-prominence tag elements that need red identity without drawing primary attention.
### Accent
- **Signal Blue** (`#3860be`): reserved for inline text links in their resting state (underlined). A calm accessible blue that reads clearly against both white and dark surfaces. The only non-red, non-grey colour in the chrome.
### Surface & Background
- **Canvas White** (`#ffffff`): the dominant editorial canvas — page background, card backgrounds, reversed text on dark or red surfaces, circular icon-button fills.
- **Light Neutral** (`#f2f2f2`): filled neutral pill-badge backgrounds and quiet UI chrome where full white would disappear.
- **Charcoal Institutional Panel** (`#25282b`): footer, share ticker, world map. The "data mode" surface.
- **Translucent White Overlay** (`rgba(255,255,255,0.1)`): glass tint for pill buttons sitting on dark hero imagery — lets the photo breathe through the button.
### Interactive
- **Link** (`#3860be`): default state, signal blue with underline
- **Link Hover**: same colour, underline thickens 1 → 2px
- **Visited** (`#5e2a8c`): rare; mostly suppressed in marketing surfaces
- **Disabled** (`#bebebe`): inactive chip text on subtle ghost-style controls
### Neutral Scale
- **Charcoal Headline** (`#25282b`): all heading text on light surfaces. Near-black with a faint cool tint, never pure black.
- **Secondary Body Grey** (`#7e7e7e`): body copy, meta text, secondary labels — true mid-grey, unemphatic but legible
- **Form Text Grey** (`#333333`): borders on input-style ghost buttons and text inside them
- **Disabled Grey** (`#bebebe`): inactive chip text
- **Translucent White Divider** (`rgba(255,255,255,0.25)`): hairline column dividers on dark institutional panels (footer columns, map legend rows)
### Surface & Borders
- **Border default** (`#cccccc`): standard 1px hairline
- **Border soft** (`#e8e8e8`): editorial dividers between modules
- **Border strong** (`#333333`): form-input outline (warmer than typical)
- **Border on dark** (`rgba(255,255,255,0.25)`): hairline on charcoal panels
- **Border pill red** (`#e60000`): 1px outline on light tag pills, letting the brand colour touch small UI without drowning card content
### Shadow Colors
Vodafone is intentionally near-flat. The few shadow tokens are reserved for inset focus rings and the rare modal drop-shadow. No card shadows, no button shadows, no glassmorphism.
### Semantic
- **Success Green** (`#067f5b`): rare — confirmation states only
- **Warning Brown** (`#a35316`): rare — advisory banners
- **Danger** (`#e60000`): error states reuse the brand red
- **Info** (`#3860be`): informational banners reuse signal blue
### Gradient System
Vodafone's design is intentionally gradient-free. The only tonal variation is a subtle photographic vignette on hero imagery (dim coral reefs, pine forests, cable crews, urban twilight), where the image itself — not a CSS gradient — provides the tonal ramp. No linear gradients on buttons, cards, or surfaces.
## 3. Typography Rules
### Font Family
- **Primary**: `Vodafone` — the proprietary corporate sans-serif
- **Fallback chain**: `"Vodafone", "Helvetica Neue", Arial, sans-serif`
- **Icon font**: `icomoon` — pictograph glyphs at 18/24/48px fixed sizes
- **Rendering**: `font-smoothing: antialiased`. OpenType features are not aggressively used — the design relies on weight and tracking, not stylistic alternates.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Transform | Notes |
|------|------|------|--------|-------------|----------------|-----------|-------|
| display-hero-xl | Vodafone | 144 | 800 | 0.79 | -1px | UPPERCASE | "EVERYONE. CONNECTED." flagship |
| display-hero-lg | Vodafone | 126 | 800 | 0.90 | -1px | UPPERCASE | Longer hero headlines |
| display-hero-md | Vodafone | 90 | 800 | 0.93 | 0 | UPPERCASE | Secondary hero or full-bleed section heads |
| display-impact | Vodafone | 70 | 800 | 1.17 | -1px | UPPERCASE | Sustainability numeric / callout scale |
| h1-light | Vodafone | 48 | 300 | 1.08 | 0 | — | Section headlines in light weight for editorial calm |
| h1-bold | Vodafone | 48 | 800 | 1.0 | -1px | — | Institutional data headers (share price on charcoal) |
| h2-light | Vodafone | 40 | 300 | 1.10 | 0 | — | Sub-section headers |
| h2-bold | Vodafone | 40 | 700 | 1.10 | 0 | — | Denser sub-section headers |
| h3-bold | Vodafone | 32 | 700 | 1.25 | 0 | — | Card cluster titles, feature intros |
| h4-bold | Vodafone | 24 | 700 | 1.0 | 0 | — | Card titles (news, feature, article modules) |
| h4-light | Vodafone | 24 | 300 | 1.42 | 0 | — | Intro paragraphs on investor / sustainability pages |
| h5-bold | Vodafone | 20 | 700 | 1.30 | 0 | — | Compact module titles, side callouts |
| lead-body | Vodafone | 20 | 400 | 1.40 | 0 | — | Introductory paragraphs under large headlines |
| body-lg | Vodafone | 18 | 400 | 1.56 | 0 | — | Long-form article body, prominent copy |
| body-bold | Vodafone | 18 | 600 | 1.56 | 0 | — | Emphasised inline phrases |
| body-md | Vodafone | 16 | 400 | 1.38 | 0 | — | Default paragraph |
| label-uppercase | Vodafone | 16 | 800 | 1.50 | 0 | UPPERCASE | Navigational labels |
| eyebrow | Vodafone | 14 | 700 | 1.43 | 0 | — | Article date stamps, meta (14 APR 2026) |
| tag-pill | Vodafone | 14 | 700 | 1.50 | 0 | — | Badge text inside red-outlined pills |
| caption-uppercase | Vodafone | 14 | 400 | 1.14 | 0 | UPPERCASE | Uppercase meta label |
| caption | Vodafone | 12 | 500 | 2.0 | 0 | — | Footer meta, legal lines |
| micro | Vodafone | 12 | 600 | 1.33 | 0 | UPPERCASE | Tiny labels on badges, counters |
| button-primary | Vodafone | 14.4 | 700 | 1.0 | 0.144px | — | Primary filled button label |
| button-compact | Vodafone | 12 | 700 | 1.0 | 0.12px | — | Compact button label |
### Principles
- **Dual-scale drama**: the system stretches from 144px down to 8.5px without mid-range showing off. Monumental for brand moments, calm for reading.
- **Uppercase display, mixed-case body**: largest display sizes are uppercase with negative tracking; everything 48px and below is sentence case with normal tracking.
- **Three-weight discipline**: 800 (display), 700 (bold bodies, buttons, tags), 400 (reading body). A lighter 300 is used for editorial-style 40/48px headlines when a calmer voice is wanted.
- **No italics, no decorative letterspacing on body**: the body system is deliberately neutral so display work can shout.
- **Rotated brand-mark type**: on the sustainability section, the word "IMPACT" is set in brand red at large display size and rotated 90° to run vertically along the edge of a dark world-map panel — a distinctive typographic flourish that labels the institutional data surface.
### Note on Font Substitutes
The Vodafone corporate typeface is proprietary. When recreating in open systems, substitute with **Inter** at weights 400/600/800, or **Neue Haas Grotesk** if available. Inter needs letter-spacing reduced by ~1–2% at display sizes (80px+) to approximate Vodafone's tight tracking; line-height should be set to 0.85–0.95 for the uppercase display tier.
## 4. Component Stylings
Vodafone operates a genuine **two-tier primary button system**. Both tiers are used as primary calls to action — the difference is context (form/chrome vs editorial/content), not hierarchy.
### Buttons
**`button-red-rect`** — Primary Red Rectangle (utility / form CTA)
- Background: Vodafone Red (`#e60000`)
- Text: Pure White, 14.4px, weight 700, letter-spacing 0.144px
- Padding: 12px vertical, 10px horizontal
- Border: 1px solid Vodafone Red (`#e60000`)
- Border radius: 2px — deliberately sharp-cornered
- Default: solid red fill with crisp 2px corners
- Active: brief opacity drop to 0.9 on press
- Use: "Accept All Cookies", "Subscribe", form submission
**`button-red-pill`** — Primary Red Pill (editorial / content CTA)
- Background: Vodafone Red (`#e60000`)
- Text: Pure White, 14.4px, weight 700, letter-spacing 0.144px
- Padding: 16px uniform
- Border radius: 60px — fully pill-shaped
- Default: solid red fill with rounded ends
- Active: opacity 0.9 on press
- Use: "Link to Our approach to ESG", "Explore connecting people"
**`button-ghost-rect`** — Ghost White Rectangle (secondary form action)
- Background: Pure White
- Text: Form Text Grey (`#333333`), 14.4px, weight 700
- Border: 1px solid `#333333`, radius 2px
- Padding: 12px / 10px
**`button-glass-pill`** — Glass Pill (sits on dark hero imagery)
- Background: Pure White at 10% opacity
- Text: Pure White, weight 700
- Padding: 8px / 16px, radius 24px
**`button-ghost-pill`** — Content Ghost Pill (inline within editorial cards)
- Background: Black at 5% opacity (`rgba(0,0,0,0.05)`)
- Text: Vodafone Red, 14.4px / 700
- Padding: 15px uniform, radius 60px
**`button-icon-circle`** — Icon Control Button (video play/pause, carousel arrows, close)
- Background: Pure White
- Icon colour: Charcoal Headline (`#25282b`)
- Border radius: 50%
- Outline: 1px solid white for focus indication
- Size: 32–40px diameter
### Cards & Containers
**`card-news`** — homepage article tile
- Background: Pure White, radius 6px (image corners + container), no shadow
- Layout: 16:9 image on top → 12px gap → eyebrow row (date + tag pill) → 8px gap → H4 Bold title → 16px card padding sides and bottom
- Image: `object-fit: cover`, rounded top corners only
**`card-asymmetric`** — featured homepage card
- Background: Pure White
- Border radius: `0px 6px 0px 0px` — single-corner-rounded shape echoing the speech-mark logo's curved geometry
- No shadow, no border — the asymmetric radius itself is the visual signature
**`card-portrait`** — circular portrait / pictogram
- Background: Pure White, radius 100%
- Used for ESG pictograms and executive portraits inside institutional content
### Inputs & Forms
**`text-input`**
- Background: Pure White
- Text: Form Text Grey (`#333333`), 16/400
- Border: 1px solid `#333333`, radius 2px
- Padding: 12px 10px
- Error state: 1px border shifts to Vodafone Red, error message in 12/600 red
### Navigation
**Top bar**
- Background: transparent over hero imagery; solid white on scroll or interior pages
- Height: 64px desktop, 56px mobile
- Logo: Vodafone speech-mark, 40×40px red circle with white speech-mark cut-out, left-aligned
- Nav links: 16/400 Charcoal Headline on white; reversed to white on dark hero
- Right utility: small icon links (search, locale, menu) at 24px icomoon glyphs
- Interior pages show secondary-nav row: "Vodafone Business / Vodafone Foundation / Our site" right-aligned
**Mobile collapse**
- At ~768px the horizontal nav collapses into a hamburger
- Mobile menu opens as full-width white overlay, 18/400 link rows, 16px vertical padding per row
### Image Treatment
- **Hero**: full-bleed dark atmospheric photography (coral reefs, pine forests, cable crews, urban twilight) with natural vignette or cool-tone colour grade — no CSS overlay needed
- **Card thumbnails**: 16:9 ratio, 6px top corner radius
- **Square editorial**: 1:1 ratio with 6px corner radius
- **Round portraits**: 100% (perfect circle) for executive headshots and ESG pictograms
- **Loading**: lazy-loading on scroll; images stabilise within ~200ms of entering viewport
- **No decorative borders** — card radius does the framing work
### Tag Pills / Badges
**`tag-pill-red`** (used inline on article-card meta, e.g. "EMPOWERING PEOPLE")
- Background: Pure White at 80% opacity
- Text: Near-black at 80% opacity, 12/600 uppercase
- Border: 1px solid Vodafone Red, radius ~2px
**`tag-pill-neutral`** (quieter tags)
- Background: Light Neutral (`#f2f2f2`)
- Text: Charcoal Headline, 14/700
- Padding: 4px 12px, radius 32px (fully pill-shaped)
### Red Divider Band
A signature reusable component on every page template: full-width band of Vodafone Red running horizontally to separate monumental hero from editorial body. Carries no text, no controls — simply is the brand's way of saying "new chapter." Typical height: 40–80px.
### Share Ticker Panel (Investor pages)
- Background: Charcoal `#25282b`
- Large numeric: 48/800 white type with negative tracking (e.g. "116.05 GBX")
- Metadata row: delay notice and timestamp in 14/400 secondary grey
- Layout: horizontal strip above footer, full content width
- Hairline dividers `rgba(255,255,255,0.25)` separate ticker from footer columns
### Global Impact Map Panel (Sustainability pages)
- Background: Charcoal `#25282b`
- Dark minimal world-map illustration in slightly lighter grey
- Red circular markers (`#e60000`) plotted on operational geographies
- Vertically-rotated brand word "IMPACT" set in Vodafone Red at large display size, weight 800, uppercase, 90° rotated, running along one edge — the template's signature typographic move
- Small legend with red markers and white uppercase labels at top-left
### Footer
A universal component:
- Background: Charcoal `#25282b`
- Layout: 4-column link grid (Our company / Investors / Vodafone websites / Share price) followed by "Connect with us" social row and legal/privacy line
- Logo: red speech-mark repeats bottom-right at 32–40px
- Column header: 16/800 uppercase white
- Column link: 14/400 white, stacked vertically with 12px row spacing
- Divider hairlines: `rgba(255,255,255,0.25)` between column group and legal row
## 5. Layout Principles
### Spacing System
Base unit: **8px**. Two values (32px and 38px) appear across every page in the analysis, making them the template's universal rhythm constants.
| Token | Value | Use |
|-------|-------|-----|
| 2xs | 2px | Hairline separators |
| xs | 4px | Icon-to-text gap in tight controls |
| sm | 8px | Base rhythm unit |
| md | 12px | Card internal padding, eyebrow-to-title gap |
| base | 16px | Paragraph rhythm, card padding, pill button padding |
| lg | 20px | Section-internal spacing |
| xl | 24px | Card-to-card spacing, column gutters |
| 2xl | 32px | Section intro-to-content breaks — universal constant |
| 3xl | 38px | Band-to-next-section vertical push — universal constant |
| section | 64–96px | Vertical rhythm between major editorial modules |
### Grid & Container
- Max content width: ~1440px on very large screens; articles and hero modules typically 1200px
- Card grid: 3-up or 4-up at desktop (1200–1440px), 2-up at tablet (768–1024px), stacked 1-up at mobile (<768px)
- Horizontal padding: 32px desktop, 20px tablet, 16px mobile
- Gutters between cards: 24px desktop, 16px mobile
- Institutional panels (share ticker, world map, footer): always full-bleed at every breakpoint
### Whitespace Philosophy
Vodafone's editorial canvas leans generous — whitespace is used as a visual palette cleanser between a monumental headline and the card grid or data panel that follows. Sections are separated by tall vertical rhythm (64–96px) plus the occasional red band that acts as both a separator and a brand signal. Within cards, spacing is tight and efficient (12–16px) so the photography can take the stage.
### Section Cadence
The universal page rhythm:
1. Dark atmospheric hero (full-bleed photography + monumental headline)
2. Red chapter-divider band
3. White editorial canvas (card grid, prose, callouts)
4. Charcoal institutional panel (share ticker, world map, ESG data) — investor and sustainability pages
5. Charcoal footer
This rhythm is so consistent that a derivative agent can rebuild any Vodafone page by repeating this five-step recipe.
## 6. Shapes & Radius Scale
| Token | Value | Use |
|-------|-------|-----|
| hairline | 1px | Inline text wraps, small badges |
| button-tight | 2px | Primary and secondary rectangle button corners — utility/form look |
| card | 6px | News cards, images, input fields |
| asymmetric | `0px 6px 0px 0px` | Featured cards (top-right corner only) |
| glass-pill | 24px | Translucent white pills on dark hero imagery |
| badge-pill | 32px | Filled neutral pill badges |
| cta-pill | 60px | Primary red content CTAs — editorial button look |
| circle | 50% | Icon buttons, carousel arrows, close controls |
| portrait | 100% | Circular portraits and ESG pictograms |
The two-tier system — 2px tight rectangles vs 60px fully-rounded pills — is the most distinctive shape decision. Both are load-bearing primary CTAs; context selects which one ships.
## 7. Depth & Elevation
Vodafone's system is deliberately flat. There is almost no conventional `box-shadow` in the UI. Hierarchy is carried by colour (red bands, charcoal institutional panels), typography weight (800 vs 400), and spacing.
| Level | Treatment | Use |
|-------|-----------|-----|
| 0 — Surface | No shadow, no border | Default card, default section |
| 1 — Outline | 1px solid border at low-opacity | Ghost buttons, outlined pills |
| 2 — Inset Highlight | `inset 0 0 0 1px` on focus | Pressed / focused controls |
| 3 — Photographic depth | Photography itself carries depth | Hero imagery |
| 4 — Surface shift | Charcoal institutional panel below white editorial | Share ticker / world map / footer |
### Shadow Philosophy
Vodafone treats drop shadows as a distraction from brand clarity. The few extracted shadow tokens are reserved for inset focus rings. The dominant "elevation" is a **colour surface shift** — switching from white editorial canvas to charcoal institutional panel — rather than a lift-off drop shadow.
### Decorative Depth
- Atmospheric dark hero photography that carries its own cinematic tonal depth (no CSS overlay needed)
- The rotated vertical IMPACT wordmark on the sustainability map, creating the illusion of a fourth wall alongside the panel
## 8. Interaction & Motion
### Easing Curves
- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — colour and opacity transitions
- **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — image zoom on card hover
### Duration Buckets
- **Fast** (120ms): button :active opacity drop
- **Standard** (200ms): hover colour transitions, card image zoom, link underline thicken
- **Slow** (300ms): rare modal entry / exit
### Per-Component Motion
**Red rectangle / pill button hover**
- Background: red darkens via 5% opacity overlay over 200ms
- Active state: opacity drops to 0.9 over 120ms
- No lift, no shadow change — the brand stays grounded
**Editorial news card hover**
- Image inside card: scales 1.0 → 1.03 over 200ms ease-emphasized
- Card itself: does not lift, does not shadow
- Title: colour stays charcoal — no link-blue transition on card titles
**Inline link hover**
- Underline thickens 1px → 2px over 150ms
- Colour holds at signal blue (`#3860be`) — no colour change
**Page transition**
- Vodafone uses instant route changes — no fade between pages on this institutional site. The seriousness of the brand voice rejects animated page transitions.
### Reduced Motion Strategy
`@media (prefers-reduced-motion: reduce)`:
- Card image zoom: suppressed (image stays at scale 1.0)
- Button :active opacity: preserved (it's a feedback signal, not decoration)
- All other transitions: opacity-only at 100ms
## 9. Accessibility & A11y
### Contrast Pairs
| Pair | Ratio | WCAG Level |
|------|-------|------------|
| `#25282b` text on `#ffffff` bg | 12.4:1 | AAA |
| `#ffffff` text on `#e60000` brand | 5.1:1 | AA at body, AAA at large |
| `#ffffff` text on `#25282b` charcoal | 12.6:1 | AAA |
| `#3860be` link on `#ffffff` bg | 5.4:1 | AA at body, AAA at large |
| `#7e7e7e` mute on `#ffffff` bg | 4.5:1 | AA at body sizes minimum |
### Focus Indicators
- Inset 2px Vodafone Red ring on inputs and buttons
- 2px outline-offset on focusable links
- The red focus ring preserves chromatic discipline (no out-of-system blue accessibility ring)
### ARIA Patterns
- Institutional panels (share ticker, world map) use `role="region"` with descriptive `aria-label`
- Red-band dividers are decorative — `aria-hidden="true"` so screen readers skip them
- Speech-mark logo uses `<svg>` with `<title>` element naming "Vodafone"
- Mobile menu trigger uses `aria-expanded` and `aria-controls`
### Keyboard Navigation
- Tab cycles: top utility bar → main nav → masthead search → primary CTA → red band → article grid → footer columns
- Skip-link present at very top: "Skip to main content"
- Escape: closes mobile menu overlay
- Arrow keys: tab through carousel arrows when carousel is focused
### Screen Reader Hints
- `alt` text on photography is descriptive and contextual (e.g., "Vodafone engineers laying subsea fibre cable off the coast of Mozambique")
- Decorative hero photography uses descriptive alt rather than empty — the brand wants the imagery to be part of the screen-reader experience
- Eyebrow labels use `<p>` not `<h*>` — the heading semantics belong to the `<h1>`/`<h2>` hierarchy
### Reduced Motion Handling
Detailed in §8. The system respects `prefers-reduced-motion: reduce` and disables card-image zoom while preserving structural transitions.
## 10. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | ≤600px | Nav collapses to hamburger; hero display drops to ~56–72px; cards stack 1-up |
| Mobile Large | 601–767px | Hero display ~72–90px; cards still stack 1-up |
| Tablet | 768–1023px | Nav re-expands; cards grid 2-up; hero display ~90–120px |
| Laptop | 1024–1199px | Full nav; cards 3-up; hero display ~120–144px |
| Desktop | 1200–1439px | Standard editorial layout; cards 3-up or 4-up |
| Wide | ≥1440px | Content caps at 1440px; outer canvas padding grows |
### Touch Targets
All interactive controls meet 44×44px minimum on mobile. Icon buttons use 40×40px circular hit areas with 4px invisible padding on touch devices. Primary CTAs land at 48×48px on mobile (16px top/bottom + text line for pills; 12px + text line for rectangles).
### Collapsing Strategy
- **Nav**: horizontal links collapse into hamburger at 768px; logo stays left-aligned at all widths
- **Card grid**: 4-up → 3-up at 1200px → 2-up at 768px → 1-up at 600px, gutters shrink from 24 to 16px
- **Hero display type**: step-reduces 144 → 126 → 90 → 72 → 56px as viewports shrink
- **Section padding**: 96px desktop, 64px tablet, 48px mobile
- **Red divider bands**: full-width at every breakpoint; vertical height compresses 80 → 40px on mobile
- **Institutional panels**: multi-column content restacks into single vertical stream on mobile but charcoal surface stays edge-to-edge
- **Vertically-rotated IMPACT wordmark**: becomes horizontal label or is dropped on mobile where vertical space is limited
### Image Behavior
- Hero imagery: art-directed variant at mobile (tighter crop) versus desktop (wide atmospheric frame)
- Card thumbnails: 16:9 regardless of viewport; `loading="lazy"` standard
- Circular portraits: fixed 80–120px diameter on desktop, shrinking to 64–80px on mobile
- Logo: fixed 40×40px across breakpoints
## 11. Content & Voice
### Tone
The voice is **institutional but human**. Every word reads like it could appear in an annual report or a press release that doesn't condescend. There are no playful asides, no second-person "you'll love this" marketing copy, no exclamation points. The brand commits to corporate-newsroom seriousness while staying warm enough to talk about people and impact rather than just shareholder value.
### Microcopy Patterns
- **Button verbs**: "Explore", "Learn more", "Discover", "Read full report", "Subscribe", "Accept" — imperative, professional, never softened
- **Headline structure**: declarative phrases ("Everyone. Connected.", "Connecting people for a better future") — often punctuated like editorial headlines, not slogans
- **Body copy**: medium-length sentences with confident assertions backed by data
- **Error messages**: "We couldn't process your request. Please try again." — calm, non-blaming
- **Success confirmations**: "Subscription confirmed" or "Form submitted successfully" — terse, professional
### Empty States
Empty article feeds say "No recent updates" rather than "Nothing here yet" — the brand never breaks character with friendly empty-state copy.
### CTA Verb Conventions
The brand uses corporate-imperative verbs:
- Explore
- Learn more
- Discover
- Read more
- Subscribe
- Accept all cookies (legal)
- View full report
It does *not* use:
- Get started (too SaaS)
- Sign up (too consumer-friendly)
- Try free (too trial-product)
- Join us! (too excited; punctuation rejected)
## 12. Dark Mode & Theming
**Vodafone is light-only — no dark mode variant.** The charcoal `#25282b` panels (footer, share ticker, world map) are surface contrast within the light theme, not a separate mode. The brand commits to white editorial canvas as the default reading surface.
### Theming Notes for Derivatives
If you are adapting this system for a brand that needs a true dark mode:
- Swap `#ffffff` → `#0e1012` (deeper than the institutional charcoal)
- Swap `#25282b` → `#cccccc` (light-grey institutional panels invert)
- Swap text `#25282b` → `#f5f5f5`
- Vodafone Red holds at `#e60000` — the red is bright enough to read on dark
- Photography: shift to lighter exposures (sun-side rather than dusk shots) so the inversion doesn't lose dynamic range
## 13. Lineage & Influences
Vodafone's design language draws from:
- **British editorial broadsheet typography** (Times, Guardian, FT) — the institutional headline-and-deck rhythm. https://www.ft.com
- **Conde Nast magazine art direction** — large display + calm body, photography as primary visual. https://www.condenast.com
- **Swiss/International Typographic Style** — the discipline of grid + flat surfaces + minimal decoration
- **Saul Bass logo geometry** — the speech-mark / curved-corner motif derives from Bass's mid-century corporate identity work
- **Massimo Vignelli editorial systems** — the commitment to one strong colour + one typeface + ruthless restraint
What Vodafone rejects:
- Gradient-heavy SaaS marketing aesthetics (Stripe, Linear)
- Playful illustration languages (Slack, Mailchimp)
- Material Design's elevation-tier system
- Glassmorphism / frosted-glass effects
### Named Influences
- Financial Times editorial design — https://www.ft.com
- BBC News broadcast aesthetic — https://www.bbc.com/news
- IBM Plex / Carbon corporate system — https://www.ibm.com
- Helvetica & Swiss Style heritage — https://en.wikipedia.org/wiki/International_Typographic_Style
- Bass-era corporate identity — https://en.wikipedia.org/wiki/Saul_Bass
## 14. Do's and Don'ts
### Do
- Use Vodafone Red (`#e60000`) as the single loudest element on any screen — one primary CTA per fold, one red band per editorial break
- Set display headlines in uppercase 800-weight with tight negative tracking; let them run to 90–144px on desktop
- Pair monumental display type with calm 16–18px body copy — the scale jump is the system
- Switch button radius based on context: 2px rectangles for form/utility, 60px pills for editorial CTAs
- Let documentary photography breathe at 16:9 or 1:1 on a 6px radius — no decorative borders, no heavy overlays
- Use the red band as full-width chapter divider between every hero and the content below
- Anchor every page with charcoal institutional surface — the footer always, plus share ticker / world map on relevant pages
- Respect the universal page rhythm: dark hero → red band → white editorial → charcoal institutional → charcoal footer
- Use the asymmetric `0px 6px 0px 0px` corner radius on featured cards — it echoes the speech-mark logo geometry
- Set inline links in signal blue with underline at rest
### Don't
- Don't introduce a second brand hue to rival Vodafone Red — no teals, no purples, no orange accents
- Don't soften rectangle button corners beyond 2px, and don't shrink pill button corners below 60px — the two shapes are both load-bearing
- Don't add drop shadows to cards or buttons — the system is intentionally flat and uses surface colour for elevation
- Don't use gradients on backgrounds, buttons, or text
- Don't mix uppercase tracking on body text — uppercase is reserved for display, labels, micro-labels
- Don't use italics for emphasis — use weight 600/700 instead
- Don't decorate headlines with coloured underlines or highlights — the type does the work
- Don't use pure black `#000000` for text or surfaces — always use Charcoal Headline `#25282b`
- Don't use animated page transitions — the institutional voice rejects motion-marketing tropes
- Don't compromise the full-bleed nature of red bands and charcoal panels — they always go edge-to-edge
## 15. Agent Prompt Guide
### Quick Color Reference
- Primary CTA: Vodafone Red (`#e60000`)
- Background: Canvas White (`#ffffff`)
- Heading text: Charcoal Headline (`#25282b`)
- Body text: Secondary Body Grey (`#7e7e7e`)
- Institutional surface: Charcoal Institutional Panel (`#25282b`)
- Inline link: Signal Blue (`#3860be`)
- Quiet pill background: Light Neutral (`#f2f2f2`)
- Focus ring: inset 2px Vodafone Red
### Example Component Prompts
- "Create a primary red rectangle button: Vodafone Red (`#e60000`) background, pure white 14.4px weight 700 text, 2px border radius (sharp corners), 12px vertical × 10px horizontal padding. Use for form and utility actions. No shadow, no gradient."
- "Create a primary red pill CTA: Vodafone Red (`#e60000`) background, pure white 14.4px weight 700 text, 60px border radius (fully pill-shaped), 16px uniform padding. Use for editorial content calls-to-action."
- "Design an editorial news card: white background, 6px border radius, 16:9 image at top, 12px eyebrow row containing date and red-outlined uppercase tag pill, then 24px weight 700 Charcoal title. No shadow — spacing alone separates cards."
- "Build a hero section: dark atmospheric photo as full-bleed background, monumental uppercase headline at 144px weight 800 with -1px letter-spacing, single Vodafone Red pill CTA beneath it, no overlay gradient."
- "Create a red divider band: full-width strip of Vodafone Red, 64px tall on desktop and 40px on mobile, no text, no controls — pure visual chapter break."
- "Design an institutional data panel: full-bleed Charcoal Institutional Panel (`#25282b`) background, large numeric display at 48px weight 800 white with negative letter-spacing, 14px weight 400 grey meta row beneath. Use for share ticker or stats callout."
- "Design a global impact map: Charcoal background, minimal grey world-map illustration, red Vodafone-red circular markers on operational locations, the brand word IMPACT set at large display size in brand red and rotated 90° to run vertically along one edge."
### Iteration Guide
When refining existing screens generated with this design system:
1. Focus on ONE component at a time — small refinements compound in this restrained system
2. Reference specific colour names AND hex codes from this document
3. Use natural language ("sharper corners", "more generous vertical rhythm") alongside specific measurements
4. When in doubt about radius, remember: 2px for form/utility, 60px for editorial pills, 6px for cards, 50%/100% for icon and portrait circles
5. Keep the brand rule absolute: only one Vodafone Red element should dominate any given fold
6. Default text colour to Charcoal `#25282b`, never pure `#000000` — the warm cool tint is part of the brand
7. Default background to white `#ffffff`; reach for charcoal `#25282b` for institutional moments only
8. Use the universal page rhythm as a checklist: hero → red band → editorial → institutional → footer
1. Visual Theme & Atmosphere
Vodafone’s corporate web system carries the confident, broadcast-scale presence of a global telecom brand built around a single fiercely-owned brand red. The pages don’t whisper — they declare, the way the front of a national newspaper declares headlines to a commuter platform. Every page template (homepage, investor relations, sustainable business, our purpose) opens the same way: a cinematic dark hero photograph behind a towering uppercase display headline (“EVERYONE. CONNECTED.”, “INVESTORS”, “OUR BUSINESS”) followed by a deep red full-width band that acts as a chapter break, then a crisp white editorial grid or a near-black charcoal section reserved for institutional content like share-price tickers and global-impact maps.
The voice is institutional but human. Documentary photography — cable-laying crews on a moonlit beach, coral reefs threaded with subsea fibre, pine forests, urban twilight, indigenous communities operating connectivity hubs — is colour-graded with realism rather than glossed up. The imagery sits against clean neutral surfaces (mostly white, occasionally charcoal) that never compete with the content. Where Apple’s brand uses photography to seduce and Tesla’s uses it to dramatise, Vodafone’s photography is documentary: it shows people and infrastructure doing the work of global connectivity.
The typography system is the signature. The proprietary Vodafone display face runs all the way up to 144px in heavy 800-weight uppercase with -1px negative tracking, and it holds that voice consistently across every page template. Body copy sits in a calm 16–18px mid-weight rhythm. This dual scale — monumental at the top, almost quiet at the bottom — creates the “corporate newsroom” feeling: every page reads like the front of a national paper whose masthead happens to be red.
Surface treatment is disciplined and predictable: a three-surface pass of white (editorial canvas) → Vodafone Red (band dividers, CTA buttons, the speech-mark logo, the rotated IMPACT mark on the world map) → near-black charcoal #25282b (footer, share-ticker panel, global-impact map). There is almost no decorative shadow, almost no gradient, almost no rounded-corner softness. Edges are small and clinical (2px and 6px), buttons operate as a two-tier system — tight 2px rectangles for utility/form actions, and fully-rounded 60px pills for editorial content CTAs. This is a design that trusts the brand colour to do the heavy lifting and gets out of its way everywhere else.
Key Characteristics:
- Vodafone Red (
#e60000) is the single dominant accent — CTAs, dividers, band sections, the speech-mark logo, the rotated IMPACT mark - Monumental uppercase display type up to 144px / weight 800 / -1px tracking paired with calm 16–18px body
- A universal page rhythm: dark atmospheric hero → monumental headline → red band → white editorial → charcoal institutional → charcoal footer
- Two-tier button system: 2px rectangles for utility/form, 60px pills for editorial — both equally primary, context-selected
- Documentary photography (people, infrastructure, cities, nature) over illustration; no stock-icon noise
- Near-absence of shadows and gradients — hierarchy from type weight, colour blocks, and spacing
- Charcoal
#25282bdoubles as footer AND institutional data panel (share ticker, world map) — a single material for anything formal and numeric - Asymmetric corner cards (
0px 6px 0px 0px) echo the speech-mark logo’s curved geometry
2. Color Palette & Roles
Primary
- Vodafone Red (
#e60000): the brand’s single non-negotiable signature. Used for primary CTA backgrounds, the speech-mark logo, full-bleed band dividers between editorial sections, tag-pill outlines, and the rotated brand-mark type that labels the global-impact map. This red must never be substituted, tinted, or paired with another saturated hue.
Brand & Dark
- Charcoal Institutional (
#25282b): the same near-black used for headline text is reused as a full-width dark surface for the footer, the share-ticker panel, and the global-impact map. It transforms the page into a “data mode” environment — the brand’s institutional voice. - Deep Brand Red Shade (
#ac1811): a darker red used only on quiet label chips (notably on the sustainability page) — for low-prominence tag elements that need red identity without drawing primary attention.
Accent
- Signal Blue (
#3860be): reserved for inline text links in their resting state (underlined). A calm accessible blue that reads clearly against both white and dark surfaces. The only non-red, non-grey colour in the chrome.
Surface & Background
- Canvas White (
#ffffff): the dominant editorial canvas — page background, card backgrounds, reversed text on dark or red surfaces, circular icon-button fills. - Light Neutral (
#f2f2f2): filled neutral pill-badge backgrounds and quiet UI chrome where full white would disappear. - Charcoal Institutional Panel (
#25282b): footer, share ticker, world map. The “data mode” surface. - Translucent White Overlay (
rgba(255,255,255,0.1)): glass tint for pill buttons sitting on dark hero imagery — lets the photo breathe through the button.
Interactive
- Link (
#3860be): default state, signal blue with underline - Link Hover: same colour, underline thickens 1 → 2px
- Visited (
#5e2a8c): rare; mostly suppressed in marketing surfaces - Disabled (
#bebebe): inactive chip text on subtle ghost-style controls
Neutral Scale
- Charcoal Headline (
#25282b): all heading text on light surfaces. Near-black with a faint cool tint, never pure black. - Secondary Body Grey (
#7e7e7e): body copy, meta text, secondary labels — true mid-grey, unemphatic but legible - Form Text Grey (
#333333): borders on input-style ghost buttons and text inside them - Disabled Grey (
#bebebe): inactive chip text - Translucent White Divider (
rgba(255,255,255,0.25)): hairline column dividers on dark institutional panels (footer columns, map legend rows)
Surface & Borders
- Border default (
#cccccc): standard 1px hairline - Border soft (
#e8e8e8): editorial dividers between modules - Border strong (
#333333): form-input outline (warmer than typical) - Border on dark (
rgba(255,255,255,0.25)): hairline on charcoal panels - Border pill red (
#e60000): 1px outline on light tag pills, letting the brand colour touch small UI without drowning card content
Shadow Colors
Vodafone is intentionally near-flat. The few shadow tokens are reserved for inset focus rings and the rare modal drop-shadow. No card shadows, no button shadows, no glassmorphism.
Semantic
- Success Green (
#067f5b): rare — confirmation states only - Warning Brown (
#a35316): rare — advisory banners - Danger (
#e60000): error states reuse the brand red - Info (
#3860be): informational banners reuse signal blue
Gradient System
Vodafone’s design is intentionally gradient-free. The only tonal variation is a subtle photographic vignette on hero imagery (dim coral reefs, pine forests, cable crews, urban twilight), where the image itself — not a CSS gradient — provides the tonal ramp. No linear gradients on buttons, cards, or surfaces.
3. Typography Rules
Font Family
- Primary:
Vodafone— the proprietary corporate sans-serif - Fallback chain:
"Vodafone", "Helvetica Neue", Arial, sans-serif - Icon font:
icomoon— pictograph glyphs at 18/24/48px fixed sizes - Rendering:
font-smoothing: antialiased. OpenType features are not aggressively used — the design relies on weight and tracking, not stylistic alternates.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Transform | Notes |
|---|---|---|---|---|---|---|---|
| display-hero-xl | Vodafone | 144 | 800 | 0.79 | -1px | UPPERCASE | ”EVERYONE. CONNECTED.” flagship |
| display-hero-lg | Vodafone | 126 | 800 | 0.90 | -1px | UPPERCASE | Longer hero headlines |
| display-hero-md | Vodafone | 90 | 800 | 0.93 | 0 | UPPERCASE | Secondary hero or full-bleed section heads |
| display-impact | Vodafone | 70 | 800 | 1.17 | -1px | UPPERCASE | Sustainability numeric / callout scale |
| h1-light | Vodafone | 48 | 300 | 1.08 | 0 | — | Section headlines in light weight for editorial calm |
| h1-bold | Vodafone | 48 | 800 | 1.0 | -1px | — | Institutional data headers (share price on charcoal) |
| h2-light | Vodafone | 40 | 300 | 1.10 | 0 | — | Sub-section headers |
| h2-bold | Vodafone | 40 | 700 | 1.10 | 0 | — | Denser sub-section headers |
| h3-bold | Vodafone | 32 | 700 | 1.25 | 0 | — | Card cluster titles, feature intros |
| h4-bold | Vodafone | 24 | 700 | 1.0 | 0 | — | Card titles (news, feature, article modules) |
| h4-light | Vodafone | 24 | 300 | 1.42 | 0 | — | Intro paragraphs on investor / sustainability pages |
| h5-bold | Vodafone | 20 | 700 | 1.30 | 0 | — | Compact module titles, side callouts |
| lead-body | Vodafone | 20 | 400 | 1.40 | 0 | — | Introductory paragraphs under large headlines |
| body-lg | Vodafone | 18 | 400 | 1.56 | 0 | — | Long-form article body, prominent copy |
| body-bold | Vodafone | 18 | 600 | 1.56 | 0 | — | Emphasised inline phrases |
| body-md | Vodafone | 16 | 400 | 1.38 | 0 | — | Default paragraph |
| label-uppercase | Vodafone | 16 | 800 | 1.50 | 0 | UPPERCASE | Navigational labels |
| eyebrow | Vodafone | 14 | 700 | 1.43 | 0 | — | Article date stamps, meta (14 APR 2026) |
| tag-pill | Vodafone | 14 | 700 | 1.50 | 0 | — | Badge text inside red-outlined pills |
| caption-uppercase | Vodafone | 14 | 400 | 1.14 | 0 | UPPERCASE | Uppercase meta label |
| caption | Vodafone | 12 | 500 | 2.0 | 0 | — | Footer meta, legal lines |
| micro | Vodafone | 12 | 600 | 1.33 | 0 | UPPERCASE | Tiny labels on badges, counters |
| button-primary | Vodafone | 14.4 | 700 | 1.0 | 0.144px | — | Primary filled button label |
| button-compact | Vodafone | 12 | 700 | 1.0 | 0.12px | — | Compact button label |
Principles
- Dual-scale drama: the system stretches from 144px down to 8.5px without mid-range showing off. Monumental for brand moments, calm for reading.
- Uppercase display, mixed-case body: largest display sizes are uppercase with negative tracking; everything 48px and below is sentence case with normal tracking.
- Three-weight discipline: 800 (display), 700 (bold bodies, buttons, tags), 400 (reading body). A lighter 300 is used for editorial-style 40/48px headlines when a calmer voice is wanted.
- No italics, no decorative letterspacing on body: the body system is deliberately neutral so display work can shout.
- Rotated brand-mark type: on the sustainability section, the word “IMPACT” is set in brand red at large display size and rotated 90° to run vertically along the edge of a dark world-map panel — a distinctive typographic flourish that labels the institutional data surface.
Note on Font Substitutes
The Vodafone corporate typeface is proprietary. When recreating in open systems, substitute with Inter at weights 400/600/800, or Neue Haas Grotesk if available. Inter needs letter-spacing reduced by ~1–2% at display sizes (80px+) to approximate Vodafone’s tight tracking; line-height should be set to 0.85–0.95 for the uppercase display tier.
4. Component Stylings
Vodafone operates a genuine two-tier primary button system. Both tiers are used as primary calls to action — the difference is context (form/chrome vs editorial/content), not hierarchy.
Buttons
button-red-rect — Primary Red Rectangle (utility / form CTA)
- Background: Vodafone Red (
#e60000) - Text: Pure White, 14.4px, weight 700, letter-spacing 0.144px
- Padding: 12px vertical, 10px horizontal
- Border: 1px solid Vodafone Red (
#e60000) - Border radius: 2px — deliberately sharp-cornered
- Default: solid red fill with crisp 2px corners
- Active: brief opacity drop to 0.9 on press
- Use: “Accept All Cookies”, “Subscribe”, form submission
button-red-pill — Primary Red Pill (editorial / content CTA)
- Background: Vodafone Red (
#e60000) - Text: Pure White, 14.4px, weight 700, letter-spacing 0.144px
- Padding: 16px uniform
- Border radius: 60px — fully pill-shaped
- Default: solid red fill with rounded ends
- Active: opacity 0.9 on press
- Use: “Link to Our approach to ESG”, “Explore connecting people”
button-ghost-rect — Ghost White Rectangle (secondary form action)
- Background: Pure White
- Text: Form Text Grey (
#333333), 14.4px, weight 700 - Border: 1px solid
#333333, radius 2px - Padding: 12px / 10px
button-glass-pill — Glass Pill (sits on dark hero imagery)
- Background: Pure White at 10% opacity
- Text: Pure White, weight 700
- Padding: 8px / 16px, radius 24px
button-ghost-pill — Content Ghost Pill (inline within editorial cards)
- Background: Black at 5% opacity (
rgba(0,0,0,0.05)) - Text: Vodafone Red, 14.4px / 700
- Padding: 15px uniform, radius 60px
button-icon-circle — Icon Control Button (video play/pause, carousel arrows, close)
- Background: Pure White
- Icon colour: Charcoal Headline (
#25282b) - Border radius: 50%
- Outline: 1px solid white for focus indication
- Size: 32–40px diameter
Cards & Containers
card-news — homepage article tile
- Background: Pure White, radius 6px (image corners + container), no shadow
- Layout: 16:9 image on top → 12px gap → eyebrow row (date + tag pill) → 8px gap → H4 Bold title → 16px card padding sides and bottom
- Image:
object-fit: cover, rounded top corners only
card-asymmetric — featured homepage card
- Background: Pure White
- Border radius:
0px 6px 0px 0px— single-corner-rounded shape echoing the speech-mark logo’s curved geometry - No shadow, no border — the asymmetric radius itself is the visual signature
card-portrait — circular portrait / pictogram
- Background: Pure White, radius 100%
- Used for ESG pictograms and executive portraits inside institutional content
Inputs & Forms
text-input
- Background: Pure White
- Text: Form Text Grey (
#333333), 16/400 - Border: 1px solid
#333333, radius 2px - Padding: 12px 10px
- Error state: 1px border shifts to Vodafone Red, error message in 12/600 red
Navigation
Top bar
- Background: transparent over hero imagery; solid white on scroll or interior pages
- Height: 64px desktop, 56px mobile
- Logo: Vodafone speech-mark, 40×40px red circle with white speech-mark cut-out, left-aligned
- Nav links: 16/400 Charcoal Headline on white; reversed to white on dark hero
- Right utility: small icon links (search, locale, menu) at 24px icomoon glyphs
- Interior pages show secondary-nav row: “Vodafone Business / Vodafone Foundation / Our site” right-aligned
Mobile collapse
- At ~768px the horizontal nav collapses into a hamburger
- Mobile menu opens as full-width white overlay, 18/400 link rows, 16px vertical padding per row
Image Treatment
- Hero: full-bleed dark atmospheric photography (coral reefs, pine forests, cable crews, urban twilight) with natural vignette or cool-tone colour grade — no CSS overlay needed
- Card thumbnails: 16:9 ratio, 6px top corner radius
- Square editorial: 1:1 ratio with 6px corner radius
- Round portraits: 100% (perfect circle) for executive headshots and ESG pictograms
- Loading: lazy-loading on scroll; images stabilise within ~200ms of entering viewport
- No decorative borders — card radius does the framing work
Tag Pills / Badges
tag-pill-red (used inline on article-card meta, e.g. “EMPOWERING PEOPLE”)
- Background: Pure White at 80% opacity
- Text: Near-black at 80% opacity, 12/600 uppercase
- Border: 1px solid Vodafone Red, radius ~2px
tag-pill-neutral (quieter tags)
- Background: Light Neutral (
#f2f2f2) - Text: Charcoal Headline, 14/700
- Padding: 4px 12px, radius 32px (fully pill-shaped)
Red Divider Band
A signature reusable component on every page template: full-width band of Vodafone Red running horizontally to separate monumental hero from editorial body. Carries no text, no controls — simply is the brand’s way of saying “new chapter.” Typical height: 40–80px.
Share Ticker Panel (Investor pages)
- Background: Charcoal
#25282b - Large numeric: 48/800 white type with negative tracking (e.g. “116.05 GBX”)
- Metadata row: delay notice and timestamp in 14/400 secondary grey
- Layout: horizontal strip above footer, full content width
- Hairline dividers
rgba(255,255,255,0.25)separate ticker from footer columns
Global Impact Map Panel (Sustainability pages)
- Background: Charcoal
#25282b - Dark minimal world-map illustration in slightly lighter grey
- Red circular markers (
#e60000) plotted on operational geographies - Vertically-rotated brand word “IMPACT” set in Vodafone Red at large display size, weight 800, uppercase, 90° rotated, running along one edge — the template’s signature typographic move
- Small legend with red markers and white uppercase labels at top-left
Footer
A universal component:
- Background: Charcoal
#25282b - Layout: 4-column link grid (Our company / Investors / Vodafone websites / Share price) followed by “Connect with us” social row and legal/privacy line
- Logo: red speech-mark repeats bottom-right at 32–40px
- Column header: 16/800 uppercase white
- Column link: 14/400 white, stacked vertically with 12px row spacing
- Divider hairlines:
rgba(255,255,255,0.25)between column group and legal row
5. Layout Principles
Spacing System
Base unit: 8px. Two values (32px and 38px) appear across every page in the analysis, making them the template’s universal rhythm constants.
| Token | Value | Use |
|---|---|---|
| 2xs | 2px | Hairline separators |
| xs | 4px | Icon-to-text gap in tight controls |
| sm | 8px | Base rhythm unit |
| md | 12px | Card internal padding, eyebrow-to-title gap |
| base | 16px | Paragraph rhythm, card padding, pill button padding |
| lg | 20px | Section-internal spacing |
| xl | 24px | Card-to-card spacing, column gutters |
| 2xl | 32px | Section intro-to-content breaks — universal constant |
| 3xl | 38px | Band-to-next-section vertical push — universal constant |
| section | 64–96px | Vertical rhythm between major editorial modules |
Grid & Container
- Max content width: ~1440px on very large screens; articles and hero modules typically 1200px
- Card grid: 3-up or 4-up at desktop (1200–1440px), 2-up at tablet (768–1024px), stacked 1-up at mobile (<768px)
- Horizontal padding: 32px desktop, 20px tablet, 16px mobile
- Gutters between cards: 24px desktop, 16px mobile
- Institutional panels (share ticker, world map, footer): always full-bleed at every breakpoint
Whitespace Philosophy
Vodafone’s editorial canvas leans generous — whitespace is used as a visual palette cleanser between a monumental headline and the card grid or data panel that follows. Sections are separated by tall vertical rhythm (64–96px) plus the occasional red band that acts as both a separator and a brand signal. Within cards, spacing is tight and efficient (12–16px) so the photography can take the stage.
Section Cadence
The universal page rhythm:
- Dark atmospheric hero (full-bleed photography + monumental headline)
- Red chapter-divider band
- White editorial canvas (card grid, prose, callouts)
- Charcoal institutional panel (share ticker, world map, ESG data) — investor and sustainability pages
- Charcoal footer
This rhythm is so consistent that a derivative agent can rebuild any Vodafone page by repeating this five-step recipe.
6. Shapes & Radius Scale
| Token | Value | Use |
|---|---|---|
| hairline | 1px | Inline text wraps, small badges |
| button-tight | 2px | Primary and secondary rectangle button corners — utility/form look |
| card | 6px | News cards, images, input fields |
| asymmetric | 0px 6px 0px 0px | Featured cards (top-right corner only) |
| glass-pill | 24px | Translucent white pills on dark hero imagery |
| badge-pill | 32px | Filled neutral pill badges |
| cta-pill | 60px | Primary red content CTAs — editorial button look |
| circle | 50% | Icon buttons, carousel arrows, close controls |
| portrait | 100% | Circular portraits and ESG pictograms |
The two-tier system — 2px tight rectangles vs 60px fully-rounded pills — is the most distinctive shape decision. Both are load-bearing primary CTAs; context selects which one ships.
7. Depth & Elevation
Vodafone’s system is deliberately flat. There is almost no conventional box-shadow in the UI. Hierarchy is carried by colour (red bands, charcoal institutional panels), typography weight (800 vs 400), and spacing.
| Level | Treatment | Use |
|---|---|---|
| 0 — Surface | No shadow, no border | Default card, default section |
| 1 — Outline | 1px solid border at low-opacity | Ghost buttons, outlined pills |
| 2 — Inset Highlight | inset 0 0 0 1px on focus | Pressed / focused controls |
| 3 — Photographic depth | Photography itself carries depth | Hero imagery |
| 4 — Surface shift | Charcoal institutional panel below white editorial | Share ticker / world map / footer |
Shadow Philosophy
Vodafone treats drop shadows as a distraction from brand clarity. The few extracted shadow tokens are reserved for inset focus rings. The dominant “elevation” is a colour surface shift — switching from white editorial canvas to charcoal institutional panel — rather than a lift-off drop shadow.
Decorative Depth
- Atmospheric dark hero photography that carries its own cinematic tonal depth (no CSS overlay needed)
- The rotated vertical IMPACT wordmark on the sustainability map, creating the illusion of a fourth wall alongside the panel
8. Interaction & Motion
Easing Curves
- Standard:
cubic-bezier(0.4, 0, 0.2, 1)— colour and opacity transitions - Emphasized:
cubic-bezier(0.2, 0, 0, 1)— image zoom on card hover
Duration Buckets
- Fast (120ms): button :active opacity drop
- Standard (200ms): hover colour transitions, card image zoom, link underline thicken
- Slow (300ms): rare modal entry / exit
Per-Component Motion
Red rectangle / pill button hover
- Background: red darkens via 5% opacity overlay over 200ms
- Active state: opacity drops to 0.9 over 120ms
- No lift, no shadow change — the brand stays grounded
Editorial news card hover
- Image inside card: scales 1.0 → 1.03 over 200ms ease-emphasized
- Card itself: does not lift, does not shadow
- Title: colour stays charcoal — no link-blue transition on card titles
Inline link hover
- Underline thickens 1px → 2px over 150ms
- Colour holds at signal blue (
#3860be) — no colour change
Page transition
- Vodafone uses instant route changes — no fade between pages on this institutional site. The seriousness of the brand voice rejects animated page transitions.
Reduced Motion Strategy
@media (prefers-reduced-motion: reduce):
- Card image zoom: suppressed (image stays at scale 1.0)
- Button :active opacity: preserved (it’s a feedback signal, not decoration)
- All other transitions: opacity-only at 100ms
9. Accessibility & A11y
Contrast Pairs
| Pair | Ratio | WCAG Level |
|---|---|---|
#25282b text on #ffffff bg | 12.4:1 | AAA |
#ffffff text on #e60000 brand | 5.1:1 | AA at body, AAA at large |
#ffffff text on #25282b charcoal | 12.6:1 | AAA |
#3860be link on #ffffff bg | 5.4:1 | AA at body, AAA at large |
#7e7e7e mute on #ffffff bg | 4.5:1 | AA at body sizes minimum |
Focus Indicators
- Inset 2px Vodafone Red ring on inputs and buttons
- 2px outline-offset on focusable links
- The red focus ring preserves chromatic discipline (no out-of-system blue accessibility ring)
ARIA Patterns
- Institutional panels (share ticker, world map) use
role="region"with descriptivearia-label - Red-band dividers are decorative —
aria-hidden="true"so screen readers skip them - Speech-mark logo uses
<svg>with<title>element naming “Vodafone” - Mobile menu trigger uses
aria-expandedandaria-controls
Keyboard Navigation
- Tab cycles: top utility bar → main nav → masthead search → primary CTA → red band → article grid → footer columns
- Skip-link present at very top: “Skip to main content”
- Escape: closes mobile menu overlay
- Arrow keys: tab through carousel arrows when carousel is focused
Screen Reader Hints
alttext on photography is descriptive and contextual (e.g., “Vodafone engineers laying subsea fibre cable off the coast of Mozambique”)- Decorative hero photography uses descriptive alt rather than empty — the brand wants the imagery to be part of the screen-reader experience
- Eyebrow labels use
<p>not<h*>— the heading semantics belong to the<h1>/<h2>hierarchy
Reduced Motion Handling
Detailed in §8. The system respects prefers-reduced-motion: reduce and disables card-image zoom while preserving structural transitions.
10. Responsive Behavior
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | ≤600px | Nav collapses to hamburger; hero display drops to ~56–72px; cards stack 1-up |
| Mobile Large | 601–767px | Hero display ~72–90px; cards still stack 1-up |
| Tablet | 768–1023px | Nav re-expands; cards grid 2-up; hero display ~90–120px |
| Laptop | 1024–1199px | Full nav; cards 3-up; hero display ~120–144px |
| Desktop | 1200–1439px | Standard editorial layout; cards 3-up or 4-up |
| Wide | ≥1440px | Content caps at 1440px; outer canvas padding grows |
Touch Targets
All interactive controls meet 44×44px minimum on mobile. Icon buttons use 40×40px circular hit areas with 4px invisible padding on touch devices. Primary CTAs land at 48×48px on mobile (16px top/bottom + text line for pills; 12px + text line for rectangles).
Collapsing Strategy
- Nav: horizontal links collapse into hamburger at 768px; logo stays left-aligned at all widths
- Card grid: 4-up → 3-up at 1200px → 2-up at 768px → 1-up at 600px, gutters shrink from 24 to 16px
- Hero display type: step-reduces 144 → 126 → 90 → 72 → 56px as viewports shrink
- Section padding: 96px desktop, 64px tablet, 48px mobile
- Red divider bands: full-width at every breakpoint; vertical height compresses 80 → 40px on mobile
- Institutional panels: multi-column content restacks into single vertical stream on mobile but charcoal surface stays edge-to-edge
- Vertically-rotated IMPACT wordmark: becomes horizontal label or is dropped on mobile where vertical space is limited
Image Behavior
- Hero imagery: art-directed variant at mobile (tighter crop) versus desktop (wide atmospheric frame)
- Card thumbnails: 16:9 regardless of viewport;
loading="lazy"standard - Circular portraits: fixed 80–120px diameter on desktop, shrinking to 64–80px on mobile
- Logo: fixed 40×40px across breakpoints
11. Content & Voice
Tone
The voice is institutional but human. Every word reads like it could appear in an annual report or a press release that doesn’t condescend. There are no playful asides, no second-person “you’ll love this” marketing copy, no exclamation points. The brand commits to corporate-newsroom seriousness while staying warm enough to talk about people and impact rather than just shareholder value.
Microcopy Patterns
- Button verbs: “Explore”, “Learn more”, “Discover”, “Read full report”, “Subscribe”, “Accept” — imperative, professional, never softened
- Headline structure: declarative phrases (“Everyone. Connected.”, “Connecting people for a better future”) — often punctuated like editorial headlines, not slogans
- Body copy: medium-length sentences with confident assertions backed by data
- Error messages: “We couldn’t process your request. Please try again.” — calm, non-blaming
- Success confirmations: “Subscription confirmed” or “Form submitted successfully” — terse, professional
Empty States
Empty article feeds say “No recent updates” rather than “Nothing here yet” — the brand never breaks character with friendly empty-state copy.
CTA Verb Conventions
The brand uses corporate-imperative verbs:
- Explore
- Learn more
- Discover
- Read more
- Subscribe
- Accept all cookies (legal)
- View full report
It does not use:
- Get started (too SaaS)
- Sign up (too consumer-friendly)
- Try free (too trial-product)
- Join us! (too excited; punctuation rejected)
12. Dark Mode & Theming
Vodafone is light-only — no dark mode variant. The charcoal #25282b panels (footer, share ticker, world map) are surface contrast within the light theme, not a separate mode. The brand commits to white editorial canvas as the default reading surface.
Theming Notes for Derivatives
If you are adapting this system for a brand that needs a true dark mode:
- Swap
#ffffff→#0e1012(deeper than the institutional charcoal) - Swap
#25282b→#cccccc(light-grey institutional panels invert) - Swap text
#25282b→#f5f5f5 - Vodafone Red holds at
#e60000— the red is bright enough to read on dark - Photography: shift to lighter exposures (sun-side rather than dusk shots) so the inversion doesn’t lose dynamic range
13. Lineage & Influences
Vodafone’s design language draws from:
- British editorial broadsheet typography (Times, Guardian, FT) — the institutional headline-and-deck rhythm. https://www.ft.com
- Conde Nast magazine art direction — large display + calm body, photography as primary visual. https://www.condenast.com
- Swiss/International Typographic Style — the discipline of grid + flat surfaces + minimal decoration
- Saul Bass logo geometry — the speech-mark / curved-corner motif derives from Bass’s mid-century corporate identity work
- Massimo Vignelli editorial systems — the commitment to one strong colour + one typeface + ruthless restraint
What Vodafone rejects:
- Gradient-heavy SaaS marketing aesthetics (Stripe, Linear)
- Playful illustration languages (Slack, Mailchimp)
- Material Design’s elevation-tier system
- Glassmorphism / frosted-glass effects
Named Influences
- Financial Times editorial design — https://www.ft.com
- BBC News broadcast aesthetic — https://www.bbc.com/news
- IBM Plex / Carbon corporate system — https://www.ibm.com
- Helvetica & Swiss Style heritage — https://en.wikipedia.org/wiki/International_Typographic_Style
- Bass-era corporate identity — https://en.wikipedia.org/wiki/Saul_Bass
14. Do’s and Don’ts
Do
- Use Vodafone Red (
#e60000) as the single loudest element on any screen — one primary CTA per fold, one red band per editorial break - Set display headlines in uppercase 800-weight with tight negative tracking; let them run to 90–144px on desktop
- Pair monumental display type with calm 16–18px body copy — the scale jump is the system
- Switch button radius based on context: 2px rectangles for form/utility, 60px pills for editorial CTAs
- Let documentary photography breathe at 16:9 or 1:1 on a 6px radius — no decorative borders, no heavy overlays
- Use the red band as full-width chapter divider between every hero and the content below
- Anchor every page with charcoal institutional surface — the footer always, plus share ticker / world map on relevant pages
- Respect the universal page rhythm: dark hero → red band → white editorial → charcoal institutional → charcoal footer
- Use the asymmetric
0px 6px 0px 0pxcorner radius on featured cards — it echoes the speech-mark logo geometry - Set inline links in signal blue with underline at rest
Don’t
- Don’t introduce a second brand hue to rival Vodafone Red — no teals, no purples, no orange accents
- Don’t soften rectangle button corners beyond 2px, and don’t shrink pill button corners below 60px — the two shapes are both load-bearing
- Don’t add drop shadows to cards or buttons — the system is intentionally flat and uses surface colour for elevation
- Don’t use gradients on backgrounds, buttons, or text
- Don’t mix uppercase tracking on body text — uppercase is reserved for display, labels, micro-labels
- Don’t use italics for emphasis — use weight 600/700 instead
- Don’t decorate headlines with coloured underlines or highlights — the type does the work
- Don’t use pure black
#000000for text or surfaces — always use Charcoal Headline#25282b - Don’t use animated page transitions — the institutional voice rejects motion-marketing tropes
- Don’t compromise the full-bleed nature of red bands and charcoal panels — they always go edge-to-edge
15. Agent Prompt Guide
Quick Color Reference
- Primary CTA: Vodafone Red (
#e60000) - Background: Canvas White (
#ffffff) - Heading text: Charcoal Headline (
#25282b) - Body text: Secondary Body Grey (
#7e7e7e) - Institutional surface: Charcoal Institutional Panel (
#25282b) - Inline link: Signal Blue (
#3860be) - Quiet pill background: Light Neutral (
#f2f2f2) - Focus ring: inset 2px Vodafone Red
Example Component Prompts
- “Create a primary red rectangle button: Vodafone Red (
#e60000) background, pure white 14.4px weight 700 text, 2px border radius (sharp corners), 12px vertical × 10px horizontal padding. Use for form and utility actions. No shadow, no gradient.” - “Create a primary red pill CTA: Vodafone Red (
#e60000) background, pure white 14.4px weight 700 text, 60px border radius (fully pill-shaped), 16px uniform padding. Use for editorial content calls-to-action.” - “Design an editorial news card: white background, 6px border radius, 16:9 image at top, 12px eyebrow row containing date and red-outlined uppercase tag pill, then 24px weight 700 Charcoal title. No shadow — spacing alone separates cards.”
- “Build a hero section: dark atmospheric photo as full-bleed background, monumental uppercase headline at 144px weight 800 with -1px letter-spacing, single Vodafone Red pill CTA beneath it, no overlay gradient.”
- “Create a red divider band: full-width strip of Vodafone Red, 64px tall on desktop and 40px on mobile, no text, no controls — pure visual chapter break.”
- “Design an institutional data panel: full-bleed Charcoal Institutional Panel (
#25282b) background, large numeric display at 48px weight 800 white with negative letter-spacing, 14px weight 400 grey meta row beneath. Use for share ticker or stats callout.” - “Design a global impact map: Charcoal background, minimal grey world-map illustration, red Vodafone-red circular markers on operational locations, the brand word IMPACT set at large display size in brand red and rotated 90° to run vertically along one edge.”
Iteration Guide
When refining existing screens generated with this design system:
- Focus on ONE component at a time — small refinements compound in this restrained system
- Reference specific colour names AND hex codes from this document
- Use natural language (“sharper corners”, “more generous vertical rhythm”) alongside specific measurements
- When in doubt about radius, remember: 2px for form/utility, 60px for editorial pills, 6px for cards, 50%/100% for icon and portrait circles
- Keep the brand rule absolute: only one Vodafone Red element should dominate any given fold
- Default text colour to Charcoal
#25282b, never pure#000000— the warm cool tint is part of the brand - Default background to white
#ffffff; reach for charcoal#25282bfor institutional moments only - Use the universal page rhythm as a checklist: hero → red band → editorial → institutional → footer
Drop vodafone into your project, then ship the actual sections in an afternoon.
1 · install design
npx design-md add vodafone 2 · ship landing page
npx agentkit init --design vodafone enterprise light
IBM
Carbon Design System made literal — pure-white canvas, IBM Plex Sans at light 300, squar…
Docs
Install
IBM
webdesignhot
editorial serif
Financial Times
Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, pair…
Docs
Install
Financial Times
webdesignhot
editorial serif
The Atlantic
Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form ma…
Docs
Install
The Atlantic
webdesignhot