What is Verizon's primary brand color?

Verizon's registered brand color is a vivid crimson wired as --vui-theme-color-element-brand (#ee001e), but it appears only 6 times in the captured marketing page — 4 as background fills on active tab indicators and 1 each as text and border. The primary CTA button is not crimson; it is pure ink black (#000000) or a warm cream (#f8f3e9), depending on the hero context. The crimson is a brand mark, not a CTA color — a disciplined distinction most telecom brands blur. The achromatic primary button is the actual design signature of this system.

What typeface does Verizon use, and what should I use as a substitute?

Verizon runs three proprietary families. Verizon NHG DS is the primary sans for body text, headings, and display (all at weight 700). BrandFont-Display handles nav links and button labels (also at weight 700, 0.5px letter-spacing). Verizon NHG eTX appears only in fine-print legal text at 10-11px / weight 400. All three are proprietary. The closest open-source substitutes are: Helvetica Neue or Inter for NHG DS (match weight 700 exactly), and Inter for BrandFont-Display. The 0.5px letter-spacing on nav links is the key detail to preserve.

What does Verizon's primary button look like?

The primary CTA button is a 44px-height fully-rounded pill (borderRadius 44px) with an 11px top/bottom and 24px left/right padding. In the hero panel, it fills with warm cream (#f8f3e9) and uses black ink text at 16px / weight 700 in Verizon NHG DS. Below the fold, primary buttons use the pure-black (#000000) fill with white text. Secondary buttons are ghost style — transparent background, black border, black text, the same 44px pill geometry. The pill rounding is the warmest shape in an otherwise hard-edged retail grid.

What is the neon-yellow used for on Verizon's site?

The electric neon-yellow (#f8ff3c, merged from #f8ff3c and #f5ff1e) appears 11 times on the captured page — 4 as text, 3 as background fill, and 4 as border. It is exclusively a deal-badge and promotional-chip color: the 'Limited time offer' banner, price-savings callouts, and deal-highlight chips in the product card grid. It never appears on primary CTAs or nav elements. The yellow reads loudly in the mostly-achromatic page, which is the point — it signals urgency and savings at a glance in a dense retail grid.

What is Verizon's retail grid structure?

The page uses a 1232px content well (--vui-root-content-well-max-width: 1232px) with 24px gutters and a 1.5rem root grid gap. The hero is full-bleed. Below the fold, the product card grid runs 4-up on desktop (iPhone, Samsung, Google Pixel, and a trade-in promo card), each card with 16px internal padding, 12px corner radius, and 1px black hairline border. The 'Stay connected & save' section runs a 3-up icon-plus-label grid at full width. Section padding is 64px top/bottom between major bands.

Verizon Design System

Verizon's marketing-site design system as a DESIGN.md file.

About Verizon DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source verizon.com

Consumer Electronics
E-commerce & Retail

Verizon's marketing site is a retail machine dressed in black ink and white — a system where every primary CTA is a pure-black pill button, every hero headline is white text on a photographic background, and the entire below-fold canvas is white with black text. It is not a brand-first page; it is a deal-first page. The hero panel carries the product hero image (iPhone 17 Pro in a copper-orange finish) behind a black overlay, with a 48px weight-700 headline, and a cream-background pill CTA that reads "Switch to Verizon." Where T-Mobile runs on a magenta canvas and AT&T surrounds its deals with mid-blue, Verizon holds to achromatic authority: the brand speaks through the depth of the retail offer, not through a chromatic brand moment above the fold.

The DESIGN.md file captures 15 color tokens from the achromatic core — ink black, canvas white, the warm cream (#f8f3e9) used in the hero CTA, the cool mid-gray (#6f7171) used for secondary labels, the neon-yellow (#f8ff3c) used for deal-badge fills, and the brand-registered crimson (#ee001e) that appears on active tab indicators and inline brand marks. Typography tokens span three font families: Verizon NHG DS for body, display, and headings (all at weight 700), BrandFont-Display for nav links and CTA labels (weight 700, 0.5px tracking), and Verizon NHG eTX for fine-print legal captions (11px / 400). Twelve components cover the pill primary button, the black secondary ghost button, the product card, the category-tab strip, the deal-badge chip, and the text input.

Feed this file to Claude or Cursor and it reproduces Verizon's specific moves: black primary buttons instead of colored CTAs, 44px full-pill rounding on the primary action only, weight-700 display across every heading tier without exception, and the neon-yellow deal badge reserved for promotional emphasis. The system is worth studying because its achromatic discipline is commercially precise — black conveys authority and network scale; the cream hero CTA inverts cleanly against the photographic background; the neon-yellow badge cannot be missed in a grid of device cards. Each color decision has a conversion reason.

What makes it distinct

Black-binary canvaspure black ink on white canvas for every primary surface; the brand color is reserved for tab indicators and inline marks, not CTAs
Neon-yellow deal badgeelectric yellow appears on promotional chips and sale flags, the loudest color on an otherwise achromatic retail page
44px pill buttonsthe primary CTA sits at a fully-rounded 44px pill, the softest shape in a retail grid where everything else has sharp or minimal rounding
Weight-700 everywhereVerizon NHG DS runs at 700 across display (48px), section headings (40px), and sub-headings (24px); no light-weight display tier exists
Three-font splitNHG DS for headings and body, BrandFont-Display for nav and CTA labels, BrandFont-Text for legal fine print

Live at verizon.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

verizon.com

Explore Verizon

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Verizon design system FAQ

Common questions about Verizon's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Verizon — official site

Verizon's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.