Vodafone

Overview

Vodafone is a global telecom super-brand and its web surface delivers exactly that posture: heroic editorial photography, occasionally cropping a portrait so tight only an eye line and a phone hand are visible, with a single colossal uppercase headline floating on top in the brand's proprietary heavy display weight. The page reads like a campaign poster more than a corporate site, then breaks into a calmer content rhythm of light-canvas story cards and a single red marker (the iconic speechmark logo) drawing the eye to the brand's centre of gravity. There is no second accent colour competing — the entire decorative palette is `{colors.primary}` Vodafone red, near-black `{colors.ink}`, and the surrounding white and grayscale neutrals.

Type is the second decisive voice. Vodafone's custom display sans (extracted as `Vodafone`) carries every headline at impossibly heavy weight 800 in upper case for hero scale (`{typography.display-hero}` 144 px, `{typography.display-xxl}` 126 px) and at lighter weight 300 for the sub-displays that follow. Body text stays in the same family at weight 400 with neutral tracking. The contrast between display weight 800 and display weight 300 IS the brand's typographic story: a shout, then a calm sentence.

Every interactive CTA renders as a generously rounded pill (`{rounded.pill-lg}` 60 px) — Vodafone has never used a square button on its marketing surface in years, and the brand's pill scale ladder runs from 32 px (badge pills) through 60 px (CTA pills) up to 9999 px (icon circular containers). Cards stay gentler at `{rounded.card}` 6 px.

**Key Characteristics:**

• A single primary CTA color `{colors.primary}` (`#e60000`) — Vodafone Red. Pill-filled for primary, pill-outline for secondary. No third button variant.
• Massive uppercase display weight 800 (`{typography.display-hero}` and siblings) is the brand's signature. The 300-weight headline siblings (`{typography.display-lg}` / `{typography.display-md}`) handle calmer secondary moments.
• The `speechmark-logo-orb` — a red square hosting Vodafone's quotation-mark icon — is the only piece of decorative chrome that's not a CTA. It anchors the brand's centre of every page.
• Pill geometry on every interactive shape — `{rounded.pill-lg}` 60 px for buttons, `{rounded.pill-md}` 32 px for inline badges. Card chrome stays at `{rounded.card}` 6 px.
• A two-band page rhythm — `{colors.ink}` dark hero / `{colors.canvas}` light content. No mid-band greys; the brand uses surface contrast, not soft neutrals, for elevation.
• Editorial photography (real portraits, real cities, real cabling) is the only consistent decorative system — no illustration, no atmospheric gradients.

Colors

Brand & Accent

• **Vodafone Red** (`{colors.primary}` — `#e60000`): The single brand accent. Every primary CTA pill, every speechmark logo, every conversion target. The most iconic red in telecom — never desaturated, never used at scale for body fills (reserved for high-attention surfaces).

Surface

• **Canvas** (`{colors.canvas}` — `#ffffff`): The default light content background.
• **Canvas Soft** (`{colors.canvas-soft}` — `#f2f2f2`): A near-white tint used as the badge-chip background.
• **Ink** (`{colors.ink}` — `#25282b`): The brand's near-black surface — used as the dark hero band, the nav background, and the footer fill. Doubles as the primary text color on light surfaces.

Text

• **Ink** (`{colors.ink}` — `#25282b`): Every heading and body paragraph on light surfaces.
• **Body** (`{colors.body}` — `#7e7e7e`): Secondary body text on light surfaces — captions, metadata, supporting copy.
• **Mute** (`{colors.mute}` — `#bebebe`): The lowest-priority text color — placeholder text, low-key footer links.
• **On Dark** (`{colors.on-dark}` — `#ffffff`): All text on `{colors.ink}` surfaces (hero, footer, nav).

Semantic

The brand does not maintain a separate semantic palette. The primary red doubles as validation / destructive signal when needed; success / warning use are reserved for in-product contexts and are not part of the documented marketing system.

Typography

Font Family

A single custom face carries the entire system: **Vodafone**, the brand's proprietary display sans. The face spans weights 300 (light), 400 (regular), 600, 700, and 800 — every role in the system pulls from this one family. There is no mono companion; technical labels (rare on the marketing surface) borrow the same face at smaller sizes.

The icomoon icon-font is loaded for proprietary glyphs but does not render as a typographic role.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-hero}` | 144px | 800 | 114px | -1px | The hero stencil (`"STAY CONNECTED"`) — uppercase, ultra-tight tracking, brand's signature size. |

| `{typography.display-xxl}` | 126px | 800 | 113px | -1px | Slightly smaller hero variant. |

| `{typography.display-xl}` | 90px | 800 | 84px | 0 | Mid-hero scale. |

| `{typography.display-lg}` | 48px | 300 | 52px | 0 | Section-headline sub-display in the lighter weight. |

| `{typography.display-md}` | 40px | 300 | 44px | 0 | Sub-section displays. |

| `{typography.display-sm}` | 32px | 700 | 40px | 0 | Card headings, story-card titles. |

| `{typography.display-xs}` | 24px | 700 | 24px | 0 | Inline display micro-headings. |

| `{typography.eyebrow-uppercase}` | 16px | 800 | 24px | 0 | Uppercase eyebrow tags above section headlines. |

| `{typography.body-lg}` | 22px | 400 | 24px | 0 | Lead body paragraphs. |

| `{typography.body-md}` | 18px | 400 | 28px | 0 | Default paragraph body. |

| `{typography.body-md-strong}` | 18px | 600 | 28px | 0 | Bolded inline body. |

| `{typography.body-sm}` | 16px | 400 | 20px | 0 | Secondary body. |

| `{typography.body-sm-strong}` | 16px | 700 | 22px | 0 | Bolded short body. |

| `{typography.caption}` | 14px | 400 | 16px | 0 | Captions, fine print. |

| `{typography.caption-strong}` | 14px | 700 | 21px | 0 | Bold captions, badge labels. |

| `{typography.caption-uppercase}` | 12px | 600 | 16px | 0.57px | Uppercase metadata, footer eyebrows. |

| `{typography.button-md}` | 18px | 400 | 28px | 0 | Default button label. |

Principles

• **Weight 800 + uppercase = hero voice.** This is the entire reason the brand reads as a billboard rather than a tech site.
• **Weight 300 = the calmer secondary voice.** Used at 40 – 48 px for sub-displays; never below 24 px to keep legibility.
• **Single family throughout.** The brand never mixes a serif or a mono into the typographic system. Consistency is the calm.
• **Tracking stays tight at display sizes.** `-1px` at 144 px is the brand's calibration; reverting to neutral tracking softens the stencil look.

Note on Font Substitutes

The Vodafone display sans is proprietary. Open-source substitutes:

• **Display sans** — *Inter* weight 800 at hero scale with `letter-spacing: -1px` is the closest free match. *Geist* weight 700–800 is the second-best.
• **Lighter display weight (300)** — *Inter* weight 300 holds its line-height well at 48 px display sizes.

Layout

Spacing System

• **Base unit**: 4 px (mostly multiples of 4; a few 5/7 px appear inside icon-padding compensation).
• **Tokens**: `{spacing.xxs}` 2 px · `{spacing.xs}` 4 px · `{spacing.sm}` 8 px · `{spacing.md}` 12 px · `{spacing.lg}` 16 px · `{spacing.xl}` 20 px · `{spacing.2xl}` 24 px · `{spacing.3xl}` 32 px.
• **Section padding**: hero bands and content bands use `{spacing.3xl}` 32 px gutters; vertical spacing inside hero is fluid (fill-the-band).
• **Card interior padding**: story cards use `{spacing.lg}` 16 px around image + headline.
• **Inline gap**: button rows and chip rows use `{spacing.md}` 12 px between siblings.

Grid & Container

• Marketing content uses a wide container (effectively edge-to-edge with `{spacing.3xl}` gutters on desktop, shrinking on mobile).
• Story-card grids: 2-up at desktop, 1-up at mobile.
• Hero photography fills the viewport; the headline overlays at the top-left.

Whitespace Philosophy

The hero's massive display headline owns the whole top of the page; whitespace below is generous to let the second band breathe. Inside content cards, headline and copy hug close (`{spacing.sm}` 8 px gap), then a wider gap (`{spacing.3xl}`) before the next card. The footer band is dark and dense.

Responsive Strategy

#### Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 600px | Hero display scales down to ~64 px; story-card grid drops to 1-up; nav collapses to hamburger. |

| Tablet | 600–1023px | Story-card grid 2-up; display headlines drop to 90 – 110 px. |

| Desktop | 1024–1399px | Full display headline at 126 – 144 px; 2-up story grid. |

| Ultra-wide | ≥ 1400px | Container caps at ~1400 px; bands stay edge-to-edge in colour. |

#### Touch Targets

The `button-primary` pill renders at ~52 px tall (12 px vertical padding + 28 px line-height). All buttons comfortably meet WCAG AAA at every breakpoint.

#### Collapsing Strategy

• **Nav**: full link row at desktop. Collapses to a hamburger menu at mobile; the menu opens as a dark overlay with the same link list stacked.
• **Hero**: the massive display headline scales fluidly. At mobile, the photography crop tightens to the figure's face only.
• **Story-card grid**: 2-up → 1-up at the breakpoint above.
• **Speechmark logo orb**: stays at consistent size relative to surrounding content; never shrinks below ~48 px.

#### Image Behavior

• **Hero photography**: full-bleed 16:9 or 4:3 portraits at desktop; tighter crops at mobile.
• **Story-card thumbnails**: 16:9 landscape inside `{rounded.card}` 6 px chrome.
• **Speechmark orb**: always rendered as the red SVG quote-mark icon, never substituted.
• **Logo bar (if present on partner pages)**: monochrome SVGs at consistent height.

Elevation & Depth

| Level | Treatment | Use |

|---|---|---|

| Level 0 — Flat | No shadow, no border. | Default for most cards and panels — surface contrast does the elevation work. |

| Level 1 — Hairline | 1 px solid `{colors.ink}` border. | Form inputs, the `divider-on-dark` between footer columns. |

| Level 2 — Border on Dark | 1 px solid `{colors.on-dark}` border on `{colors.ink}` surfaces. | Outline buttons sitting on the dark hero band. |

The brand does not use soft drop shadows; depth comes from polarity-flip between `{colors.ink}` and `{colors.canvas}` bands.

Decorative Depth

• **Editorial photography**: the hero photo (real-person portrait or environment shot) is the brand's only true atmospheric effect.
• **Speechmark logo orb as visual anchor**: the red orb hosting the quote-mark icon acts as a single point of focal-depth in the centre of the otherwise-flat content rhythm.

Shapes

Border Radius Scale

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Full-bleed hero bands, footer, banner strips. |

| `{rounded.xs}` | 1px | Tightest inline indicator (rarely used). |

| `{rounded.sm}` | 6px | The brand's canonical content radius — applied to images and inputs. |

| `{rounded.card}` | 6px | Card chrome and image frames (alias for `sm`). |

| `{rounded.pill-md}` | 32px | Badge / chip pills. |

| `{rounded.pill-lg}` | 60px | The brand's signature CTA pill — every primary and secondary button. |

| `{rounded.full}` | 9999px | Circular icon containers (e.g., video play/pause). |

Photography Geometry

• Hero portraits: edge-to-edge 16:9 or 4:3 with no internal frame.
• Story-card thumbnails: 16:9 landscape inside `{rounded.card}` chrome.
• Speechmark logo orb: square with `{rounded.sm}` corners (visually a tilted-square mark; the SVG mark itself fills the orb).

Components

Buttons

**`button-primary`** — the red pill CTA, brand's primary conversion target.

• Background `{colors.primary}`, text `{colors.on-primary}`, 1 px solid `{colors.primary}` border, label set in `{typography.button-md}`, padding `{spacing.md} {spacing.2xl}`, shape `{rounded.pill-lg}` 60 px.

**`button-outline-red`** — the secondary pill, red-text-on-white with red border.

• Background `{colors.canvas}`, text `{colors.primary}`, 1 px solid `{colors.primary}` border, same label / padding / shape as `button-primary`.

**`button-outline-dark`** — the tertiary pill, ink-text-on-white with ink border.

• Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.ink}` border, same label / padding / shape.

**`button-icon-circular`** — the round white icon button (video play / pause / chevron).

• Background `{colors.canvas}`, ink icon, 1 px solid `{colors.canvas}` outline (effectively borderless), shape `{rounded.full}`.

Cards & Containers

**`card-content`** — the default story-card chrome.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.lg}`, shape `{rounded.card}` 6 px. Hosts a 16:9 thumbnail at the top + headline + caption.

**`card-hero`** — the slightly larger card variant used as the lead story.

• Same chrome as `card-content` but headline scales to `{typography.display-sm}`.

Inputs & Forms

**`text-input`** — the canonical text input.

• Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.ink}` border, body in `{typography.body-sm}`, padding `{spacing.md} {spacing.lg}`, shape `{rounded.sm}` 6 px.

Navigation

**`nav-bar`** — the dark top nav, fixed to the page top.

• Background `{colors.ink}`, text `{colors.on-dark}`, padding `{spacing.lg} {spacing.3xl}`. Layout: logo left, link row right with login / search affordances.

**`nav-link`** — the link items inside `nav-bar`.

• Text `{colors.on-dark}`, set in `{typography.body-sm}`.

**`footer`** — the dark footer band.

• Background `{colors.ink}`, text `{colors.on-dark}`, padding `{spacing.3xl} {spacing.3xl}`. Body in `{typography.body-sm}`; column eyebrows in `{typography.caption-uppercase}`.

Signature Components

**`hero-band-dark`** — the dark navy/ink hero band hosting the massive display headline.

• Background `{colors.ink}` with full-bleed editorial photography overlay at reduced opacity; text `{colors.on-dark}`; padding `{spacing.3xl} {spacing.3xl}`. Headline in `{typography.display-hero}` (uppercase, weight 800).

**`hero-band-red`** — the rare full-bleed red hero used on signature campaigns.

• Background `{colors.primary}`, text `{colors.on-primary}`, padding `{spacing.3xl} {spacing.3xl}`. Headline in `{typography.display-xl}`.

**`content-band-light`** — the white content band that follows every hero.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.3xl} {spacing.3xl}`. Section headline in `{typography.display-md}` or `{typography.display-lg}` (weight 300).

**`speechmark-logo-orb`** — the red square hosting Vodafone's quotation-mark icon. The brand's visual anchor.

• Background `{colors.primary}`, white icon glyph, shape `{rounded.sm}`. Acts as a focal element between content bands, often near the centre of long pages.

**`badge-chip`** — the inline metadata pill used for category tags inside story cards.

• Background `{colors.canvas-soft}`, text `{colors.ink}`, label in `{typography.caption-strong}`, padding `{spacing.xs} {spacing.md}`, shape `{rounded.pill-md}` 32 px.

**`divider-on-dark`** — the 1 px hairline used between sections / columns on dark surfaces.

• 1 px solid `{colors.on-dark}` (often at 25 % opacity at the component level).

Examples (illustrative)

> Auto-derived kit-mirror demonstration surfaces (`scripts/derive-examples-block.mjs`). Each `ex-*` entry references brand-native primitives so downstream consumers (`/preview-design`, `/generate-kit`) re-skin the same 10 surfaces consistently. `TO_FILL` markers indicate missing primitives — resolve in the LLM judgment pass.

**`ex-pricing-tier`** — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

• Properties: `backgroundColor`, `textColor`, `borderColor`, `rounded`, `padding`

**`ex-pricing-tier-featured`** — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).

• Properties: `backgroundColor`, `textColor`, `rounded`, `padding`

**`ex-product-selector`** — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).

• Properties: `backgroundColor`, `rounded`, `padding`

**`ex-cart-drawer`** — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).

• Properties: `backgroundColor`, `rounded`, `padding`, `item-divider`

**`ex-app-shell-row`** — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.

• Properties: `backgroundColor`, `activeIndicator`, `rounded`, `padding`

**`ex-data-table-cell`** — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.

• Properties: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder`

**`ex-auth-form-card`** — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.

• Properties: `backgroundColor`, `rounded`, `padding`

**`ex-modal-card`** — Modal dialog surface — same chrome as feature-card with elevated shadow.

• Properties: `backgroundColor`, `rounded`, `padding`

**`ex-empty-state-card`** — Empty-state illustration frame.

• Properties: `backgroundColor`, `rounded`, `padding`, `captionTypography`

**`ex-toast`** — Toast notification surface — feature-card shape + medium shadow.

• Properties: `backgroundColor`, `rounded`, `padding`, `typography`

Do's and Don'ts

Do

• Reserve `{colors.primary}` Vodafone Red for primary CTAs and the `speechmark-logo-orb`. Every conversion target uses the red pill.
• Set hero headlines in `{typography.display-hero}` weight 800 UPPERCASE with tight `-1px` tracking. That stencil look IS the brand voice.
• Use `{rounded.pill-lg}` 60 px on every interactive pill. The brand never uses square corners on CTAs.
• Cycle page surfaces in `{colors.ink}` dark hero → `{colors.canvas}` light content → `{colors.ink}` footer. Surface contrast is the depth cue.
• Pair editorial portrait photography with the massive display headline overlay — that combination IS the brand's signature.
• Render the speechmark logo orb at consistent size relative to surrounding content — it's the brand's centre of gravity on every page.

Don't

• Don't introduce a second accent colour. The brand operates with red + ink + grayscale only.
• Don't render headlines in sentence case at hero scale. Hero display IS uppercase weight 800.
• Don't render the primary CTA as a square rectangle. The 60 px pill is non-negotiable.
• Don't drop a soft drop-shadow on cards. The brand relies on surface-colour contrast, not shadow.
• Don't substitute the speechmark logo orb with a wordmark or a different shape. The orb is the iconic mark.
• Don't pair the weight 800 display face with letter-spacing 0 at 144 px — the `-1px` tracking is part of the brand's calibration.

개요

Vodafone은 글로벌 통신 슈퍼 브랜드이며 웹 표면은 바로 그러한 자세를 제공합니다. 영웅적인 사설 사진, 때로는 눈선과 전화 손만 보일 정도로 인물 사진을 자르고 브랜드 고유의 무거운 디스플레이 무게 위에 하나의 거대한 대문자 헤드라인이 떠 있습니다. 페이지는 기업 사이트라기보다는 캠페인 포스터처럼 읽혀지며, 밝은 캔버스 스토리 카드와 단일 빨간색 마커(상징적인 스피치마크 로고)가 브랜드의 무게 중심에 시선을 끄는 차분한 콘텐츠 리듬으로 나뉩니다. 경쟁하는 두 번째 강조 색상은 없습니다. 전체 장식 팔레트는 `{colors.primary}` Vodafone 빨간색, 검정색에 가까운 `{colors.ink}`, 주변 흰색 및 회색조 중성색입니다.

유형은 두 번째 결정적인 목소리입니다. Vodafone의 맞춤형 디스플레이 sans(`Vodafone`으로 추출됨)는 모든 헤드라인을 히어로 스케일(`{typography.display-hero}` 144px, `{typography.display-xxl}` 126px)의 경우 대문자로 엄청나게 무거운 무게 800으로, 후속 하위 디스플레이의 경우 더 가벼운 무게 300으로 표시합니다. 본문 텍스트는 중립 추적을 사용하여 가중치 400에서 동일한 계열로 유지됩니다. 디스플레이 무게 800과 디스플레이 무게 300의 대비는 브랜드의 타이포그래피 스토리입니다. 즉, 외침과 차분한 문장입니다.

모든 대화형 CTA는 넉넉한 둥근 알약(`{rounded.pill-lg}` 60px)으로 렌더링됩니다. Vodafone은 수년간 마케팅 표면에 사각형 버튼을 사용한 적이 없으며 브랜드의 알약 규모 사다리는 32px(배지 알약)에서 60px(CTA 알약), 최대 9999px(아이콘 원형 컨테이너)까지 실행됩니다. 카드는 `{rounded.card}` 6px에서 더 부드럽게 유지됩니다.

**주요 특징:**

• 단일 기본 CTA 색상 `{colors.primary}`(`#e60000`) — Vodafone Red. 1차의 경우 알약으로 채워져 있고 2차의 경우 알약 개요가 표시됩니다. 세 번째 버튼 변형이 없습니다.
• 대규모 대문자 디스플레이 무게 800(`{typography.display-hero}` 및 형제)은 브랜드의 시그니처입니다. 300 가중치 헤드라인 형제(`{typography.display-lg}` / `{typography.display-md}`)는 차분한 보조 순간을 처리합니다.
• Vodafone의 따옴표 아이콘을 호스팅하는 빨간색 사각형인 'speechmark-logo-orb'는 CTA가 아닌 유일한 장식용 크롬 조각입니다. 이는 모든 페이지의 브랜드 중심을 정박합니다.
• 모든 대화형 모양의 알약 형상 - 버튼의 경우 `{rounded.pill-lg}` 60px, 인라인 배지의 경우 `{rounded.pill-md}` 32px. 카드 크롬은 `{rounded.card}` 6픽셀로 유지됩니다.
• 2밴드 페이지 리듬 — `{colors.ink}` 다크 히어로 / `{colors.canvas}` 라이트 콘텐츠. 중간 대역 회색이 없습니다. 브랜드는 입체감을 위해 부드러운 중성색이 아닌 표면 대비를 사용합니다.
• 편집 사진(실제 초상화, 실제 도시, 실제 케이블링)은 일러스트레이션이나 대기 그라데이션이 없는 유일하게 일관된 장식 시스템입니다.

색상

브랜드 및 액센트

• **Vodafone Red** (`{colors.primary}` — `#e60000`): 단일 브랜드 액센트입니다. 모든 기본 CTA 알약, 모든 스피치마크 로고, 모든 전환 타겟. 통신 업계에서 가장 상징적인 빨간색입니다. 절대 채도를 낮추지 않으며 신체 채우기용으로 대규모로 사용하지도 않습니다(주의가 많이 드는 표면용으로 예약됨).

표면

• **캔버스** (`{colors.canvas}` — `#ffffff`): 기본 밝은 콘텐츠 배경입니다.
• **캔버스 소프트**(`{colors.canvas-soft}` — `#f2f2f2`): 배지 칩 배경으로 사용되는 흰색에 가까운 색조입니다.
• **잉크**(`{colors.ink}` — `#25282b`): 브랜드의 검은색에 가까운 표면 - 다크 히어로 밴드, 탐색 배경 및 바닥글 채우기로 사용됩니다. 밝은 표면의 기본 텍스트 색상으로도 사용됩니다.

텍스트

• **잉크** (`{colors.ink}` — `#25282b`): 밝은 표면의 모든 제목과 본문 단락.
• **본문**(`{colors.body}` — `#7e7e7e`): 밝은 표면의 보조 본문 텍스트 — 캡션, 메타데이터, 지원 사본.
• **음소거** (`{colors.mute}` — `#bebebe`): 우선순위가 가장 낮은 텍스트 색상 — 자리 표시자 텍스트, 로우키 바닥글 링크.
• **어두운 곳**(`{colors.on-dark}` — `#ffffff`): `{colors.ink}` 표면(영웅, 바닥글, 탐색)의 모든 텍스트입니다.

의미론

브랜드는 별도의 의미 팔레트를 유지하지 않습니다. 기본 빨간색은 필요할 때 확인/파괴 신호로 사용됩니다. 성공/경고 사용은 제품 내 컨텍스트용으로 예약되어 있으며 문서화된 마케팅 시스템의 일부가 아닙니다.

타이포그래피

글꼴 계열

하나의 맞춤형 페이스가 전체 시스템을 전달합니다. **Vodafone**, 브랜드 독점 디스플레이가 포함되어 있습니다. 페이스의 무게는 300(라이트), 400(레귤러), 600, 700, 800입니다. 시스템의 모든 역할은 이 하나의 제품군에서 가져옵니다. 모노 동반자는 없습니다. 기술 라벨(마케팅 표면에서는 드물다)은 더 작은 크기에서도 같은 얼굴을 차용합니다.

icomoon 아이콘 글꼴은 독점 글리프용으로 로드되지만 인쇄상의 역할로 렌더링되지는 않습니다.

계층 구조

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | 사용 |

|---|---|---|---|---|---|

| `{typography.display-hero}` | 144px | 800 | 114px | -1픽셀 | 영웅 스텐실(`"STAY CONNECTED"`) — 대문자, 매우 단단한 추적, 브랜드 시그니처 크기. |

| `{typography.display-xxl}` | 126px | 800 | 113px | -

概要

Vodafone は世界的な通信スーパー ブランドであり、そのウェブ サーフェスはまさにその姿勢を示しています。英雄的なエディトリアル写真、時にはポートレートをきつく切り取って、視線と電話の手だけが見えるようにし、ブランド独自の重いディスプレイ ウェイトの上部に 1 つの巨大な大文字の見出しが浮かんでいます。このページは、企業サイトというよりはキャンペーン ポスターのように見えますが、その後、ライト キャンバスのストーリー カードと、ブランドの重心に目を引く 1 つの赤いマーカー (象徴的なスピーチマーク ロゴ) の穏やかなコンテンツ リズムに突入します。競合する 2 番目のアクセント カラーはありません。装飾パレット全体は、ボーダフォン レッドの「{colors.primary}」、黒に近い `{colors.ink}`、そして周囲の白とグレースケールのニュートラルです。

タイプは2番目の決定的な音声です。 Vodafone のカスタム ディスプレイ サンズ (`Vodafone` として抽出) は、すべての見出しをヒーロー スケールでは大文字でありえないほど重い 800 ピクセル (`{typography.display-hero}` 144 ピクセル、`{typography.display-xxl}` 126 ピクセル) で表示し、その後のサブディスプレイでは軽い 300 ピクセルで表示します。本文テキストは、ニュートラル トラッキングを使用してウェイト 400 で同じファミリーに留まります。ディスプレイ ウェイト 800 とディスプレイ ウェイト 300 のコントラストは、ブランドのタイポグラフィー ストーリーです。叫び声の後に穏やかな文章が続きます。

すべてのインタラクティブ CTA は、寛大な丸みを帯びた錠剤 (`{rounded.pill-lg}` 60 ピクセル) としてレンダリングされます。ボーダフォンはここ数年、マーケティング画面で四角いボタンを使用したことがありません。また、ブランドの錠剤スケールのはしごは、32 ピクセル (バッジの錠剤) から 60 ピクセル (CTA 錠剤)、最大 9999 ピクセル (アイコンの円形コンテナー) まで続きます。カードは `{rounded.card}` 6 ピクセルでより穏やかなままになります。

**主な特徴:**

• 単一のプライマリ CTA カラー `{colors.primary}` (`#e60000`) — Vodafone Red。プライマリには錠剤が充填され、セカンダリには錠剤の輪郭が表示されます。 3 番目のボタンのバリエーションはありません。
• 巨大な大文字ディスプレイウェイト 800 (`{typography.display-hero}` とその兄弟) はブランドのシグネチャーです。 300 重みの見出しの兄弟 (`{typography.display-lg}` / `{typography.display-md}`) は、より穏やかな二次的な瞬間を処理します。
• `speechmark-logo-orb` — Vodafone の引用符アイコンをホストする赤い四角 — は、CTA ではない唯一の装飾的なクロム部分です。すべてのページのブランドの中心を固定します。
• すべてのインタラクティブなシェイプのピル ジオメトリ — ボタンの場合は `{rounded.pill-lg}` 60 ピクセル、インライン バッジの場合は `{rounded.pill-md}` 32 ピクセル。カードのクロムは `{rounded.card}` 6 ピクセルのままです。
• 2 バンドのページ リズム — `{colors.ink}` ダーク ヒーロー / `{colors.canvas}` ライト コンテンツ。中間帯域のグレーはありません。ブランドは、高揚感を表現するために、ソフトなニュートラルではなく、表面のコントラストを使用します。
• エディトリアル写真 (実際のポートレート、実際の都市、実際のケーブル配線) が唯一の一貫した装飾システムです。イラストや雰囲気のグラデーションはありません。

色

ブランドとアクセント

• **Vodafone Red** (`{colors.primary}` — `#e60000`): 単一ブランドのアクセント。すべての主要な CTA ピル、すべてのスピーチマーク ロゴ、すべてのコンバージョン ターゲット。通信業界で最も象徴的な赤 - 彩度を下げることはなく、ボディの塗りつぶしに大規模に使用されることもありません (注目度の高いサーフェス用に予約されています)。

表面

• **キャンバス** (`{colors.canvas}` — `#ffffff`): デフォルトのライト コンテンツの背景。
• **キャンバス ソフト** (`{colors.canvas-soft}` — `#f2f2f2`): バッジ チップの背景として使用される白に近い色合い。
• **インク** (`{colors.ink}` — `#25282b`): ブランドの黒に近い表面 — ダーク ヒーロー バンド、ナビゲーションの背景、フッターの塗りつぶしとして使用されます。ライト サーフェス上のプライマリ テキスト カラーとして使用されます。

テキスト

• **インク** (`{colors.ink}` — `#25282b`): 明るい表面上のすべての見出しと本文の段落。
• **本文** (`{colors.body}` — `#7e7e7e`): ライト サーフェス上の 2 番目の本文テキスト — キャプション、メタデータ、サポート コピー。
• **ミュート** (`{colors.mute}` — `#bebebe`): 優先度の最も低いテキストの色 — プレースホルダー テキスト、控えめなフッター リンク。
• **オンダーク** (`{colors.on-dark}` — `#ffffff`): `{colors.ink}` 表面上のすべてのテキスト (ヒーロー、フッター、ナビゲーション)。

セマンティック

このブランドは、別個のセマンティック パレットを維持していません。プライマリの赤は、必要に応じて検証/破壊的な信号としても機能します。成功/警告の使用は製品内で使用されるものであり、文書化されたマーケティング システムの一部ではありません。

タイポグラフィー

フォントファミリー

単一のカスタム フェイスがシステム全体をサポートします。**Vodafone**、ブランド独自のディスプレイはありません。フェースのウェイトは 300 (ライト)、400 (レギュラー)、600、700、800 におよび、システム内のすべての役割はこの 1 つのファミリーから得られます。モノラルのコンパニオンはありません。テクニカル ラベル (マーケティング面では珍しい) は、小さいサイズでも同じ顔を借りています。

icomoon アイコン フォントは独自のグリフ用にロードされますが、活版印刷の役割としてはレンダリングされません。

階層

|トークン |サイズ |重量 |行の高さ |文字間隔 |使用 |

|---|---|---|---|---|---|

| `{typography.display-hero}` | 144ピクセル | 800 | 114ピクセル | -1ピクセル |ヒーロー ステンシル (「STAY CONNECTED」) - 大文字、超タイト トラッキング、ブランドの特徴的なサイズ。 |

| `{typography.display-xxl}` | 126ピクセル | 800 | 113ピクセル | -