--- version: alpha name: "Peacock" website: "https://www.peacocktv.com" description: >- A subscription streaming service whose captured surface is the geo-blocked unavailability page rather than the US marketing hero — the visible system is reduced to its skeleton: pure black canvas, white peacock wordmark with the iconic six-feather column of colored dots beside it, and a 40px bold headline in Peacocksans paired with a thin 20px weight-100 sub-line. The pairing of heavy 700 sans with hair-weight 100 sans on the same family is the system's most distinct typographic move; the cyan link tone for "Privacy Policy" is the only accent. Black-on-black everywhere — no rounded surfaces, no card chrome, no gradient — the entire page is six declared spacing values and four colors. seo: title: "Peacock Design System for React — black canvas, Peacocksans 100 / 700, 14 components" metaDescription: "Peacock's design system as a DESIGN.md file. Pure black canvas, white Peacocksans display, weight-100 sub-line beside weight-700 headline, cyan-link accent, 6 colors, 14 components — for React and AI coding tools." highlights: - "Pure black canvas — #000000 carries 70 of the captured surface elements, with no charcoal lift or near-black warmth" - "Peacocksans across every tier — display, sub-line, body, and footer all share one custom proprietary sans family" - "Weight 100 beside weight 700 — the 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 mark — the wordmark's six-dot column (yellow / red / purple / blue / green) is the only color above the fold; the rest of the system is grayscale" tags: - "Music, Video & Streaming" lastUpdated: "2026-05-18" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.peacocktv.com" title: "Peacock — official site" description: "Peacock's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Peacock's primary brand color?" answer: "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." - id: "typography" title: "What typeface does Peacock use, and what should I use as a substitute?" answer: "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." - id: "captured-surface" title: "Why does this DESIGN.md describe an unavailability page?" answer: "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." - id: "rounded-style" title: "What corner-radius scale does Peacock use?" answer: "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." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own streaming-brand identity page?" answer: "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." mockups: - "marketing-hero" - "editorial-article" colors: canvas: "#000000" ink: "#ffffff" ink-muted: "#a4a5a7" link: "#069de0" typography: display-lg: fontFamily: "peacocksans, Helvetica, Arial, sans-serif" fontSize: 40px fontWeight: 700 lineHeight: 48px letterSpacing: 0 sub-line: fontFamily: "peacocksans, Helvetica, Arial, sans-serif" fontSize: 20px fontWeight: 100 lineHeight: 28px letterSpacing: 0 heading-md: fontFamily: "peacocksans, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 24px letterSpacing: 0 body-md: fontFamily: "peacocksans, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 22px letterSpacing: 0 body-sm: fontFamily: "peacocksans, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0 link-md: fontFamily: "peacocksans, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 24px letterSpacing: 0 footer-md: fontFamily: "peacocksans, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 22px letterSpacing: 0 label-md: fontFamily: "peacocksans, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 22px letterSpacing: 0 caption: fontFamily: "peacocksans, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px letterSpacing: 0 rounded: none: "0px" spacing: xxs: "2px" sm: "8px" base: "16px" md: "16px" lg: "40px" xl: "72px" components: brand-mark: backgroundColor: "transparent" textColor: "{colors.ink}" padding: "0px" height: "120px" hero-stack: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: "40px 72px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: "0px 0px 16px" sub-line: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.sub-line}" padding: "0px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" padding: "0px" body-paragraph-muted: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.body-md}" padding: "0px" inline-link: backgroundColor: "transparent" textColor: "{colors.link}" typography: "{typography.link-md}" padding: "2px 0px" footer-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.footer-md}" padding: "16px" button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.label-md}" rounded: "{rounded.none}" padding: "16px" height: "48px" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.label-md}" rounded: "{rounded.none}" padding: "16px" height: "48px" borderColor: "{colors.ink-muted}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.link-md}" padding: "16px" height: "64px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.link-md}" padding: "8px 16px" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "16px" height: "48px" borderColor: "{colors.ink-muted}" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" padding: "16px" borderColor: "{colors.ink-muted}" --- ## 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 | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-lg}` | 40px | 700 | 48px | Bold headline ("For US customers:" / "For other international audiences:") | | `{typography.sub-line}` | 20px | 100 | 28px | Hair-weight sub-line directly beneath the headline | | `{typography.heading-md}` | 18px | 700 | 24px | Reserved h3 / sub-section heading tier | | `{typography.body-md}` | 16px | 400 | 22px | Default running text | | `{typography.body-sm}` | 14px | 400 | 20px | Tighter body for caption rows | | `{typography.link-md}` | 18px | 700 | 24px | Inline link tone (Privacy Policy) | | `{typography.footer-md}` | 16px | 400 | 22px | Copyright row in the footer | | `{typography.label-md}` | 16px | 700 | 22px | Reserved bold-label tier for buttons / chips | | `{typography.caption}` | 12px | 400 | 16px | Smallest text tier — reserved | ### 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.