Peacock Design System

Overview

Peacock's captured surface is the geo-blocked unavailability page, and that constraint shapes everything you see. Brand-identity-at-rest. Where Netflix's region-block still shows a marketing hero and Disney+ serves a content sampler, Peacock strips the page to its skeleton: a pure black canvas ({colors.canvas} — #000000), the white 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 ("For US customers:"), a 20px hair-weight-100 sub-line directly beneath ("Your device must physically be located in the US to stream."), and a cyan inline link to the privacy policy. The page is the brand identity standing alone — there are no cards, no rounded objects, no gradient, no second background tone.

The typographic signature is weight 100 beside weight 700 on the same family. Where Stripe pairs Sohne-var at weight 300 with itself at weight 400, and where most consumer brands pair a heavy display sans against a serif body, Peacock takes the contrast inside one family: 700 Peacocksans bold for the headline, 100 Peacocksans thin for the sub-line directly beneath. Both lines sit on the same baseline grid with no spacing variation. The hair weight at 20px against the 40px bold creates the only typographic tension on the page, and the absence of a second family keeps the contrast disciplined. NBCUniversal commissioned Peacocksans specifically for this kind of weight-range work; the family supports the full 100–900 axis.

Color discipline is severe. The page renders four declared structural values: {colors.canvas} pure black for the floor, {colors.ink} pure white for the wordmark and text, {colors.ink-muted} (#a4a5a7) for the copyright footer, and {colors.link} cyan (#069de0) for the single inline link. The multicolor feather column inside the wordmark — yellow, red, purple, blue, green — is the only chromatic moment above the fold, and it lives inside the brand-mark SVG rather than as a CSS variable. Outside the wordmark there is no color in the system.

Key Characteristics:

• Pure black canvas ({colors.canvas} — #000000) — 70 of the captured element occurrences, with no charcoal lift or near-black warmth, the absolute zero of the grayscale.
• Peacocksans across every tier — display, sub-line, body, link, and footer all share one custom proprietary NBCUniversal sans, with no second family.
• Weight 100 beside weight 700 — the 20px hair-weight sub-line and 40px bold headline form the system's signature typographic contrast, both on the same family.
• Cyan link voltage ({colors.link} — #069de0) — appears only as inline link color, the single chromatic accent outside the wordmark SVG.
• Multicolor six-feather wordmark — the only splash of brand color above the fold; lives inside the brand-mark image as yellow / red / purple / blue / green dots beside the "peacock" wordmark.
• Muted gray ({colors.ink-muted} — #a4a5a7) reserved for the legal-footer copyright row — the only secondary text tone in the system.
• No corner radius declared anywhere on the captured surface — the page has zero rounded objects (no cards, no buttons, no input fields, no chips).
• 16px base spacing with 40 / 72px section padding — five declared spacing values cover the entire page, no smaller unit than 2px.

Colors

Canvas

• Canvas ({colors.canvas} — #000000): frequency 70. Used as text (34), border (34), background (2). The dominant value across every measured surface — the page floor, every text-inside-text-shadow, every border outline. Absolute zero with no warmth, no lift; the system commits to pure black rather than the slightly-blue near-blacks Linear or Vercel use.

Ink

• Ink ({colors.ink} — #ffffff): frequency 15. Used as text (7), border (7), background (1). The wordmark fill, the 40px headline, the 20px sub-line, the body paragraph color. Pure white on pure black; no muted variant for body copy, no off-white for warmth. The contrast is uncompromising.
• Ink Muted ({colors.ink-muted} — #a4a5a7): frequency 6. Used as text (3), border (3). The neutral gray reserved for the copyright row in the footer ("Peacock © Peacock TV LLC. A Division of NBCUniversal…"). Not used anywhere as a body or label tone above the footer — it is purely the legal-text tier.

Accent

• Link ({colors.link} — #069de0): frequency 4. Used as text (2), border (2). The cyan inline link color for the "Privacy Policy" link sitting between the sub-line and the copyright footer. The only chromatic structural value in the system; appears nowhere else on the captured surface. Note: this is not the brand-feather palette — those colors live inside the wordmark SVG rather than as declared CSS values.

Notes on the Multicolor Feather

The wordmark beside "peacock" carries a six-dot vertical column drawn from NBCUniversal's peacock-feather palette: a warm yellow at the top, then red, then two purples, a saturated blue, and a green at the bottom. These hues are the brand identity but are not exposed as CSS custom properties on the captured chrome — they live inside the wordmark SVG as fill values. The DESIGN.md spec therefore cannot tokenize them; they are described here in prose only. If you need them in a build, sample directly from the SVG.

Typography

Font Family

The system runs Peacocksans for every tier — a custom proprietary sans NBCUniversal commissioned for the streaming brand. The fallback stack walks Helvetica, Arial, sans-serif. There is no second family — no serif tier, no monospace, no display alternate. Three weights do the work: 100 (hair-weight) for sub-lines beneath bold headlines, 400 for body and footer copy, and 700 for display headlines and link text. The 100 / 700 contrast on the same family rather than across two families is the system's most distinct typographic move.

Hierarchy

Principles

The display sits at 40px / 700 with a 48px line-height — generous leading that gives the bold headline air. The sub-line directly below jumps weight from 700 to 100 while dropping from 40px to 20px; the contrast is double — half the size and one-seventh of the weight. The pairing reads as one typographic unit rather than two stacked sentences, and the hair weight makes the sub-line feel like an annotation rather than a continuation.

There is no italic, no uppercase, no all-caps tracking, no display-serif alternate. Weight is the entire typographic toolkit, and the 100 / 700 range on Peacocksans is what carries the contrast across every hierarchy step.

Note on Font Substitutes

Peacocksans is a custom NBCUniversal commission and is not publicly licensable. The closest open-source substitute is Inter at weights 100 / 400 / 700; the proportions transfer cleanly and Inter's variable axis supports the hair-weight tier without the thinning artifacts cheaper sans families show at weight 100. Roboto Thin is a viable alternative for the 20px sub-line specifically if Inter Thin feels too narrow. Avoid Helvetica Neue Ultra Light for the sub-line — at 20px it disappears against the black canvas.

Layout

Spacing System

• Base unit: 16px — the workhorse value, appearing four times in the captured page across header padding, sub-line gap, and footer padding.
• Tokens: {spacing.xxs} 2px · {spacing.sm} 8px · {spacing.base} 16px · {spacing.md} 16px (same value, semantic alias) · {spacing.lg} 40px · {spacing.xl} 72px.
• Section padding: 40px vertical · 72px horizontal on the hero block — the wide horizontal gutter keeps the centered wordmark and headline anchored to a constrained inner column.
• Wordmark-to-headline gap: the centered wordmark sits roughly 80px above the 40px headline; the sub-line immediately follows the headline with no additional vertical gap beyond the line-height rhythm.
• Headline-to-sub-line gap: the sub-line is tight against the headline — the 48px headline line-height plus the 28px sub-line line-height stack without an additional spacing token, which produces the "one typographic unit" effect.

Grid & Container

• Hero canvas: full-bleed {colors.canvas} black with content centered horizontally — the wordmark, headline, sub-line, and link all share the same horizontal center.
• Wordmark width: ~400px centered above the headline stack.
• Text column: the headline-and-sub-line block constrains to roughly the same width as the wordmark above it, holding the page on a single vertical axis.
• Footer: the copyright row sits left-aligned at the very bottom of the canvas, 16px from the page edges, separated from the hero stack by a single vertical gap.

Rhythm

The page is one centered vertical column from top to bottom — wordmark, two headline-and-sub-line pairs, the inline cyan link, and the muted-gray copyright row. There are no horizontal sections, no two-column layouts, no card decks, no rails. The rhythm comes entirely from vertical whitespace and the weight-100 / weight-700 contrast between headline and sub-line.

Elevation

The system has no shadow tier on the captured surface. Zero shadow occurrences were measured. The page is uniformly flat — pure black canvas, white text, cyan link, gray footer. There is nothing to elevate because there are no surfaces above the canvas: every text element sits directly on {colors.canvas} with no card, panel, or chip to lift.

• Flat (no shadow): every surface — wordmark, headline, sub-line, link, footer.
• Tonal lift: absent — there is only one background color ({colors.canvas}) on the page; no surface ladder exists.
• Hairlines: the captured chrome shows no visible border outlines except the inline link underline (which is a text-decoration rather than a border).

The absence of an elevation tier is deliberate for the captured surface. The live US-market streaming hero would carry rounded content tiles with subtle elevation, but those surfaces are not represented in this spec.

Shapes

The radius scale is absent. The captured surface has zero rounded objects: no buttons, no cards, no input fields, no chips, no avatars. The spec declares a single {rounded.none} token (0px) as a placeholder for components that might be added when the live US-market surface is captured. There is no sm / md / lg ladder because the page has no rounded surfaces to land them on.

If you build a button or card around this DESIGN.md, the default radius is 0 — Peacock's identity at rest is hard-cornered. The live streaming product likely carries rounded content tiles, but those values are not present in the captured chrome and have not been invented.

Components

brand-mark — The Peacock wordmark plus the multicolor six-dot feather column, white-on-black, centered above the hero stack. Approximately 120px tall. The six dots beside the wordmark carry the only chromatic moment above the fold (yellow / red / purple / blue / blue / green).

hero-stack — Container for the headline-and-sub-line pair on the {colors.canvas} floor, 40×72 padding. Holds two stacks ("For US customers:" / "Your device must physically be located in the US to stream." and "For other international audiences:" / "Peacock is not yet available in your territory.").

hero-heading — White text at {typography.display-lg} (40px / 700 / 48px line-height). The bold half of the weight-100 / weight-700 pair.

sub-line — White text at {typography.sub-line} (20px / 100 / 28px). The hair-weight half of the pair, directly beneath the headline with no additional spacing token between them.

body-paragraph — Default white running-text at {typography.body-md} (16px / 400). Reserved tier — does not appear on the captured surface but available for body-copy contexts.

body-paragraph-muted — Gray {colors.ink-muted} variant at the same size. Reserved tier for secondary running text.

inline-link — Cyan {colors.link} (#069de0) text at {typography.link-md} (18px / 700), 2px vertical padding. The Privacy Policy link sitting between the sub-line block and the copyright footer.

footer-row — Gray {colors.ink-muted} text at {typography.footer-md} (16px / 400), 16px padding. The copyright line at the bottom of the canvas ("Peacock © Peacock TV LLC. A Division of NBCUniversal. All other programs and/or marks are the property of their respective owners. All rights reserved.").

button-primary — White {colors.ink} fill, black text, 0 radius, 16px padding, 48px height. Reserved component — does not appear on the captured surface but available for primary CTAs.

button-secondary — Transparent fill, white text, 1px {colors.ink-muted} border, 0 radius, 16px padding, 48px height. Reserved.

top-nav — Black {colors.canvas} surface, 64px height, 16px padding. Reserved — the captured page has no top nav.

nav-link — White text at {typography.link-md}, 8×16 padding. Reserved for the live marketing surface's top-nav links.

text-input — Black fill, white text, 1px {colors.ink-muted} border, 0 radius, 16px padding, 48px height. Reserved for form contexts.

card — Black fill, white text, 1px {colors.ink-muted} border, 16px padding. Reserved for content-card contexts on the live marketing surface.

Do's and Don'ts

Do keep the canvas at pure #000000. Peacock's identity-at-rest commits to absolute black with no charcoal warmth — softening to a near-black would dilute the contrast against the white wordmark and undercut the system's grayscale severity.

Do pair {typography.display-lg} (40px / 700) directly with {typography.sub-line} (20px / 100) on the same family. The weight-100 / weight-700 contrast on Peacocksans (rather than across two families) is the system's distinct typographic move; substituting a serif sub-line breaks the signature.

Do reserve the cyan link color ({colors.link} — #069de0) for inline links only. It is the single declared chromatic accent on the captured surface; spreading it onto button fills, borders, or chips dilutes the only structural color on the page.

Do use {colors.ink-muted} (#a4a5a7) only at the legal-footer tier. The captured chrome reserves the mid-gray for the copyright row alone; promoting it to body or label text breaks the page's two-text-color discipline.

Don't soften the canvas from {colors.canvas} toward a slightly-blue near-black (the Linear / Vercel move). The Peacock brand-mark is engineered for true black; against any charcoal floor the wordmark's contrast drops by a measurable step and the multicolor feather mark loses saturation.

Don't thicken the sub-line weight from 100 toward 300 or 400 to "improve legibility." The hair weight is structural — at 20px / 100 the sub-line reads as annotation beneath the 40px / 700 headline. Bumping to 400 collapses the pair into one undifferentiated stack and the signature contrast disappears.

Don't introduce a corner radius greater than 0 on this captured chrome. The system has zero rounded objects above the fold; adding even an 8px radius to a button below the headline would import a softness the page deliberately refuses.

Don't treat the multicolor feather hues (yellow / red / purple / blue / green) as a tokenizable accent palette. They live inside the wordmark SVG and are not exposed as CSS variables on the captured surface — using them as button fills or text accents extracts them from the single context (the wordmark) where they read as brand identity rather than as decoration.

Known Gaps

• The captured surface is the geo-block page: Peacock restricts peacocktv.com to US IPs only. The unavailability page is what this DESIGN.md describes; the live US-market hero with autoplay tiles, plan picker, and content rails is not represented.
• Multicolor feather hues are not tokenized: the yellow / red / purple / blue / green dots inside the wordmark are SVG fill values rather than CSS custom properties on the captured chrome, so the spec describes them in prose only.
• No declared corner radius: the captured page has zero rounded objects, so no radius scale is declared. The live streaming product likely carries rounded content tiles but those values cannot be measured from the visible chrome.
• No declared shadow or elevation tier: every captured surface sits directly on the black canvas with no panel or card above it. Hover, focus, and disabled states are not exposed.
• No declared form components: the captured page has no input fields, no buttons, no chips. The button / input / card definitions in this spec are placeholder reserved tokens, not measured values.
• Live US-market chrome: the streaming-acquisition surface (plan picker, content rails, sub-brand tiles for Bravo / NBC / Telemundo) is hidden behind the geo-block and not captured here. Treat this DESIGN.md as the brand identity at rest rather than the full marketing surface.
• Sub-brand chrome: Peacock aggregates content from NBC, Bravo, USA, E!, Syfy, Telemundo, and Universal Pictures, each with its own color palette and type system. None of those sub-brand surfaces are captured here; the spec is the master Peacock chrome only.