--- version: alpha name: "Paramount+" website: "https://www.paramountplus.com" description: >- A subscription streaming service whose landing page does the inverse of what most consumer apps attempt above the fold — instead of a single hero still or autoplay teaser, Paramount+ tiles dozens of low-opacity series posters edge-to-edge as a textured wall, then drops a 71px Proxima Nova Black headline in pure white across four hard-broken lines on top. The brand voltage is a deep midnight navy block behind the wallpaper, and the one chromatic CTA is a saturated cobalt-blue gradient submit pill anchoring a white email-capture row. There is no rounded warmth here — Proxima Nova Black at -2.13px tracking and an all-caps 15px SemiBold label do the speaking; the mountain wordmark sits centered at the top of the wallpaper as the only branded chrome. seo: title: "Paramount+ Design System for React — cobalt-blue voltage, Proxima Nova Black, 14 components" metaDescription: "Paramount+'s landing-page design system as a DESIGN.md file. Deep navy canvas behind a tiled poster wallpaper, 71px Proxima Nova Black display, cobalt-blue gradient CTA, 12 colors, 14 components — for React and AI coding tools." highlights: - "Poster wallpaper hero — dozens of low-opacity series stills tile edge-to-edge as the page floor, with the headline punched straight through them" - "Display at 71px Black, body at 17px Regular — Proxima Nova carries every tier, with a one-step jump from cap-tracked SemiBold labels to massive Black headlines" - "Cobalt gradient submit — the email-capture pill runs a #0037c5 to #0064ff horizontal gradient, the only saturated chromatic moment on the page" - "Navy as ground — the canvas behind the poster wall is a deep midnight #0a1d61, not black, anchoring the cobalt-blue brand temperature" - "Mountain logo as sole chrome — the centered Paramount+ wordmark plus mountain mark is the only brand element above the headline" tags: - "Music, Video & Streaming" lastUpdated: "2026-05-18" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Paramount+'s landing page treats its content library as the literal wallpaper. Where Netflix opens with a single autoplay still and Disney+ leads with a hero card framed by a navy gradient, Paramount+ tiles forty-plus series posters edge-to-edge as a low-opacity backdrop — Halo, Yellowstone, Top Gun, 1923, La Brea, Teen Wolf, South Park — and punches the headline straight through them in pure white at 71px. The poster wall doesn't sit beside the type; it carries the type. The deep midnight navy that bleeds through the tile gaps is the closest thing the system has to a brand surface, and even that recedes behind the library inventory. The DESIGN.md file packages the system into a machine-readable spec for React and AI tooling. Inside: 12 color tokens centered on the cobalt-navy gradient voltage and the pure-white text tier; 11 typography tokens running Proxima Nova in three weights (Regular for body, SemiBold for the all-caps locale label, Black for the four-line display) at sizes ranging from 11px legal copy to 71px headlines; a small radius scale (6px on the submit pill, 10px on the email input); and 14 component definitions covering the wallpaper hero, the white-with-shadow email input, the cobalt-gradient submit button, the legal-copy stack, and the centered mountain wordmark. Feed this file to Claude or Cursor and it reproduces Paramount+'s specific moves: tiled-library wallpaper instead of a single hero still, Proxima Nova Black at 71px with -2.13px tracking for the four-line shouted headline, cobalt-blue gradient CTA as the single chromatic action, and an all-caps SemiBold locale stamp as the only secondary type role. One opinionated framing: this is the inverse of the streaming-marketing default. Most rivals sell one show; Paramount+ sells the catalog — the wallpaper is the pitch, the headline labels it ("A MOUNTAIN OF ENTERTAINMENT"), and the cobalt pill closes the deal. 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.paramountplus.com" title: "Paramount+ — official site" description: "Paramount+'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 Paramount+'s primary brand color?" answer: "Paramount+'s brand voltage is a cobalt-blue gradient running from a deep mid-cobalt #0037c5 on the left to a brighter electric cobalt #0064ff on the right, applied as the fill on the email-capture submit pill. The underlying canvas behind the poster wallpaper is a deep midnight navy #0a1d61. Together these two values define the Paramount-blue temperature the brand has run for years on its parent network identity. The cobalt gradient appears exactly once on the captured landing page; the navy carries the entire below-wallpaper floor. White at 71px in Proxima Nova Black does every other piece of the page's chromatic work." - id: "typography" title: "What typeface does Paramount+ use, and what should I use as a substitute?" answer: "The landing page runs Proxima Nova across every tier — Regular for body and disclaimers, SemiBold for the all-caps locale stamp, and Black for the four-line display headline. The display sits at 71px with -2.13px letter-spacing and a 63.9px line-height (tighter than the size, which forces the four broken lines to stack as one slab of type). Body copy is 17px / 23px Regular; the locale label is 15px / 16px SemiBold with 0.4px tracking and uppercase casing. Proxima Nova is a Mark Simonson licensed family; the closest open-source substitutes are Montserrat at the same weights, or Inter Black for the display tier with a slightly looser counter." - id: "wallpaper-hero" title: "Why is the hero a tiled poster wall instead of a single show?" answer: "The landing page is acquisition-first, not show-discovery. Netflix and Max lead with a single still because their value proposition is a flagship original; Paramount+'s pitch is the breadth of the CBS, BET, Comedy Central, Nickelodeon, MTV, and Paramount Pictures catalog combined. Tiling forty-plus posters edge-to-edge as a low-opacity wallpaper makes that breadth literally visible above the fold without privileging any single title. The headline 'A MOUNTAIN OF ENTERTAINMENT' labels what the wallpaper already shows. The white text punches through the dimmed poster grid because the navy overlay drops the artwork to around 30 percent luminance." - id: "rounded-style" title: "What corner-radius scale does Paramount+ use?" answer: "The radius scale is small and binary. The submit pill uses 6px rounding and the email input uses 10px — that is the entire scale on the captured page. There is no 12 / 16 / 24px tier, no full pill, no zero-radius hard-corner surface either. The two values sit close enough together that the input-plus-button row reads as a single rounded unit even though their radii differ by 4px. The constraint is deliberate; the page has no card decks, no avatar chips, and no rounded image tiles — the only round-cornered objects are the two form elements, so a richer scale would have nothing to land on." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own streaming-acquisition landing page?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Paramount+'s specific moves: tiled poster wallpaper as the hero floor, deep midnight navy as the brand ground, Proxima Nova Black at 71px with tight negative tracking for the four-line display, the cobalt gradient submit pill, and the white shadow-elevated email input. You can also reference values directly: every hex, font family, padding value, and radius is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the wallpaper-as-hero move only carries weight if your library has visual variety; for a single-product SaaS it would feel scattered rather than abundant." mockups: - "marketing-hero" - "media-grid" colors: primary: "#0037c5" primary-bright: "#0064ff" canvas: "#0a1d61" ink: "#ffffff" ink-on-input: "#1d1d1d" ink-pure: "#000000" hairline: "#666666" typography: display-xl: fontFamily: "\"Proxima Nova Black\", \"Proxima Nova\", system-ui, sans-serif" fontSize: 71px fontWeight: 900 lineHeight: 63.9px letterSpacing: "-2.13px" display-lg: fontFamily: "\"Proxima Nova Black\", \"Proxima Nova\", system-ui, sans-serif" fontSize: 48px fontWeight: 900 lineHeight: 48px letterSpacing: "-1.44px" heading-md: fontFamily: "\"Proxima Nova\", system-ui, sans-serif" fontSize: 20px fontWeight: 700 lineHeight: 24px letterSpacing: 0 body-lg: fontFamily: "\"Proxima Nova\", system-ui, sans-serif" fontSize: 17px fontWeight: 400 lineHeight: 23px letterSpacing: 0 body-md: fontFamily: "\"Proxima Nova\", system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 22px letterSpacing: 0 body-sm: fontFamily: "\"Proxima Nova\", system-ui, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 21px letterSpacing: 0 caption: fontFamily: "\"Proxima Nova\", system-ui, sans-serif" fontSize: 11px fontWeight: 400 lineHeight: 16px letterSpacing: 0 label-bold: fontFamily: "\"Proxima Nova\", system-ui, sans-serif" fontSize: 13.5px fontWeight: 700 lineHeight: 16px letterSpacing: 0 label-caps: fontFamily: "\"Proxima Nova SemiBold\", \"Proxima Nova\", system-ui, sans-serif" fontSize: 15px fontWeight: 600 lineHeight: 16px letterSpacing: "0.4px" button-md: fontFamily: "\"Proxima Nova SemiBold\", \"Proxima Nova\", system-ui, sans-serif" fontSize: 15px fontWeight: 600 lineHeight: 16px letterSpacing: "0.4px" input-md: fontFamily: "\"Proxima Nova\", system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 22px letterSpacing: 0 rounded: none: "0px" sm: "6px" md: "10px" spacing: xs: "6px" sm: "16px" md: "20px" lg: "30px" xl: "40px" 2xl: "44px" 3xl: "68px" gutter: "144px" components: hero-wallpaper: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "68px 144px 30px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "0px 144px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-lg}" padding: "0px 144px 20px" body-paragraph-disclaimer: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-sm}" padding: "0px 144px 20px" label-caps: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.label-caps}" padding: "0px" email-capture-row: backgroundColor: "transparent" textColor: "{colors.ink}" padding: "16px 0px" text-input: backgroundColor: "{colors.ink}" textColor: "{colors.ink-on-input}" typography: "{typography.input-md}" rounded: "{rounded.md}" padding: "13px 0px 13px 13px" height: "58px" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "16px 40px 14px" height: "58px" button-primary-hover: backgroundColor: "{colors.primary-bright}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "16px 40px 14px" height: "58px" brand-mark: backgroundColor: "transparent" textColor: "{colors.ink}" padding: "44px 0px" height: "120px" legal-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-sm}" padding: "6px 10px" footer-row: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.caption}" padding: "20px 144px" poster-tile: backgroundColor: "transparent" rounded: "{rounded.none}" padding: "0px" opacity: "0.35" card-hairline: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" padding: "20px" borderColor: "{colors.hairline}" --- ## Overview Paramount+'s landing page inverts the streaming-acquisition convention. **Wallpaper-as-pitch.** Where Netflix and Max lead with one autoplay still and a single show's marketing voice, Paramount+ tiles forty-plus series posters edge-to-edge as a low-opacity backdrop, then drops a four-line 71px Proxima Nova Black headline in pure white straight through them. The poster wall does not sit beside the headline; it carries the headline. The deep midnight navy (`{colors.canvas}` — #0a1d61) that bleeds between the dimmed tiles is the only declared brand surface, and even that recedes behind the library inventory. The chromatic discipline is severe. There is exactly one saturated brand moment on the page — the submit pill on the email-capture row, which runs a cobalt-blue gradient from `{colors.primary}` (#0037c5) on the left to `{colors.primary-bright}` (#0064ff) on the right. Every other surface is either dim-poster wallpaper, midnight-navy floor, or pure white text. Where Spline holds a single cobalt CTA against pure black and Cloudflare gives an orange canvas the full hero, Paramount+ does both at once: a navy canvas full-bleed, plus a single cobalt voltage reserved for the only action that matters above the fold. Typography runs Proxima Nova across every tier in three weights — Regular for body and disclaimers, SemiBold for the all-caps locale label, and Black for the display headline. The 71px / 63.9px line-height ratio is unusual: leading tighter than size forces the four hard-broken lines ("UNIQUE STORIES. / ICONIC STARS. / A MOUNTAIN OF / ENTERTAINMENT.") to stack as one continuous slab. The -2.13px letter-spacing pulls the cap forms close enough that each line reads as a poster headline rather than as running editorial copy. **Key Characteristics:** - Tiled-poster wallpaper hero — dozens of series stills dropped to ~35% opacity over the navy canvas, with the headline punched straight through them. - Single cobalt-blue voltage (`{colors.primary}` to `{colors.primary-bright}`) — a horizontal gradient reserved for the submit pill, the only saturated chromatic moment on the page. - Deep midnight navy (`{colors.canvas}` — #0a1d61) as the ground beneath the wallpaper — not black, not slate, the Paramount-blue temperature that has anchored the parent network for decades. - Display at 71px Proxima Nova Black with -2.13px tracking and 63.9px line-height — leading tighter than size, deliberately, to lock the four lines into one slab. - All-caps SemiBold locale label at 15px with 0.4px tracking — the system's only uppercase tier, used as the "Share your email address…" stamp above the form. - White email input with 10px rounding and dark `{colors.ink-on-input}` (#1d1d1d) typed text — sits flush against the 6px-radius cobalt submit pill, forming a single hybrid form row. - Mountain wordmark centered at the top of the wallpaper as the only branded chrome above the headline — no top nav, no secondary CTAs. - 144px horizontal gutter on the body copy and footer rows — the wide margin contains the headline-width to roughly four columns of poster tiles. ## Colors ### Brand - **Cobalt** (`{colors.primary}` — #0037c5): frequency 1, used as the left end-stop of the submit pill's horizontal gradient. The deep cobalt tier of the Paramount-blue family; sits just below the brighter end-stop on the same hue ramp. - **Cobalt Bright** (`{colors.primary-bright}` — #0064ff): frequency 1, used as the right end-stop of the submit gradient. The electric cobalt that gives the pill its lift — without this hue the gradient would read as flat navy. - **Canvas** (`{colors.canvas}` — #0a1d61): frequency 1 as background — the midnight-navy floor that sits behind the poster wallpaper and bleeds between the dimmed tiles. The Paramount-blue temperature at maximum saturation depth; not pure black, not slate. ### Text - **Ink** (`{colors.ink}` — #ffffff): frequency 68 — the dominant text and border color across the page. Used as text (34), border (33), background fill (1). Carries every word above the fold — display headline, body paragraph, label, disclaimer, and the typed-form caret. The white-on-navy contrast is the page's load-bearing readability move. - **Ink On Input** (`{colors.ink-on-input}` — #1d1d1d): frequency 2 — the typed-text color inside the white email-input. Not pure black; the slight lift to charcoal-1d softens the contrast on white without losing legibility. - **Ink Pure** (`{colors.ink-pure}` — #000000): frequency 2 — used as a text and border tone in scoped places. Reserved rather than dominant; the page's "true black" appears almost nowhere as a body surface. ### Hairline - **Hairline** (`{colors.hairline}` — #666666): frequency 1, used as a single border on a secondary element. The system's only mid-gray; with white doing nearly every border job on the page, this gray is reserved for surfaces that need a softer outline against the navy. ## Typography ### Font Family The system runs **Proxima Nova** for everything — the licensed Mark Simonson family. Three weights do the work: **Regular** (400) for body, disclaimers, and the typed-input copy; **SemiBold** (600) for the all-caps locale label and the submit button; and **Black** (900) for the display headline. Fallbacks walk `system-ui, sans-serif`. There is no serif tier, no monospace, no second sans family. ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 71px | 900 | 63.9px | -2.13px | Hero headline ("UNIQUE STORIES. / ICONIC STARS. / A MOUNTAIN OF / ENTERTAINMENT.") | | `{typography.display-lg}` | 48px | 900 | 48px | -1.44px | Reserved smaller display step for secondary acquisition pages | | `{typography.heading-md}` | 20px | 700 | 24px | 0 | Sub-section headings on category pages | | `{typography.body-lg}` | 17px | 400 | 23px | 0 | Hero sub-paragraph beneath the headline | | `{typography.body-md}` | 16px | 400 | 22px | 0 | Default running text | | `{typography.body-sm}` | 12px | 400 | 21px | 0 | Marketing-consent disclaimer and country-availability copy | | `{typography.caption}` | 11px | 400 | 16px | 0 | Footer copyright row, legal links | | `{typography.label-bold}` | 13.5px | 700 | 16px | 0 | Form-section title above the email capture | | `{typography.label-caps}` | 15px | 600 | 16px | 0.4px | All-caps locale stamp ("EN" / language selector) | | `{typography.button-md}` | 15px | 600 | 16px | 0.4px | Submit button label | | `{typography.input-md}` | 16px | 400 | 22px | 0 | Typed-text inside the email input | ### Principles The display jumps one full step from 17px body straight to 71px hero — there is no 24 / 32 / 40px intermediate display tier on the captured surface. The leap is the page's central typographic move: body sits quiet at 17px, the headline shouts at 71px, and the locale label at 15px SemiBold uppercase is the only middle voice. The 63.9px line-height on the 71px headline is tighter than the cap size; the deliberate negative leading is what fuses the four hard-broken lines into one slab rather than four discrete sentences. The cap-tracked 15px SemiBold label is the only uppercase tier in the system. There is no all-caps display, no all-caps button-tertiary variant, no all-caps section eyebrow — just the locale stamp. That singularity is what keeps the uppercase from reading as decorative. ### Note on Font Substitutes Proxima Nova is licensed from Mark Simonson Studio. The closest open-source substitute is **Montserrat** at the same weights — the proportions transfer cleanly at 17px body and 71px display, with a slightly squarer counter. For the 71px Black tier specifically, **Inter Black** at the same negative tracking is a viable alternative; the counters open up a touch but the cap weight reads close enough. **Mulish** is a third option at body sizes but starts to feel narrower than Proxima Nova above 32px. ## Layout ### Spacing System - **Base unit:** 4px — the underlying grid, with 8 and 16 carrying most of the work. - **Tokens:** `{spacing.xs}` 6px · `{spacing.sm}` 16px · `{spacing.md}` 20px · `{spacing.lg}` 30px · `{spacing.xl}` 40px · `{spacing.2xl}` 44px · `{spacing.3xl}` 68px · `{spacing.gutter}` 144px. - **Gutter:** the body-text container sits inside a 144px horizontal margin, which constrains the headline to roughly four poster-tile widths wide. - **Vertical rhythm:** 68px above the headline block, 44px around the centered brand mark, 30px below the body paragraph before the form section, 20px between form and disclaimer rows. - **Form padding:** the email input uses an asymmetric `13px 0px 13px 13px` — 13px on top, bottom, and left, but 0 on the right where it abuts the submit pill. ### Grid & Container - **Hero canvas:** full-bleed midnight navy, with the poster wallpaper tiling edge-to-edge in roughly 8 columns and 5 rows at desktop width. - **Headline column:** centered text constrained by the 144px side gutter — width ends up around 800px on the captured 1080px-wide capture. - **Brand mark:** centered above the headline at the top of the canvas, no padding container. - **Form row:** the email input (424px) and submit pill (~120px) sit flush together, total form-row width about 580px, left-aligned to the same gutter as the headline. - **Footer:** legal link strip and copyright row stacked left-aligned, same 144px gutter. ### Rhythm The page is one long full-bleed wallpaper band with no section dividers. Hero, form, disclaimer, and footer all sit on the same navy floor; there is no shift to a second surface color, no separator rule, no card boundary. The rhythm comes from vertical whitespace and one consistent text-color (`{colors.ink}`) doing every layer of hierarchy. ## Elevation The system has essentially **no shadow tier**. The captured surface uses 0 declared shadow occurrences. Depth comes entirely from two non-shadow moves: the poster-wallpaper opacity drop (~35%) creates the perception that the navy canvas sits behind the tiles, and the white email-input fill makes the form row read as the only "lit" surface on the page. - **Flat (no shadow):** wallpaper, headline, body, disclaimer, footer — every surface. - **Opacity-as-depth:** dimmed poster tiles read as background because their luminance drops them behind the navy. - **White-as-elevation:** the email input is the only white fill on the canvas; against the navy it reads as the most-tappable, most-foregrounded surface, no shadow required. ## Shapes The radius scale is small and binary: - `{rounded.none}` 0px — every poster tile, every wallpaper edge. - `{rounded.sm}` 6px — the submit pill (`{component.button-primary}`). - `{rounded.md}` 10px — the email input (`{component.text-input}`). There is no 12px tier, no 16px card radius, no full pill, no large surface tile. The constraint is structural: the page has only two rounded objects (input + button), so it has only the two radii those objects need. Adding a third would have nothing to land on. ## Components **`hero-wallpaper`** — Full-bleed `{colors.canvas}` (#0a1d61) midnight floor with the tiled-poster wallpaper layered above at ~35% opacity. 68px top padding holds the centered brand mark; 144px horizontal gutter holds the headline-and-form column. **`hero-heading`** — Pure-white text on the wallpaper, Proxima Nova Black 71px / 63.9px / -2.13px. The four broken lines ("UNIQUE STORIES. / ICONIC STARS. / A MOUNTAIN OF / ENTERTAINMENT.") stack as one slab because the leading is tighter than the cap size. **`body-paragraph`** — Default white running-text at `{typography.body-lg}` (17px / 400). One paragraph beneath the headline: "Paramount+, home to the world's favourite stars, stories and brands, is coming soon!" **`body-paragraph-disclaimer`** — 12px / 21px / 400 white text at the marketing-consent and country-availability disclaimer tier. Tighter line-height than the body lead, but same family. **`label-caps`** — All-caps 15px SemiBold with 0.4px tracking. The only uppercase tier in the system, used for the locale / language stamp. **`email-capture-row`** — Container for the input plus submit pill. No fill of its own; the two children sit flush. **`text-input`** — White `{colors.ink}` fill (the only white surface on the canvas), `{colors.ink-on-input}` (#1d1d1d) typed-text, 10px `{rounded.md}` radius, asymmetric `13px 0px 13px 13px` padding (0 right where it abuts the button), 58px height, 424px width. **`button-primary`** — Cobalt gradient fill from `{colors.primary}` (#0037c5) left to `{colors.primary-bright}` (#0064ff) right, white text, 6px `{rounded.sm}` radius, `16px 40px 14px` padding, 58px height. The pill height matches the input so they form one row. **`button-primary-hover`** — The gradient brightens toward the cobalt-bright end-stop on hover. No documented active state on the captured surface. **`brand-mark`** — The Paramount+ wordmark plus mountain mark, white-on-navy, centered at the top of the wallpaper. ~120px tall, 44px vertical padding above and below. **`legal-link`** — White text inline link at `{typography.body-sm}`, 6×10 padding for hit area. Used in the legal-link strip ("Terms of Use / Privacy Policy / Cookies / Cookie Details"). **`footer-row`** — White 11px / 16px text at the page floor, same 144px gutter. Holds the copyright line. **`poster-tile`** — Individual series-poster image at ~35% opacity, 0px radius (square corners), 0 padding. The wallpaper grid tiles dozens of these edge-to-edge. **`card-hairline`** — Reserved transparent surface with a `{colors.hairline}` (#666666) 1px border, 20px padding. Not used in the captured hero; available for secondary acquisition-page cards where white-on-navy is too loud. ## Do's and Don'ts **Do** treat the poster wallpaper as the hero element, not as decoration. The tiled library inventory is the page's actual pitch — replacing it with a single flagship still would shift the system into the Netflix / Max convention and lose the "breadth of catalog" framing the headline labels. **Do** keep the display at 71px Black with the 63.9px / -2.13px tracking pair. The negative leading is what fuses the four hard-broken lines into one slab; loosening it to 1.2 line-height breaks the headline into four separate sentences and the slab feel disappears. **Do** reserve the cobalt gradient (`{colors.primary}` to `{colors.primary-bright}`) for the one primary CTA above the fold. Multiplying the gradient onto secondary buttons dilutes the only saturated brand moment on the page. **Do** use white (`{colors.ink}`) as the workhorse text color across every tier. Body, headline, disclaimer, locale label, and link text all share the same pure-white value — the system's chromatic discipline depends on a single text color carrying every level of hierarchy. **Don't** swap the canvas from midnight navy (`{colors.canvas}` — #0a1d61) to pure black. The Paramount-blue temperature is the brand surface; black would break the cobalt-pill harmony and turn the system generic-streaming dark. **Don't** raise the poster wallpaper opacity above ~40%. Above that threshold the artwork starts to compete with the white headline for foreground attention and the page loses its single typographic focus. **Don't** introduce a third corner radius between 6px and 10px. The system is deliberately binary on radius — input at 10px, button at 6px, everything else at 0 — and a middle value softens the hard edge that the poster wall provides. **Don't** use the `{typography.label-caps}` 15px SemiBold uppercase treatment outside the single locale-label role. It is the only uppercase tier in the system; spreading it across multiple labels turns it into decorative caps rather than a structural stamp. ## Known Gaps - **Above-wallpaper navigation:** the captured landing page is a soon-launching territory page, so the standard top nav (Home / Shows / Movies / Live TV / Brands / Pricing) is not present. Only the centered mountain mark stands in for chrome. - **Logged-in product surface:** this DESIGN.md captures the public acquisition page only. The streaming product itself (the show-grid hub, the player, the My List page) carries a much richer component system that is not represented here. - **Hover, focus, and disabled states:** the cobalt-gradient hover is described, but the full state matrix (focus rings, disabled tints, error tints on the email input) was not visible on the captured surface. - **Form validation styling:** `{component.text-input}` carries the resting state only; error messaging and invalid-state outlines are not exposed on the landing page. - **Motion:** the poster wallpaper appears static in the capture, but the live page may animate (parallax, tile crossfade, drift). Easing curves and stagger timing are not represented in the spec. - **Sub-brand chrome:** Paramount+ aggregates content from CBS, BET, Comedy Central, Nickelodeon, MTV, VH1, and Paramount Pictures, each with its own brand palette and type system. None of those sub-brand surfaces are captured here; the spec is the master Paramount+ marketing chrome only.