Verizon Design System

Overview

Verizon's marketing site operates on a retail axiom that most telecom brands abandon: Achromatic authority. The entire primary surface — buttons, nav, product headings, card borders — runs in pure black and white. The brand-registered crimson is held so far in reserve that only active tab indicators carry it. Where T-Mobile saturates the above-fold hero in magenta and AT&T tints its whole canvas in a middle blue, Verizon treats color as a scarcity and lets the retail offer carry the weight.

The one exception is the deal-badge system. Electric neon-yellow (#f8ff3c) appears on promotional chips, savings callouts, and limited-time-offer banners — the single chromatic signal in a page otherwise built on black ink and white canvas. The yellow reads instantly against any context precisely because every other surface has surrendered color. This is not accidental; it is a conversion mechanism. The neon badge says "savings" in a retail page without needing a label.

Typography is a single-weight statement: weight 700 runs from the 48px hero headline down to the 16px button label without pause. Verizon NHG DS at 700 is the page's voice — confident, unhesitating, commercial. There is no light-weight display tier, no weight-300 magazine moment. Three font families divide labor: NHG DS for everything that needs to be read, BrandFont-Display for everything that needs to be clicked, and the legal NHG eTX for fine print.

Key Characteristics:

• Pure ink black (#000000) dominates with 933 occurrences — 472 as text, 443 as border.
• 44px fully-rounded pill geometry on primary CTAs — the warmest shape in an otherwise sharp retail grid.
• Electric neon-yellow (#f8ff3c) deal badge — the only chromatic element in a black-and-white marketing system, reserved for savings callouts.
• Crimson (#ee001e) restricted to active tab indicators and inline brand marks — 6 total occurrences, none on CTAs.
• Three proprietary font families: NHG DS (headings + body), BrandFont-Display (nav + buttons), NHG eTX (legal fine print).
• Weight-700 from 48px display down to 16px buttons — no lighter display weight exists on the page.
• 1232px content well with 24px gutters; product cards 4-up with 1px black hairline borders.
• Hero CTA uses warm cream fill (#f8f3e9) — a deliberate inversion against the photographic background.

Colors

Brand

• Crimson ({colors.primary} — #ee001e): frequency 6. Used as background (4), text (1), border (1). The registered Verizon brand mark — appears on active tab indicators in the nav strip. Not used on primary CTAs or hero elements. Wired as --vui-theme-color-element-brand and --vui-theme-color-tabs-indicator-highlight-selected. The rarity is the discipline.

Surface

• Ink ({colors.ink} — #000000): frequency 933. Used as text (472), border (443), background (5), shadow (13). The dominant color across the entire page — primary button fill, card borders, all body text, focus rings. Wired across 15 CSS custom properties including --vui-theme-color-button-primary-background and --vui-theme-color-element-primary. Not near-black or charcoal: pure #000000.
• Canvas ({colors.canvas} — #ffffff): frequency 130. Used as text (55), background (24), border (51). Page floor, primary button text color, icon fills. Wired as --vui-theme-color-surface and --background-color.
• Hero CTA Fill ({colors.hero-cta-fill} — #f8f3e9): frequency 15. A warm cream — the background and border color of the hero CTA pill button, providing contrast against the photographic hero background. Wired as --vz-gpt-gradient-header. Not used on any below-fold elements.

Accent

• Deal Badge ({colors.deal-badge} — #f8ff3c): frequency 11. Used as text (4), background (3), border (4). The neon-yellow promotional accent — deal badges, savings chips, limited-time-offer banners. The sole chromatic element in an achromatic system. Its high chroma reads across all device contexts without being tied to any brand narrative except "save money now."

Supporting

• Ink Secondary ({colors.ink-secondary} — #6f7171): frequency 14. Used as text (7) and border (7). Secondary labels, scrubber controls, footnote text. Wired as --vui-theme-color-element-secondary and --scrubber-color. A cool mid-gray — not warm, not blue-gray.
• Hairline ({colors.hairline} — #d8dada): wired as --border-color. The system's light-hairline variant, used for subtle dividers and table row backgrounds.
• Disabled BG ({colors.disabled-bg} — #cccccc): low-contrast fill for disabled button surfaces.

Semantic

• Success ({colors.success} — #008331): wired as --vui-theme-color-feedback-element-success and --vui-theme-color-element-savings. Used for savings and success feedback states.
• Info ({colors.info} — #006fc0): wired as --vui-theme-color-feedback-element-information. Information states.
• Error Element ({colors.error-element} — #b95319): wired as --vui-theme-color-feedback-element-error. Error states.
• Warning Element ({colors.warning-element} — #ffcd27): wired as --vui-theme-color-feedback-element-warning. Warning states.
• Feedback Success Tonal ({colors.feedback-success-tonal} — #a4e6bd): light background tint for success feedback banners.
• Feedback Warning Tonal ({colors.feedback-warning-tonal} — #ffe797): light background tint for warning feedback banners.

Typography

Font Families

The system runs three proprietary families. Verizon NHG DS (New Heritage Grotesque Display Standard) is the primary text voice — used for display headings (48px), section headings (40px / 32px / 24px), body text (14-16px), and any text that needs to be read at length. BrandFont-Display handles every interactive label: nav links (14px), button labels (16px), and UI-chrome text where tracking matters. Verizon NHG eTX (Extended Text) handles fine-print legal disclaimers at 10-11px / weight 400 — the only light-weight tier in the entire system.

Hierarchy

Principles

Weight 700 is the system's only significant weight for anything displayed above 12px. This is not an oversight — it is a retail strategy. Bold text reads faster in a scanning environment. The 0.5px letter-spacing on nav and button labels is a micro-detail that tightens BrandFont-Display at its display sizes. Inter at weight 700 with 0.5px tracking is the closest open-source substitute for both NHG DS and BrandFont-Display in their primary roles.

Layout

• Content well: 1232px max-width (--vui-root-content-well-max-width), with 24px gutters (--vui-root-content-well-margin).
• Full-bleed max: 1600px (--vui-root-max-bleed-max-width) for the hero band.
• Base unit: 8px. Major spacing values: 12px (button padding vertical), 16px (card internal), 24px (section gap), 64px (section rhythm).
• Product card grid: 4-up at desktop, each card at 12px corner radius and 1px black hairline border, 16px internal padding.
• Hero: full-bleed photographic background, content centered, headline white at 48px / 700.

Elevation

The system uses essentially no shadow tier. The 13 #000000 shadow occurrences are concentrated on the black inset-shadow that defines the focus ring treatment (--vui-theme-color-interactive-focusring). Product cards use 1px black hairline borders rather than elevation shadows — a hard-line retail convention that makes the grid feel like a printed circular rather than a floating SaaS dashboard.

Shapes

The radius scale is asymmetric: extremely soft on interactive controls (44px pill), sharply minimized on data surfaces.

• {rounded.none} 0px — hero section, full-bleed bands.
• {rounded.xs} 2px — the system's minimum rounding, used 10 times (deal badges, form inputs).
• {rounded.sm} 12px — product cards, modal dialogs.
• {rounded.md} 16px — image thumbnails, larger content tiles.
• {rounded.lg} 24px — feature callout tiles.
• {rounded.pill} 44px — primary and secondary CTA buttons, the dominant radius on the page (13 occurrences).
• {rounded.full} 9999px / 50% — avatar circles and icon buttons.

The 44px pill on CTAs sits above a 2px deal badge and a 12px card in the same layout — the contrast is intentional. The pill says "tap me" in an environment where everything else signals "read me."

Components

button-primary — Pure-black fill (#000000), white text, BrandFont-Display at 16px / 700, 44px full-pill radius, 11×24px padding. Used for all below-fold primary actions ("Shop now," "See all phones").

button-primary-hero — Warm-cream (#f8f3e9) fill, black text, same pill and padding geometry as the primary. Used in the hero panel only — the cream contrasts cleanly against the photographic background where a pure-black fill would merge with the device shadow.

button-secondary — Transparent fill, black ink text, 1px black border, same pill radius. The ghost treatment — used for secondary CTAs paired beside a primary.

top-nav — White canvas, 56px height, brand-red "verizon" wordmark at left, product nav links in the center, cart / search / account icons right. 1px black bottom rule divides nav from hero.

nav-link — Transparent background, black text at BrandFont-Display 14px / 400 / 0.5px tracking, 8×12px padding. No hover fill visible in the captured surface.

hero-heading — White text on the photographic hero background, NHG DS at 48px / 700. 0 border-radius, 16px bottom padding separating headline from sub-copy.

section-heading — Black text, NHG DS at 40px / 700. Used for "Deals & discounts," "Stay connected & save," "Looking for something else?"

body-paragraph — Black text at NHG DS 14px / 400 / 0.5px tracking. Running card descriptions and section sub-copy.

card — White surface, 1px black hairline border, 12px corner radius, 16px internal padding. Holds the product device image, pricing headline, and a primary CTA. No shadow.

deal-badge-chip — Neon-yellow (#f8ff3c) fill, black text at BrandFont-Text 12px / 400, 2px radius, 4×8px padding. The page's single chromatic element — appears only on promotional savings callouts.

category-tab — Transparent background, black text at BrandFont-Display 14px, 12px bottom padding, no bottom border in resting state.

category-tab-active — Crimson text (#ee001e) and a 2px crimson underline border. The brand color's only visible appearance in the page chrome.

text-input — White surface, black text at NHG DS 14px / 400, 2px radius, 12×16px padding, 44px height, 1px black border.

legal-caption — NHG eTX at 11px / 400, ink-secondary (#6f7171) text, no background. Used for pricing disclaimers under promotional offers.

Do's and Don'ts

Do use pure #000000 — not a near-black or charcoal — for the primary button fill. The system's conviction is total black: 933 occurrences of the same hex, zero near-duplicates. A softer off-black reads as indecision in this context.

Do reserve the neon-yellow (#f8ff3c) exclusively for savings and promotional content. It is the page's single chromatic interruption; placing it on nav, headings, or general UI elements removes its ability to signal "deal" in a scanning context.

Do hold the crimson (#ee001e) to the tab-indicator role only. Using it on buttons or hero elements breaks the achromatic authority that makes the system distinctive; it would read as a standard telco rather than as a confident network brand.

Do use the warm cream (#f8f3e9) for the hero-context CTA only. Against the photographic background it reads as an inverted primary; on the white canvas below the fold it would disappear.

Don't use a rounded corner value between 2px and 12px. The radius scale jumps from 2px (inputs and badges) to 12px (cards) — nothing in between. Introducing a 6px or 8px value softens the retail-grid aesthetic without the warmth of the pill.

Don't use weight 400 for any heading above 14px. The system runs weight 700 at every heading tier without exception; introducing a lighter weight above the body level would read as a design inconsistency against the 933-occurrence ink-black authority.

Don't use {colors.deal-badge} (#f8ff3c) as a text color at small sizes (below 14px). The neon-yellow has insufficient contrast against white at body text sizes; its 11 page occurrences are all as background fills or large-format badge text.

Don't add a tinted shadow to product cards. The 1px black hairline border is the entire elevation system — adding a box-shadow competes with the border and softens the retail-circular aesthetic the brand uses to signal "this is a deal page, not a lifestyle brand."

Known Gaps

• Hover and focus states: only the focus-ring token is captured (--vui-theme-color-interactive-focusring: #000000). Full hover, active-press, and disabled states are not exposed on the captured marketing surface.
• Dark mode: the captured page is light-only. The --vui-theme-color-buttonicon-highcontrast-background-elevated and related elevated tokens suggest a dark-surface context exists in the product app but does not appear on the marketing site.
• Motion and carousel: the product-card carousel (with previous/next arrow icons baked into CSS custom properties) animates on interaction; easing curves and duration are not captured.
• Icon library: Verizon ships its own SVG icon set via CSS custom properties (right-caret, left-caret, checkmark, warning, info, error, close, left-arrow, right-arrow). These are base64-encoded inline SVGs in the CSS variables — not external icon font references.
• Sub-brand surfaces: My Verizon dashboard, the Fios internet sub-site, and the Business section carry their own surface tokens not captured in the marketing site extraction.
• Responsive breakpoints: tablet and mobile layouts compress the 4-up card grid and collapse the top-nav to a hamburger; those breakpoint-specific changes are not captured here.