What is Peacock's primary brand color?

Peacock does not have a single brand voltage in the conventional sense — the brand identity is the multicolor six-dot feather column beside the wordmark, drawn from the network's peacock-feather palette of yellow, red, purple, blue, and green. On the captured chrome the only declared structural accent is a cyan link color (#069de0), which appears as the inline tone for the Privacy Policy link. Pure black (#000000) carries the canvas and 70 of the page's element occurrences; pure white (#ffffff) carries the wordmark and body text. The multicolor feather lives inside the wordmark SVG and is not exposed as a CSS variable, so it is not tokenizable in the spec — described in prose only.

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

Peacock runs Peacocksans, NBCUniversal's custom proprietary sans-serif, across every tier — display headlines, sub-lines, body, and footer copy all share the same family. The captured fallback stack walks Peacocksans, Helvetica, Arial, sans-serif. Three weights do the work: 100 (hair-weight) for sub-lines beneath bold headlines, 400 for body and footer text, and 700 for display headlines. The pairing of 100 and 700 on the same family rather than across two families is the typographic signature. The closest open-source substitute is Inter at weights 100 / 400 / 700, which carries similar proportions and supports the same hair-weight tier. Roboto Thin is a viable alternative for the 100 sub-line if Inter Thin feels too narrow.

Why does this DESIGN.md describe an unavailability page?

Peacock geo-restricts peacocktv.com to US-based IP addresses only. When the design extractor visited from outside the US it landed on the unavailability page rather than the marketing hero — and that is the surface this DESIGN.md describes. The captured page is a stripped-down skeleton: black canvas, white wordmark with the multicolor feather, a 40px headline plus 20px sub-line stack, a single cyan link, and a muted-gray copyright footer. The live US-market hero would carry autoplay video tiles, the plan picker, content rails, and CTA buttons that this spec does not represent. Treat it as the brand identity at rest rather than as the full acquisition surface.

What corner-radius scale does Peacock use?

On the captured surface there is no declared corner radius — the page has zero rounded objects. The wordmark, the headline-and-sub-line stack, the cyan link, and the copyright footer are all text-only or transparent surfaces; no cards, no buttons, no input fields appear on the unavailability page. The spec therefore declares no radius scale. On the live US-market hero (not captured here) the streaming product likely carries rounded content tiles and pill buttons consistent with the rest of the NBCUniversal streaming portfolio, but those values cannot be measured from the visible chrome and have not been invented for the file.

Can I use this DESIGN.md to build my own streaming-brand identity page?

Yes — but with one caveat. The file captures the Peacock brand identity at rest (pure black canvas, white Peacocksans wordmark, weight-100 / weight-700 type pair, cyan accent), which is reproducible for an unavailability page, a 404 surface, a teaser landing, or any context where the brand needs to stand alone with minimal chrome. The agent will reproduce Peacock's specific moves: pure black with no charcoal lift, Peacocksans across every tier, the 100-beside-700 weight contrast, and the cyan-only accent. The caveat: the live US-market streaming hero, plan picker, and content surfaces are not represented here. If you need a full streaming-acquisition system, this spec is the skeleton — you will need to design the product surfaces around it.

Peacock Design System

Peacock's design system as a DESIGN.md file.

About Peacock DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source peacocktv.com

Music, Video & Streaming

Peacock's captured surface is the geo-blocked unavailability page — what NBCUniversal serves when a non-US viewer hits peacocktv.com without a US IP. The marketing hero is hidden behind that gate, so what the extractor sees is the system reduced to its skeleton: a pure black canvas, the white Peacock wordmark with the six-feather column of brand-colored dots beside it (yellow, red, purple, blue, blue, green from top to bottom), a 40px Peacocksans bold headline, and a 20px hair-weight-100 sub-line directly beneath it. There are no cards, no rounded surfaces, no gradient, no second background tone. The page is the brand identity standing alone.

The DESIGN.md file packages that skeleton into a machine-readable spec. Inside: 6 color tokens centered on pure-black canvas and pure-white ink, with a single cyan link voltage and a soft gray for secondary text; 9 typography tokens running Peacocksans (NBCUniversal's custom proprietary sans) at four sizes in three weights — the 100 / 700 weight pair on the same family is the system's signature; 6 spacing values from 2px to 72px; no declared corner radius (the captured page has zero rounded objects); and 14 component definitions covering the wordmark, the headline-and-sub-line stack, the inline cyan link, the muted-gray copyright footer, and the placeholder structural components the live marketing surface would carry.

Feed this file to Claude or Cursor and it reproduces Peacock's specific moves: pure-black canvas with no charcoal warmth, Peacocksans across every tier, the weight-100 / weight-700 contrast on the same family rather than across two families, cyan as the only accent, and the multicolor feather mark beside the wordmark as the page's single splash of brand color. One honest framing: the captured spec is the brand identity at rest. The live US-market hero carries the streaming acquisition surface (autoplay tiles, plan picker, content rails) that this DESIGN.md does not represent — what it represents is the chrome that survives when everything else is stripped away.

What makes it distinct

Pure black canvas#000000 carries 70 of the captured surface elements, with no charcoal lift or near-black warmth
Peacocksans across every tierdisplay, sub-line, body, and footer all share one custom proprietary sans family
Weight 100 beside weight 700the 20px sub-line at hair-weight pairs against the 40px bold headline as the system's signature contrast
Cyan link voltage#069de0 appears only as inline link color, the single chromatic accent on an otherwise monochrome page
Multicolor feather markthe wordmark's six-dot column (yellow / red / purple / blue / green) is the only color above the fold; the rest of the system is grayscale

Live at peacocktv.com

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

peacocktv.com

Explore Peacock

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

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Peacock design system FAQ

Common questions about Peacock'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.

Peacock — official site

Peacock'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.