PlayStation Design System

---

version: alpha

name: PlayStation-design-analysis

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.

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}"

---

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}`, true white `{colors.canvas-light}`, or PlayStation Blue `{colors.primary}` — 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:**

> **Source pages:** `/en-tr/` (home), `/en-tr/ps5/games/` (PS5 games listing), `/en-tr/games/marathon/` (single game page), `/tr-tr/support/account/` (support center). The chrome palette is identical across all four pages; the support page uses the light-canvas mode exclusively while marketing pages alternate.

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xl}` | 54px | 300 | 1.25 | -0.1px | Hero headline ("Discover all PS5 consoles and accessories") |

| `{typography.display-lg}` | 44px | 300 | 1.25 | 0.1px | Section headline ("Great PS4 & PS5 games out now or coming soon") |

| `{typography.display-md}` | 35px | 300 | 1.25 | 0 | Mid-section headline, game-page sub-hero |

| `{typography.heading-xl}` | 28px | 300 | 1.25 | 0.1px | "30 Years of PlayStation" callout, in-band sub-heading |

| `{typography.heading-lg}` | 22px | 300 | 1.25 | 0.1px | News card title, support category title |

| `{typography.heading-md}` | 18px | 600 | 1 | 0 | Card label, navigation menu heading, in-product strong title |

| `{typography.body-md}` | 18px | 400 | 1.5 | 0.1px | Body copy, paragraph text, support article body |

| `{typography.body-strong}` | 18px | 500 | 1.25 | 0.4px | Inline emphasis, primary nav link, button label (large) |

| `{typography.body-sm}` | 16px | 400 | 1.5 | 0 | Card description, secondary body |

| `{typography.caption-md}` | 14px | 400 | 1.5 | 0 | Footer link, metadata, sub-nav text |

| `{typography.caption-sm}` | 12px | 500 | 1.5 | 0 | Smallest utility text, badge label |

| `{typography.link-md}` | 18px | 400 | 1.5 | 0 | Inline body-prose anchor link |

| `{typography.button-lg}` | 18px | 700 | 1.25 | 0.45px | Primary CTA pill |

| `{typography.button-md}` | 14px | 700 | 1.25 | 0.324px | Compact pill, filter chip, secondary CTA |

The hierarchy works on a 1.25-line-height ladder almost exclusively — even body sits at 1.5 instead of the typical 1.6 — which keeps long-form support pages tight and console showcases efficient. The weight contrast between display (300) and button (700) is dramatic: a single 18px chrome line might host a heavyweight CTA next to a feather-light 22px headline, giving the system its editorial gaming-magazine feel.

PlayStation SST is proprietary. The closest open-source substitutes:

When substituting, preserve the +0.1px to +0.45px tracking on display and button tiers — the spacing is part of what makes PlayStation SST feel premium at the light weight.

Whitespace is structural and band-defined. The 96px `{spacing.section}` between chapters reads as silence between trailer cuts — there's no decorative wash, no gradient transition, no mid-section divider. Inside a section, content is left-aligned in a tight column with the imagery breathing in the right 60-70% of the band. Paragraph text is comfortable at 1.5 line-height but column widths stay narrow (~520px at desktop) to keep long-form copy readable.

| Level | Treatment | Use |

|---|---|---|

| 0 — Flat | No border, no shadow | Default for hero bands, footer, full-bleed sections — the dominant treatment |

| 1 — Hairline divider | 1px solid `{colors.hairline-light}` or `{colors.hairline-dark}` | Card borders, support row dividers, footer column rules |

| 2 — Soft active shadow | `0 4px 12px rgba(0,0,0,0.16)` | Active/pressed CTAs, lifted product card |

| 3 — Section gradient | Soft top-to-bottom darkening from `{colors.surface-dark-elevated}` to `{colors.canvas-dark}` | "ON PLAYSTATION" band — only place a gradient appears on chrome |

The system has effectively no resting shadow on cards; depth is built from surface-color contrast across band chapters. Cards lift only on press.

Depth comes from the alternating-band rhythm and from the imagery itself:

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Hero bands, primary nav, footer, sub-nav, support article body — every full-bleed structural surface |

| `{rounded.sm}` | 4px | Text inputs, support search field utilities |

| `{rounded.md}` | 8px | Game tiles, product cards, feature cards, PS Plus banner |

| `{rounded.lg}` | 16px | Rare large container with extra-soft corners (e.g., dialog cards) |

| `{rounded.full}` | 9999px | Every CTA pill (primary / commerce / secondary), filter chips, pagination dots, carousel paddles |

The radius vocabulary works on a 4 / 8 / pill rhythm for chrome with structural surfaces staying flat at 0px.

> **No hover states documented** per system policy. Each spec covers Default and Active/Pressed only.

**`button-primary`** — the universal PlayStation CTA

**`button-commerce`** — orange store CTA

**`button-secondary-light`** — outline variant on light canvas

**`button-secondary-dark`** — outline variant on dark canvas

**`button-disabled`**

**`filter-pill`** + **`filter-pill-active`**

**`text-input`** + **`text-input-focused`**

**`support-search-bar`** — the support-page signature search field

**`product-card`** — light-canvas product/feature card

**`product-card-dark`** — dark-canvas product card

**`game-tile`** — game/console thumbnail tile

**`feature-card`** — light-canvas marketing card

**`hero-band-blue`** — the PlayStation Blue full-bleed band

**`hero-band-dark`** — full-bleed dark hero

**`hero-band-light`** — full-bleed white hero

**`ps-plus-banner`** — PlayStation Plus tier callout

**`carousel-paddle`** — circular carousel control

**`pagination-dot`** + **`pagination-dot-active`**

**`badge-info`** — small info tag

**`link-inline`** — body-prose anchor link

**`primary-nav`**

**`sub-nav`** — secondary nav strip

**Top Nav (Mobile)**

**`footer-section`**

**`support-row`** — support article-list row

| Name | Width | Key Changes |

|---|---|---|

| ultrawide | 1920px+ | Hero band stays at content max-width 1280px; outer gutters grow to ~80px |

| desktop-large | 1440px | Default desktop — 4-up game tile carousel, full primary nav |

| desktop | 1280px | Same layout with narrower outer gutters |

| desktop-small | 1024px | Game tile rail collapses to 3-up; sub-nav remains horizontal |

| tablet | 768px | Game tiles → 2-up; primary nav becomes hamburger drawer |

| mobile | 480px | Single-column everything; hero `{typography.display-xl}` scales 54px → ~32px |

| mobile-narrow | 320px | Section padding tightens to 32px; hero further scales to ~28px |

All interactive elements meet WCAG AAA (≥ 44×44px). `{component.button-primary}` and `{component.button-commerce}` sit at 48px height with 28px horizontal padding (effective ~48×100px tappable). `{component.text-input}` sits at 48px. `{component.support-search-bar}` sits at 56px. `{component.filter-pill}` is ~36–40px height with 16px padding extending to 44px tappable via inline padding. `{component.carousel-paddle}` is exactly 48×48 circular.

1. Focus on ONE component at a time. Pull its YAML entry and verify every property resolves.

2. Reference component names and tokens directly (`{colors.primary}`, `{component.button-primary-pressed}`, `{rounded.full}`) — do not paraphrase.

3. Run `npx @google/design.md lint DESIGN.md` after edits — `broken-ref`, `contrast-ratio`, and `orphaned-tokens` warnings flag issues automatically.

4. Add new variants as separate component entries (`-pressed`, `-disabled`) — do not bury them inside prose.

5. Default body to `{typography.body-md}` (18px / 400 / 1.5); reach for `{typography.display-xl}` strictly for the page-top hero headline; use `{typography.body-strong}` for primary nav links.

6. Keep `{colors.primary}` scarce per viewport — at most one full-bleed PlayStation Blue band per page.

7. When introducing a new component, ask whether it can be expressed with the existing pill + 8px-radius card + full-bleed-band vocabulary before adding new tokens. The system's strength is that it almost never needs new ones.