@dante · Media & Consumer
Telecom super-brand kit: colossal uppercase weight-800 display headlines, ink/canvas polarity bands, and one scarlet 60px pill CTA — no second accent, no drop shadows.
A telecom super-brand that reads like a campaign poster, not a corporate site. Heroic editorial photography carries a single colossal uppercase headline in the proprietary Vodafone display sans at impossibly heavy weight 800, then the page settles into a calmer rhythm of light-canvas story cards. There is no second accent colour competing — the entire decorative palette is Vodafone Red (#e60000), near-black ink (#25282b), and surrounding white and grayscale neutrals. The red speechmark orb is the brand's centre of gravity on every page.
One primary accent and nothing else: Vodafone Red (#e60000) owns every primary CTA pill and the speechmark logo — never desaturated, never used for large body fills. Ink (#25282b) is the near-black surface for hero bands, nav, and footer, and doubles as heading/body text on light surfaces. Secondary text runs in Body Gray (#7e7e7e); placeholders and low-key links in Mute (#bebebe). Surfaces cycle between Canvas white (#ffffff) and Canvas Soft (#f2f2f2). The brand keeps no separate semantic palette — red doubles as the validation signal when one is needed.
A single custom face carries the whole system: Vodafone, spanning weights 300, 400, 600, 700, and 800. Weight 800 uppercase at 90–144px with tight -1px tracking is the hero voice — this is the entire reason the brand reads as a billboard. Weight 300 at 40–48px handles the calmer sub-displays. Body stays in the same family at weight 400 with neutral tracking. There is no serif or mono companion; consistency is the calm.
A 4px base unit scales through 8 / 12 / 16 / 24 / 32px, with hero and content bands sharing 32px gutters and a container capping near 1400px edge-to-edge. Border-radius runs from 6px on cards and inputs, through 32px badge pills, up to the signature 60px CTA pill and 9999px icon circles. Depth is never a drop shadow — it comes entirely from polarity-flip between ink dark bands and canvas light bands. Editorial photography is the only atmospheric system; no illustration, no gradients.
Every interactive CTA is a 60px pill: filled red for primary, red-outline for secondary, ink-outline for tertiary, and a borderless white circle for icon buttons. Story cards stay flat at 6px corners with a 16:9 thumbnail over a weight-700 title. Inputs carry a 1px ink hairline at 6px radius. Badges and tags ride the 32px pill. The dark nav and footer bookend the page in ink, split by 1px white hairline dividers, with the red speechmark orb anchoring the brand mark.
Derived view rendered server-side from package tokens and components — no authored copy.
#e60000#cc0000#b30000#ffffff#25282b#3a3d40#7e7e7e#bebebe#d8d8d8#ffffff#f2f2f2#ebebeb#ffffffVodafone, 'Vodafone Rg', 'Helvetica Neue', Arial, sans-serifVodafone, 'Vodafone Rg', 'Helvetica Neue', Arial, sans-serifVodafone, 'Vodafone Rg', 'Helvetica Neue', Arial, sans-serifVodafone, 'Vodafone Rg', 'Helvetica Neue', Arial, sans-serifVodafone, 'Vodafone Rg', 'Helvetica Neue', Arial, sans-serif{
"displayHero": "144px/114px",
"displayXxl": "126px/113px",
"displayXl": "90px/84px",
"displayLg": "48px/52px",
"displayMd": "40px/44px",
"displaySm": "32px/40px",
"displayXs": "24px/24px",
"eyebrow": "16px/24px",
"bodyLg": "22px/24px",
"body": "18px/28px",
"bodySm": "16px/20px",
"caption": "14px/16px",
"captionUppercase": "12px/16px"
}The signature 60px pill CTA. Filled Vodafone Red for primary, red-outline for secondary, ink-outline for tertiary — the brand never ships a square button.
Canonical single-line field on white with a 1px ink hairline border and a gentle 6px radius — the brand's only genuinely square-ish shape.
The default story-card chrome — white surface, 6px corners, a 16:9 thumbnail over a weight-700 headline and gray caption. No shadow; contrast does the elevation.
Inline metadata chip — a 32px pill on canvas-soft with a weight-700 caption label, used for category tags inside story cards.
The brand's typographic story: colossal uppercase weight-800 hero display with tight -1px tracking, then calmer weight-300 sub-displays. A shout, then a sentence.
Quiet inline links in ink with an underline-on-hover; shift to Vodafone Red for brand emphasis and white on dark ink surfaces.
The campaign-poster hero — a full-bleed ink band with editorial photography overlay, a single colossal uppercase weight-800 headline, and one red pill CTA.
The dark top nav fixed to the page — ink background, white links, the red speechmark orb at the left, and a red pill CTA at the right.
The dark, dense closing band — ink fill, white links, uppercase caption eyebrows, and 1px white hairline dividers between columns.
Big weight-800 numeric figure with a gray caption label — a billboard-scale proof point, one red figure for the hero metric.
A pull-quote led by the red speechmark orb — the brand's centre of gravity — with the body set in weight-300 sub-display.
Larger, quieter filter chip built on the 32px pill — canvas-soft for neutral, ink for inverted, used for plan and product filtering.
Round avatar with a white ring for stacking on either ink or canvas bands — used for reviews, agent chats, and team rosters.
Pill-style tab list inside a canvas-soft container — the active pill flips to white; used to switch between Mobile, Broadband, and TV plans.
A telecom super-brand that reads like a campaign poster, not a corporate site. Heroic editorial photography carries a single colossal uppercase headline in the proprietary Vodafone display sans at impossibly heavy weight 800, then the page settles into a calmer rhythm of light-canvas story cards. There is no second accent colour competing — the entire decorative palette is Vodafone Red (#e60000), near-black ink (#25282b), and surrounding white and grayscale neutrals. The red speechmark orb is the brand's centre of gravity on every page.
One primary accent and nothing else: Vodafone Red (#e60000) owns every primary CTA pill and the speechmark logo — never desaturated, never used for large body fills. Ink (#25282b) is the near-black surface for hero bands, nav, and footer, and doubles as heading/body text on light surfaces. Secondary text runs in Body Gray (#7e7e7e); placeholders and low-key links in Mute (#bebebe). Surfaces cycle between Canvas white (#ffffff) and Canvas Soft (#f2f2f2). The brand keeps no separate semantic palette — red doubles as the validation signal when one is needed.
A single custom face carries the whole system: Vodafone, spanning weights 300, 400, 600, 700, and 800. Weight 800 uppercase at 90–144px with tight -1px tracking is the hero voice — this is the entire reason the brand reads as a billboard. Weight 300 at 40–48px handles the calmer sub-displays. Body stays in the same family at weight 400 with neutral tracking. There is no serif or mono companion; consistency is the calm.
A 4px base unit scales through 8 / 12 / 16 / 24 / 32px, with hero and content bands sharing 32px gutters and a container capping near 1400px edge-to-edge. Border-radius runs from 6px on cards and inputs, through 32px badge pills, up to the signature 60px CTA pill and 9999px icon circles. Depth is never a drop shadow — it comes entirely from polarity-flip between ink dark bands and canvas light bands. Editorial photography is the only atmospheric system; no illustration, no gradients.
Every interactive CTA is a 60px pill: filled red for primary, red-outline for secondary, ink-outline for tertiary, and a borderless white circle for icon buttons. Story cards stay flat at 6px corners with a 16:9 thumbnail over a weight-700 title. Inputs carry a 1px ink hairline at 6px radius. Badges and tags ride the 32px pill. The dark nav and footer bookend the page in ink, split by 1px white hairline dividers, with the red speechmark orb anchoring the brand mark.
DESIGN.mdtext/markdownSKILL.mdtext/markdowntokens/colors.jsonapplication/jsontokens/typography.jsonapplication/jsontokens/components.jsonapplication/jsonadapters/tokens.csstext/cssadapters/html/index.htmltext/htmladapters/html/styles.csstext/css