playstation-design-analysis

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","_truncated":true}
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":"[Truncated]","size":"[Truncated]"},"pagination-dot-active":"[Truncated]","badge-info":"[Truncated]","primary-nav":"[Truncated]","sub-nav":"[Truncated]","footer-section":"[Truncated]","support-search-bar":"[Truncated]","support-row":"[Truncated]","link-inline":"[Truncated]"}

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 with -0.1px to +0.4px tracking — the brand's signature airy editorial voice