PlayStation-design-analysis

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}, 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:

• Three-canvas chapter system: {colors.canvas-dark} (black), {colors.canvas-light} (white), {colors.primary} (PlayStation Blue) 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

Colors

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.

Brand & Accent

• PlayStation Blue ({colors.primary} — #0070d1): the brand's universal primary. Every primary CTA pill, the active filter chip, the footer surface, badge fills, and inline link color on dark surfaces.
• PlayStation Blue Pressed ({colors.primary-pressed} — #0064b7): pressed state for the primary pill — also doubles as the inline link color on light surfaces.
• PlayStation Blue Active ({colors.primary-active} — #004d8d): deeply-pressed state for the primary button.
• Commerce Orange ({colors.commerce} — #d53b00): the secondary CTA reserved for store/buy/pre-order actions. The only warm color in the system.
• Commerce Orange Pressed ({colors.commerce-pressed} — #aa2f00): pressed state for commerce buttons.
• Marathon Yellow ({colors.marathon-yellow} — #deff20): a single high-saturation game-page accent extracted from Marathon's product palette — used only inside the dedicated /marathon/ game page chrome and not part of the system's general accent vocabulary.

Surface

• Canvas Dark ({colors.canvas-dark} — #000000): pure black hero band, primary nav background, footer base. The dominant surface for editorial product moments.
• Surface Dark Elevated ({colors.surface-dark-elevated} — #121314): inset dark panels, PS Plus tier banner background, "ON PLAYSTATION" gradient end.
• Surface Dark Card ({colors.surface-dark-card} — #181818): game tile fill, dark product card background.
• Canvas Light ({colors.canvas-light} — #ffffff): true white console-showcase band, support page body, news strip background.
• Soft Surface ({colors.surface-soft} — #f3f3f3): hairline-soft band fill on light pages, divider rule on light surfaces.
• Surface Card ({colors.surface-card} — #f5f7fa): cool-blue-tinted product card and tier-card background on light canvas.
• Surface Filter ({colors.surface-filter} — rgba(245,247,250,0.3)): translucent fill for filter-pill default state on light canvas.
• Hairline Light ({colors.hairline-light} — #f3f3f3): 1px divider rule on light pages.
• Hairline Dark ({colors.hairline-dark} — rgba(229,229,229,0.2)): translucent 1px divider on dark canvas.

Text

• Ink ({colors.ink} — #000000): primary text on {colors.canvas-light}. Headlines, button text, support body.
• Ink Deep ({colors.ink-deep} — #121314): warmer near-black for in-card titles on dark surfaces and deep-shadow gradients.
• Ink Elevated ({colors.ink-elevated} — #181818): the lightest of the dark-canvas inks, used for elevated card backgrounds.
• Body Light ({colors.body-light} — rgba(0,0,0,0.6)): translucent body text on light canvas — the system's default paragraph color.
• Mute Light ({colors.mute-light} — #6b6b6b): metadata text and footer link captions on light canvas.
• Ash Light ({colors.ash-light} — #cccccc): disabled-state text and lowest-emphasis utility on light surfaces.
• On Dark ({colors.on-dark} — #ffffff): primary text on {colors.canvas-dark} — headlines, button text on dark hero bands.
• Body Dark ({colors.body-dark} — rgba(255,255,255,0.7)): translucent body text on dark canvas.
• On Dark Mute ({colors.on-dark-mute} — #cccccc): secondary text and disabled state on dark surfaces.
• Mute Dark ({colors.mute-dark} — rgba(229,229,229,0.55)): captions and metadata on dark canvas.

Semantic

• Warning ({colors.warning} — #c81b3a): validation errors and destructive confirmation copy.
• Link Light ({colors.link-light} — #0064b7): inline body-prose anchor link on light canvas — same hex as {colors.primary-pressed}.
• Link Dark ({colors.link-dark} — #53b1ff): inline body-prose anchor link on dark canvas — a brightened blue for dark-mode legibility.

Brand Gradient

• PlayStation Plus Gold Gradient — a horizontal three-stop gold gradient {colors.ps-plus-gold-start} (#ffce21) → {colors.ps-plus-gold-mid} (#f5a623) → {colors.ps-plus-gold-end} (#ee8e00) that anchors the PS Plus banner on the home page. The only gradient in the system; reserved exclusively for PS Plus chrome.

Typography

Font Family

• PlayStation SST is the proprietary brand sans-serif used across every text role on the site. It carries weights 300 (light), 400 (regular), 500 (medium), 600 (semibold), and 700 (bold), and falls back through sst → Arial → Helvetica. The brand's distinctive choice is using weight 300 (light) for display headlines — unusual for a gaming brand and the source of the system's editorial, airy character.
• SST appears as a secondary cut for in-product surfaces, falling back to Helvetica → Arial.

Hierarchy

Principles

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.

Note on Font Substitutes

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

• Roboto Light (300) for the display tier — its slightly looser letter-spacing matches SST's display optical fit.
• Inter at weights 400/500/600 for body and chrome — the closest geometric sans match for SST's body cut.
• Source Sans Pro Light (300) as an alternative for the display tier when Roboto reads too utilitarian.

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.

Layout

Spacing System

• Base unit: 8px (with finer 4/12px steps for tight inline gaps).
• Tokens (front matter): {spacing.xxs} (4px) · {spacing.xs} (8px) · {spacing.sm} (12px) · {spacing.md} (16px) · {spacing.lg} (24px) · {spacing.xl} (32px) · {spacing.xxl} (48px) · {spacing.section} (96px).
• Universal section rhythm: every page in the set uses {spacing.section} (96px) as the vertical gap between major content blocks. Card grids use {spacing.lg} (24px) gutters; in-card padding sits at {spacing.lg} to {spacing.xl} depending on density.
• Hero band padding: 96px vertical / 48px horizontal — the largest spacing in the system, reserved for full-bleed surface chapters.

Grid & Container

• Max width: ~1280px content area for body text on desktop with 24px gutters that expand to ~48px at ultrawide. Hero bands and game-tile rails go full-bleed with no max-width constraint on imagery.
• Game tile carousel: 4-up at desktop with horizontal scroll on the same row, collapsing to 3-up at 1024px and 2-up at 768px. Each tile uses 16:9 cover art at {rounded.md}.
• Console showcase grid: desktop 5-column thumbnail strip below the main hero render, collapsing to 3-up + horizontal scroll at tablet.
• Support page: desktop 2-column 30/70 split (sidebar nav + article body), collapsing to single-column with the sidebar promoted to a top accordion at mobile.
• News strip: 3-up card grid at desktop, 2-up at tablet, 1-up at mobile.

Whitespace Philosophy

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.

Elevation & Depth

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

Decorative Depth

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

• Console product photography — DualSense controller and PS5 console renders shot on neutral white with crisp edge lighting, full-bleed inside the light-canvas band.
• Game key art — full-bleed cinematic stills (Marathon, the latest blockbuster releases) inside dark-canvas bands with title lockup overlaid in the lower-left.
• PS Plus tier banner — a subtle horizontal gold gradient ({colors.ps-plus-gold-start} → {colors.ps-plus-gold-end}) sits as the only chrome gradient in the system, anchoring the "Discover PlayStation Plus" CTA.
• "ON PLAYSTATION" gradient band — top-to-bottom deepening from {colors.surface-dark-elevated} (#121314) to {colors.canvas-dark} (#000000) creates a cinematic dimming effect under the anniversary callout.

Shapes

Border Radius Scale

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

Photography Geometry

• Hero console render: large centered console + DualSense composition on white, ~70% width of the band, with copy slot to the left.
• Game tiles: 16:9 key art at {rounded.md} (8px), 4-up rail at desktop with horizontal carousel.
• Marathon game page hero: full-bleed cinematic 16:9 still with the "MARATHON" wordmark in the lower-left at light weight, brand yellow {colors.marathon-yellow} accent on a few small UI tags.
• News card thumbnails: 16:9 imagery at {rounded.md} with a small text block below.
• Avatar / brand icons: 32–40px circles for sub-nav social row.

Components

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

Buttons

button-primary — the universal PlayStation CTA

• Background {colors.primary} (PlayStation Blue), text {colors.on-primary}, type {typography.button-lg}, padding 12px 28px, height ~48px, rounded {rounded.full}.
• Used for "Add to bag", "Sign up", "Learn more", "Subscribe" — every primary action across both light and dark canvases.
• Pressed state lives in button-primary-pressed — background drops to {colors.primary-pressed} (#0064b7).

button-commerce — orange store CTA

• Background {colors.commerce} (#d53b00), text {colors.on-commerce}, type {typography.button-lg}, padding 12px 28px, height ~48px, rounded {rounded.full}.
• Reserved for "Buy now", "Pre-order", "Add to cart" — store actions only. The only warm color in the system.
• Pressed state lives in button-commerce-pressed — background drops to {colors.commerce-pressed}.

button-secondary-light — outline variant on light canvas

• Background transparent, text {colors.ink}, 1px solid {colors.ash-light} border, type {typography.button-lg}, padding 12px 28px, height ~48px, rounded {rounded.full}.
• Lower-emphasis CTA on white surfaces ("Learn more →", "Watch trailer").

button-secondary-dark — outline variant on dark canvas

• Background transparent, text {colors.on-dark}, 1px solid {colors.hairline-dark}, type {typography.button-lg}, padding 12px 28px, height ~48px, rounded {rounded.full}.
• Same role as the light variant but inverted for use on {colors.canvas-dark} hero bands.

button-disabled

• Background {colors.surface-soft}, text {colors.ash-light}, rounded {rounded.full} — flat soft gray.

Filter & Tab Chips

filter-pill + filter-pill-active

• Default: background {colors.surface-filter} (translucent), text {colors.ink}, type {typography.button-md}, padding 8px 16px, rounded {rounded.full}.
• Active: background flips to {colors.canvas-light} (opaque white) — the chip "lifts" from the translucent default.
• Used in the PS5 games filter strip ("All", "Coming Soon", "PlayStation VR2", "Recently Released").

Inputs & Forms

text-input + text-input-focused

• Default: background {colors.canvas-light}, text {colors.ink}, 1px solid {colors.ash-light}, type {typography.body-md}, padding 12px 16px, height ~48px, rounded {rounded.sm} (4px).
• Focused: 2px solid {colors.primary} border, no halo (relies on the border weight increase as the focus signal).

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

• Background {colors.canvas-light}, text {colors.ink}, type {typography.body-md}, padding 12px 24px, height ~56px, rounded {rounded.full}.
• Sits at the top of the support page hero with a magnifier icon at the left edge and "Search the support center" placeholder.

Cards & Containers

product-card — light-canvas product/feature card

• Container: background {colors.surface-card} (#f5f7fa cool-blue-tinted), 1px solid {colors.hairline-light} (rare; usually borderless), padding {spacing.lg} (24px), rounded {rounded.md} (8px).
• Used for the "PlayStation Store" sale callout, news cards, and PS Plus tier comparison cards on light canvas.

product-card-dark — dark-canvas product card

• Container: background {colors.surface-dark-card} (#181818), padding {spacing.lg}, rounded {rounded.md}.
• Used for game-detail cards and dark-canvas feature panels.

game-tile — game/console thumbnail tile

• Container: background {colors.surface-dark-elevated}, padding 0, rounded {rounded.md}.
• Layout: 16:9 cover art at full bleed inside the radius, with title + platform tag overlaid at the bottom-left in {typography.body-sm}.
• Used in the "Great PS4 & PS5 games" rail and the PS5 games listing grid.

feature-card — light-canvas marketing card

• Container: background {colors.canvas-light}, padding {spacing.xl} (32px), rounded {rounded.md}.
• Used for the "PlayStation Store" hero card and similar feature panels with a small product icon, title, body, and CTA.

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

• Background {colors.primary}, text {colors.on-primary} in {typography.display-md}, padding 96px 48px, rounded {rounded.none}.
• The Marathon launch CTA strip and the footer surface use this band. The band's defining purpose is "this is the action moment of the page."

hero-band-dark — full-bleed dark hero

• Background {colors.canvas-dark} (with optional gradient end at {colors.surface-dark-elevated}), text {colors.on-dark} in {typography.display-xl}, padding 96px 48px, rounded {rounded.none}.
• The home-page hero, the game-detail page hero, and the "ON PLAYSTATION" anniversary band.

hero-band-light — full-bleed white hero

• Background {colors.canvas-light}, text {colors.ink} in {typography.display-xl}, padding 96px 48px, rounded {rounded.none}.
• The console showcase band ("Discover all PS5 consoles and accessories") and the support page top.

ps-plus-banner — PlayStation Plus tier callout

• Background {colors.surface-dark-elevated} with the {colors.ps-plus-gold-start} → {colors.ps-plus-gold-end} gold gradient as a horizontal accent bar across the top, text {colors.on-dark} in {typography.heading-xl}, padding 48px 32px, rounded {rounded.md}.
• The "Discover PlayStation Plus" full-width banner on the home page.

carousel-paddle — circular carousel control

• Background rgba(255,255,255,0.16), icon {colors.on-dark}, rounded {rounded.full}, size 48px.
• Anchored to the left/right edge of the game tile carousel.

pagination-dot + pagination-dot-active

• 8px circle at {rounded.full}. Default fill {colors.ash-dark}; active fill {colors.on-dark}.
• Carousel position indicator below the game tile rail.

Inline

badge-info — small info tag

• Background {colors.primary}, text {colors.on-primary} in {typography.caption-sm}, padding 4px 10px, rounded {rounded.full}.
• "New", "Pre-order", "Coming Soon" labels overlaid on game tiles.

link-inline — body-prose anchor link

• {colors.link-light} text on light canvas / {colors.link-dark} on dark canvas, no underline by default. Inline body links inside support article paragraphs.

Navigation

primary-nav

• Background {colors.canvas-dark}, text {colors.on-dark}, height ~48px, type {typography.body-strong}, rounded {rounded.none}.
• Layout (desktop): PlayStation P-logo at far-left, centered nav row ("Games · PS5 · PS4 · PS VR2 · Subscriptions · Hardware · Mobile · News · Shop · Support"), right cluster (search-glyph + locale + cart icon + user-avatar circle).

sub-nav — secondary nav strip

• Background {colors.canvas-dark}, text {colors.on-dark} in {typography.caption-md}, height ~40px, rounded {rounded.none}.
• Sits directly below the primary nav on PS5 games / single game / PS Plus pages with section-specific anchor links.

Top Nav (Mobile)

• Hamburger menu icon at left, P-logo at center, search + cart icons at right. Primary nav collapses into a full-screen dark drawer that slides from the left.

Footer

footer-section

• Background {colors.primary} (PlayStation Blue), text {colors.on-primary} in {typography.caption-md}, padding {spacing.xxl} (48px) vertical.
• Layout: large PlayStation wordmark at top-left, multi-column link grid (locale selector, store links, account, support, social), bottom row with terms / privacy fine-print in {typography.caption-sm}.
• The footer's blue surface is the system's "we're done — return to the brand" anchor.

Support-page-specific

support-row — support article-list row

• Background {colors.canvas-light}, text {colors.ink} in {typography.body-md}, padding 16px 0, with a 1px {colors.hairline-light} bottom rule.
• Used for FAQ / category-listing rows on the support page with a small chevron-right icon at the right edge.

Do's and Don'ts

Do

• Reserve {colors.primary} (PlayStation Blue) for primary CTAs and the footer surface only. The blue band is precious — at most one full-bleed blue band per page.
• Reserve {colors.commerce} (orange) for store/buy/pre-order CTAs only. It is never used on marketing chrome or hero pills.
• Use PlayStation SST at weight 300 for display headings (54 / 44 / 35 / 28 / 22). The light weight is the brand voice.
• Stack content sections at {spacing.section} (96px) rhythm with the next band's surface color taking over the page edge-to-edge — no decorative dividers between bands.
• Use {rounded.full} (9999px) on every CTA pill and {rounded.md} (8px) on every product card. The two-radius vocabulary is the entire shape system aside from inputs.
• Pair full-bleed game key art and console renders inside dark or light bands; let imagery occupy 60-90% of the band's vertical height.
• Use {component.ps-plus-banner} with the gold gradient exclusively for the PlayStation Plus tier callout — never decorate other components with the gold.

Don't

• Don't introduce drop shadows on resting cards. The system is flat-on-canvas; cards lift only on press.
• Don't replace {colors.primary} with another shade of blue. The brand blue is precise — #0070d1 for default and #0064b7 for pressed.
• Don't use {colors.commerce} (orange) on marketing/hero CTAs. It's reserved exclusively for store actions.
• Don't introduce a sans-serif body font, italic, or monospace style. PlayStation SST carries every text role.
• Don't soften pill geometry. CTAs are always {rounded.full} — no medium-radius buttons.
• Don't use the gold PS Plus gradient on anything that isn't the PS Plus banner. It is a tier-specific brand asset.
• Don't put a gradient on chrome. The only allowed gradient is the gold PS Plus accent and the soft top-to-bottom darkening of the "ON PLAYSTATION" band.

Responsive Behavior

Breakpoints

Touch Targets

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.

Collapsing Strategy

• Primary nav: desktop horizontal cluster → tablet hamburger drawer at 768px. The right-cluster icons (search, cart, account) stay visible at every breakpoint.
• Sub-nav: desktop horizontal anchor row → tablet horizontal scroll → mobile select dropdown.
• Game tile carousel: 4-up → 3-up → 2-up at 1024 and 768px; carousel paddles stay visible at every desktop breakpoint, hide on mobile in favor of touch-swipe.
• Hero bands: stay full-bleed at every breakpoint; only the internal content column reflows from 2-column (text-left + image-right) to single-column (text above image).
• Console showcase: desktop 5-up thumbnail strip → tablet 3-up + horizontal scroll → mobile 1-up with paddle.
• Support page: desktop 30/70 split (sidebar + body) → tablet sidebar promoted to top accordion → mobile fully collapsed accordion.
• Section padding: {spacing.section} (96px) desktop → 64px tablet → 48px mobile.
• Hero headline: {typography.display-xl} (54px) at desktop, scaling 44px / 32px / 28px down the breakpoint stack.

Image Behavior

• Hero imagery (console renders, game key art) uses art-direction crops on mobile so the central subject stays centered when the band collapses to single-column.
• Game tile cover art preserves 16:9 ratio at every breakpoint; only the column count changes.
• Console showcase thumbnails maintain their natural aspect (~1:1 product render) across breakpoints.
• All non-critical imagery is lazy-loaded as the user scrolls into the next chapter.

Iteration Guide

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.

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} 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} color token.