---
version: alpha
name: PlayStation
website: "https://www.playstation.com"
description: |
  A three-surface marketing system organized around alternating black, white, and PlayStation Blue chapters that scroll past the viewer like a console launch trailer. Each section has a single editorial purpose — hero photography, console product render, PS Plus tier callout, news strip — and each owns one of three full-bleed canvas modes. The chrome is unusually quiet for a gaming brand: bright PlayStation Blue ("#0070d1") carries every primary CTA as a fully-rounded pill, the proprietary SST face renders display copy at a signature weight 300 (light) for an airy, premium feel, and a crisp 8px-radius secondary card system carries product info on either canvas mode. The system never decorates — no gradient backgrounds on chrome, no atmospheric mesh, no drop shadows beyond a faint section-divide. Imagery does all the heavy lifting: console glamour shots, game key art, and PS Plus tier illustrations occupy 60-90% of every section, with copy compressed into a small editorial slot.

seo:
  title: "PlayStation Design System for React — Blue #0070d1, SST Light 300, 30 components"
  metaDescription: "PlayStation's design system as a DESIGN.md file. Blue #0070d1, PlayStation SST at weight 300, 30 components. For React, Next.js, and AI tools."
  highlights:
    - "Three-canvas chapter rhythm — pure black #000000, true white #ffffff, and PlayStation Blue #0070d1 alternate edge-to-edge with no decorative dividers"
    - "Display headlines render at weight 300 — unusual for a gaming brand, giving the chrome an airy editorial voice over typographic muscle"
    - "Two-color CTA grammar — PlayStation Blue #0070d1 for marketing pills, Commerce Orange #d53b00 reserved exclusively for store actions"
    - "Single permitted gradient — the PS Plus gold three-stop #ffce21 to #ee8e00, never reused on other chrome surfaces"
    - "Imagery occupies 60-90% of every band — console renders, game key art, and tier illustrations carry the storytelling, copy is compressed"
  tags:
    - "Gaming & Entertainment"
    - "Consumer Electronics"
  lastUpdated: "2026-05-12"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    PlayStation's marketing system reads like a console launch trailer broken into chapters. Each section is a full-bleed band in one of three canvases — pure black "#000000", true white "#ffffff", or PlayStation Blue "#0070d1" — and the band's surface color is the only divider between chapters. No mesh, no gradient transition, no decorative rule. The signature move is typographic: PlayStation SST renders display headlines at weight 300 (light), an editorial choice for a brand that could easily reach for heavy geometric display faces. Headline sizes step in tight increments at 54px, 44px, 35px, 28px, and 22px, all on a 1.25 line-height ladder, while body settles at 18px with 1.5 line-height for long-form readability on support and game pages.

    This file packages the entire system as a single Google Labs DESIGN.md spec. Inside: 32 color tokens covering brand, surface, ink, hairline, and semantic roles; 15 typography styles all set in PlayStation SST with substitution notes for Roboto Light and Inter; 8 spacing tokens stepping from 4px to a 96px section rhythm; a five-step radius scale where every CTA pill renders at 9999px and every product card at 8px; and 30 component recipes covering primary and commerce buttons, filter pills, game tiles, three hero band variants, the PS Plus gold banner, nav, footer, and the support search field.

    Feed this file to Claude, Cursor, or GitHub Copilot and the AI will generate React components that match PlayStation's actual restraint — flat-on-canvas cards, pill CTAs at "#0070d1", commerce orange at "#d53b00" used only for store actions, and SST display copy at weight 300. Or reference the tokens directly when building marketing pages, console product pages, or game detail surfaces. The system's value as a study is that it proves a gaming brand can win without bold display weights, gradient chrome, or atmospheric backgrounds — imagery does the heavy lifting and the typography stays quiet.
  related:
    - 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."
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "/blocks"
      title: "React blocks for shadcn/ui"
      description: "Production-ready hero, pricing, CTA, and dashboard sections built with Tailwind + shadcn primitives."
  questions:
    - id: "primary-color"
      title: "What is PlayStation's primary brand color?"
      answer: "PlayStation Blue is '#0070d1' — the universal primary CTA fill, footer background, badge color, and active filter chip. The pressed state drops to '#0064b7' and the deeply-pressed active state lands at '#004d8d'. The system also reserves Commerce Orange '#d53b00' as a strict-purpose secondary, used only for store actions like 'Buy now' and 'Pre-order' — never on marketing chrome or hero pills. The blue band is precious: at most one full-bleed PlayStation Blue surface appears per page."
    - id: "typography"
      title: "What typography does PlayStation use, and what should I substitute?"
      answer: "PlayStation SST is the proprietary brand sans-serif covering every text role, with weights 300, 400, 500, 600, and 700. The distinctive choice is using weight 300 for display headlines at 54px, 44px, 35px, 28px, and 22px — unusual for a gaming brand and the source of the system's airy editorial voice. If SST is unavailable, Roboto Light at 300 is the closest match for the display tier, and Inter at 400/500/600 covers body and chrome. Preserve the +0.1px to +0.45px tracking on display and button tiers when substituting."
    - id: "dark-mode"
      title: "Does PlayStation use dark mode?"
      answer: "PlayStation runs three canvases simultaneously rather than a light/dark toggle. The dark canvas '#000000' handles editorial product moments like the home hero and game detail pages, the light canvas '#ffffff' handles utility surfaces like PS5 game listings and the support center, and PlayStation Blue '#0070d1' anchors the highest-priority action moments and the footer. Both light and dark canvases share the same chrome vocabulary — pill CTAs, 8px cards, and SST type — only the surface and on-surface colors change."
    - id: "shape-language"
      title: "What does PlayStation's shape vocabulary look like?"
      answer: "The radius scale runs 0px, 4px, 8px, 16px, and 9999px. Every CTA pill — primary, commerce, and secondary — renders fully-rounded at 9999px. Every product card, game tile, and feature panel renders at 8px. Text inputs sit at 4px. Hero bands, primary nav, footer, and sub-nav all stay flat at 0px because they are full-bleed structural surfaces. The two-radius rhythm of pill plus 8px card is the entire shape system aside from inputs."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a PlayStation-style React project?"
      answer: "Yes — the file is structured for AI tools that read design tokens. Feed it to Claude, Cursor, or Copilot and the agent will produce React components that match PlayStation's restraint: flat-on-canvas cards, 9999px pill CTAs at '#0070d1', SST display headlines at weight 300, and the three-canvas chapter rhythm. You can also reference tokens directly: every color hex, typography size, radius value, and spacing step is a quoted value ready to paste into Tailwind config, CSS custom properties, or a component library."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "Several surfaces fall outside the captured pages, documented in the Known Gaps section. Mobile screenshots were not captured directly — the responsive behavior synthesizes PlayStation's known mobile patterns from desktop evidence. Hover states are not documented per system policy. Sign-in and account dashboard chrome, the PlayStation Store browsing surfaces (PDP, cart, checkout), and per-title game-page theming beyond the Marathon yellow accent '#deff20' are also out of scope. The spec captures the home, PS5 games listing, single game page, and support center."

colors:
  primary: "#0070d1"
  primary-pressed: "#0064b7"
  primary-active: "#004d8d"
  on-primary: "#ffffff"
  link-light: "#0064b7"
  link-dark: "#53b1ff"
  commerce: "#d53b00"
  commerce-pressed: "#aa2f00"
  commerce-link-base: "#d63d00"
  on-commerce: "#ffffff"
  ink: "#000000"
  ink-deep: "#121314"
  ink-elevated: "#181818"
  charcoal: "#1f2024"
  body-light: "rgba(0,0,0,0.6)"
  mute-light: "#6b6b6b"
  ash-light: "#cccccc"
  body-dark: "rgba(255,255,255,0.7)"
  mute-dark: "rgba(229,229,229,0.55)"
  ash-dark: "rgba(229,229,229,0.2)"
  canvas-light: "#ffffff"
  surface-soft: "#f3f3f3"
  surface-card: "#f5f7fa"
  surface-filter: "rgba(245,247,250,0.3)"
  canvas-dark: "#000000"
  surface-dark-elevated: "#121314"
  surface-dark-card: "#181818"
  hairline-light: "#f3f3f3"
  hairline-dark: "rgba(229,229,229,0.2)"
  on-dark: "#ffffff"
  on-dark-mute: "#cccccc"
  warning: "#c81b3a"
  ps-plus-gold-start: "#ffce21"
  ps-plus-gold-mid: "#f5a623"
  ps-plus-gold-end: "#ee8e00"
  marathon-yellow: "#deff20"

typography:
  display-xl:
    fontFamily: PlayStation SST
    fontSize: 54px
    fontWeight: 300
    lineHeight: 1.25
    letterSpacing: -0.1px
  display-lg:
    fontFamily: PlayStation SST
    fontSize: 44px
    fontWeight: 300
    lineHeight: 1.25
    letterSpacing: 0.1px
  display-md:
    fontFamily: PlayStation SST
    fontSize: 35px
    fontWeight: 300
    lineHeight: 1.25
    letterSpacing: 0
  heading-xl:
    fontFamily: PlayStation SST
    fontSize: 28px
    fontWeight: 300
    lineHeight: 1.25
    letterSpacing: 0.1px
  heading-lg:
    fontFamily: PlayStation SST
    fontSize: 22px
    fontWeight: 300
    lineHeight: 1.25
    letterSpacing: 0.1px
  heading-md:
    fontFamily: PlayStation SST
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0
  body-md:
    fontFamily: PlayStation SST
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.1px
  body-strong:
    fontFamily: PlayStation SST
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0.4px
  body-sm:
    fontFamily: PlayStation SST
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  caption-md:
    fontFamily: PlayStation SST
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  caption-sm:
    fontFamily: PlayStation SST
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0
  link-md:
    fontFamily: PlayStation SST
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  button-lg:
    fontFamily: PlayStation SST
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0.45px
  button-md:
    fontFamily: PlayStation SST
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0.324px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 16px
  full: 9999px

spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  section: 96px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-lg}"
    rounded: "{rounded.full}"
    padding: 12px 28px
    height: 48px
  button-primary-pressed:
    backgroundColor: "{colors.primary-pressed}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-lg}"
    rounded: "{rounded.full}"
  button-commerce:
    backgroundColor: "{colors.commerce}"
    textColor: "{colors.on-commerce}"
    typography: "{typography.button-lg}"
    rounded: "{rounded.full}"
    padding: 12px 28px
    height: 48px
  button-commerce-pressed:
    backgroundColor: "{colors.commerce-pressed}"
    textColor: "{colors.on-commerce}"
    typography: "{typography.button-lg}"
    rounded: "{rounded.full}"
  button-secondary-light:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-lg}"
    rounded: "{rounded.full}"
    padding: 12px 28px
    height: 48px
  button-secondary-dark:
    backgroundColor: "transparent"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-lg}"
    rounded: "{rounded.full}"
    padding: 12px 28px
    height: 48px
  button-disabled:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ash-light}"
    rounded: "{rounded.full}"
  text-input:
    backgroundColor: "{colors.canvas-light}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    height: 48px
  text-input-focused:
    backgroundColor: "{colors.canvas-light}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
  filter-pill:
    backgroundColor: "{colors.surface-filter}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: 8px 16px
  filter-pill-active:
    backgroundColor: "{colors.canvas-light}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
  product-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 24px
  product-card-dark:
    backgroundColor: "{colors.surface-dark-card}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 24px
  game-tile:
    backgroundColor: "{colors.surface-dark-elevated}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0px
  feature-card:
    backgroundColor: "{colors.canvas-light}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 32px
  hero-band-blue:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.display-md}"
    rounded: "{rounded.none}"
    padding: 96px 48px
  hero-band-dark:
    backgroundColor: "{colors.canvas-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.none}"
    padding: 96px 48px
  hero-band-light:
    backgroundColor: "{colors.canvas-light}"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.none}"
    padding: 96px 48px
  ps-plus-banner:
    backgroundColor: "{colors.surface-dark-elevated}"
    textColor: "{colors.on-dark}"
    typography: "{typography.heading-xl}"
    rounded: "{rounded.md}"
    padding: 48px 32px
  carousel-paddle:
    backgroundColor: "rgba(255,255,255,0.16)"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.full}"
    size: 48px
  pagination-dot:
    backgroundColor: "{colors.ash-dark}"
    rounded: "{rounded.full}"
    size: 8px
  pagination-dot-active:
    backgroundColor: "{colors.on-dark}"
    rounded: "{rounded.full}"
    size: 8px
  badge-info:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption-sm}"
    rounded: "{rounded.full}"
    padding: 4px 10px
  primary-nav:
    backgroundColor: "{colors.canvas-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-strong}"
    rounded: "{rounded.none}"
    height: 48px
  sub-nav:
    backgroundColor: "{colors.canvas-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.caption-md}"
    rounded: "{rounded.none}"
    height: 40px
  footer-section:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption-md}"
    rounded: "{rounded.none}"
    padding: 48px 32px
  support-search-bar:
    backgroundColor: "{colors.canvas-light}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: 12px 24px
    height: 56px
  support-row:
    backgroundColor: "{colors.canvas-light}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: 16px 0px
  link-inline:
    textColor: "{colors.link-light}"
    typography: "{typography.link-md}"
---

## 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.