AI improving customer experience
Image-led signpost with dark overlay and compact category logic.
A design-system preview for a telecom brand built from sharp red action, flat editorial surfaces, oversized statements, and connected-world product modules.
#e60000#bd0000#820000#ffffff#f9f9f9#f2f2f2#25282b#7e7e7e#bebebe#0096ad#00697c#5e2750EVERYONE. CONNECTED
display — 126px / 800 / 0.90 / -0.008em / Inter substituteMega trends
display-lg — 90px / 800 / 0.93 / 0em / Inter substituteWe connect people to opportunity
headline-lg — 32px / 700 / 1.25 / 0em / Inter substituteInternet of Things demand soars
headline-md — 24px / 700 / 1.25 / 0em / Inter substituteCountry markets
headline-sm — 20px / 700 / 1.30 / 0em / Inter substituteConnectivity powers our lives, strengthens communities and drives progress.
body-lg — 24px / 400 / 1.50 / 0em / Inter substituteVodafone pages use calm regular body copy beside very large type and red action cues.
body — 18px / 400 / 1.56 / 0em / Inter substitute07 May 2026 · Technology · 3 minute read
caption — 14px / 400 / 1.43 / 0em / Inter substitute339m
stat — 70px / 800 / 1.17 / -0.014em / Inter substituteImage-led signpost with dark overlay and compact category logic.
White business card with a border, direct copy, and product-first hierarchy.
Red field as a strong brand interruption, not a subtle tint.
Dark editorial section for mega trends, media, and connected-world stories.
40+
Stat panels turn data into brand moments.
Navigation signposts use structured lists, compact text, and useful imagery.
Concentric signal shapes and bright nodes suggest connected devices without decorative fluff.
TechnologyPublic policyPartnersFooter and investor surfaces use practical dark panels, tab-like labels, and compact market data.
Full-bleed media uses minimal pill controls and dark overlays so display text stays readable.
sm 6pxCards and imagesmd 12pxBenefit cardslg 24pxLarge panelsxl 40pxLarge brand surfacespillCTAs and iconsThis brand uses flat surfaces. Depth comes from color contrast, huge type, media overlays, borders, and red action fields, not decorative shadows.
shadow: noneDefault card and panel mode.
modal onlyUse only for overlays or utility popovers.
rare overlayNot a normal editorial card style.
:root {
--brand-primary: #e60000;
--brand-accent-hover: #bd0000;
--brand-accent-pressed: #820000;
--brand-ink: #25282b;
--brand-muted: #7e7e7e;
--brand-canvas: #ffffff;
--brand-surface-alt: #f9f9f9;
--brand-surface-muted: #f2f2f2;
--brand-border: #bebebe;
--brand-focus: #0096ad;
--brand-teal: #00697c;
--brand-plum: #5e2750;
--font-brand: "Inter", Arial, Helvetica, sans-serif;
--type-display: clamp(58px, 10vw, 126px);
--type-stat: clamp(52px, 6vw, 70px);
--radius-sm: 6px;
--radius-md: 12px;
--radius-pill: 9999px;
--space-md: 32px;
--space-section: 96px;
--button-primary-bg: var(--brand-primary);
--button-primary-hover: var(--brand-accent-hover);
--card-radius: var(--radius-sm);
--card-shadow: none;
--focus-ring: 2px solid var(--brand-focus);
}