PlayStation Design System

Overview

PlayStation's marketing system reads like a console launch trailer scrolling past the viewer in chapters. Each section is a full-bleed band — pure black {colors.canvas-dark} ("#000000"), true white {colors.canvas-light} ("#ffffff"), or PlayStation Blue {colors.primary} ("#0070d1") — and each chapter owns one editorial moment: hero console photography, a games-coming-soon strip, the PlayStation Plus tier banner, the "30 Years of PlayStation" anniversary band, the news strip from the PlayStation Blog. There is no decorative chrome between chapters; the section background change IS the divider. Sections stack at {spacing.section} (96px) rhythm with the next band's color taking over the page edge-to-edge.

The system has two distinct surface modes that alternate down the page: a dark canvas mode for editorial product moments (hero, "ON PLAYSTATION" band, marathon game pages) and a light canvas mode for utility surfaces (PS5 games listing, support pages, news index). Both modes use the same chrome vocabulary — fully-rounded {rounded.full} pill buttons, 8px-radius {rounded.md} cards, the proprietary PlayStation SST face — only the surface and on-surface colors change. The third surface mode is the PlayStation Blue band ({colors.primary} — "#0070d1") reserved for the highest-priority moments: the Marathon launch CTA strip, the footer, and any "Action Required" banner.

The typography is the system's most distinctive choice. PlayStation SST renders display headlines at weight 300 (light) — unusual for a gaming brand that could easily reach for bold geometric display faces. The light weight gives the chrome an airy, almost editorial quality that lets the imagery speak; copy is information rather than decoration. Heading sizes drop in tight increments (54 → 44 → 35 → 28 → 22 → 18) and body settles at 18px with 1.5 line-height for comfortable long-form reading on support and games pages.

Key Characteristics:

• Three-canvas chapter system: {colors.canvas-dark} ("#000000"), {colors.canvas-light} ("#ffffff"), {colors.primary} ("#0070d1") alternating down the page
• PlayStation Blue ({colors.primary} — "#0070d1") is the universal primary CTA — fully-rounded pill at {rounded.full} (9999px)
• Commerce orange ({colors.commerce} — "#d53b00") is the secondary CTA reserved for "Buy now" / "Pre-order" / store actions
• PlayStation SST display tier renders at weight 300 with -0.1px to +0.4px tracking — the brand's signature airy editorial voice
• 8px-radius ({rounded.md}) for product cards and feature panels; 4px-radius ({rounded.sm}) for inputs; pills ({rounded.full}) for every CTA
• Game tiles, console renders, and PS Plus tier illustrations occupy 60-90% of each section — imagery does the storytelling
• Color-block page rhythm (one observed band sequence): dark hero → light console showcase → dark "Great PS4 & PS5 games" rail → light "Discover PlayStation Plus" tier band → light "30 years of PlayStation" callout → dark "ON PLAYSTATION" band → light news strip → blue footer

Known Gaps

• Mobile screenshots not captured — responsive behavior synthesizes PlayStation's known mobile pattern (hamburger drawer, single-column band reflow, hero downscale) from desktop evidence and the breakpoint stack.
• Hover states not documented by system policy.
• Sign-in / authentication chrome (login modal, account dashboard, profile pages) not in the captured pages.
• PlayStation Store in-store browsing surfaces (PDP / cart / checkout) are not in the captured set — those use a more dense data-table layout that this document does not describe.
• Game-page-specific theming — the /marathon/ page uses {colors.marathon-yellow} ("#deff20") as a chapter accent. Other game pages may pull in their own per-title brand colors that vary outside the documented system.
• Form validation states (success / error inline messages) not present in the captured surfaces beyond the {colors.warning} ("#c81b3a") color token.