PlayStation

version alpha

name PlayStation

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

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