name: playstation-design
version: alpha
description: >
  PlayStation's system is anchored by its iconic PS Blue (#0070cc / #0068bd) over a
  white canvas, with deep navy section gradients and an "PlayStation orange" (#d53b00)
  reserved for commerce CTAs ("Shop the sale", "Buy now"). It ships a full light/dark
  theme with semantic color roles. Type is Sony's proprietary "SST" — light weights
  (300) on big headings give an airy, premium feel. Buttons are fully pill; corners
  are otherwise small (2–24px). Signature moves: the PlayStation shapes (○ ✕ □ △),
  blue-to-navy gradients, the yellow PS Plus highlight, and a 12-column mesh grid.
colors:
  # Brand
  primary: '#0068bd'          # PS Blue (color-10) — links, primary buttons, headings accent
  primary-strong: '#0070cc'   # color-17 / --border-color
  on-primary: '#ffffff'
  navy: '#003697'             # color-16 — deep gradient end
  # Commerce CTA
  commerce: '#d53b00'         # color-9 — "Shop the sale" / "Buy now"
  commerce-hover: '#c03500'
  on-commerce: '#ffffff'
  # Surface (light)
  surface: '#ffffff'          # page background primary
  surface-secondary: '#f5f7fa'# color-2
  surface-tertiary: '#ebeef0' # color-3
  # Text
  on-surface: '#000000'       # primary text
  on-surface-secondary: '#6b6b6b' # color-5
  # Hairlines
  hairline: '#f3f3f3'         # divider line (light)
  # Brand accents
  ps-plus: '#fcc71d'          # color-11 — PlayStation Plus yellow
  success: '#007a62'          # color-12
  warning: '#c81b3a'          # color-13
  hint: '#cb2070'             # color-14 — magenta hint text
  # Dark theme (PlayStation ships true dark)
  surface-dark: '#121314'     # color-1-dark
  on-surface-dark: '#ffffff'
  primary-dark: '#53b1ff'     # color-10-dark — lighter blue on dark
typography:
  display:
    fontFamily: '"SST", "Helvetica Neue", Arial, sans-serif'
    fontSize: 53px            # text-10 used for big section heads
    fontWeight: 300
    lineHeight: 1.25
    letterSpacing: 0.1px
  headline-lg:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 34px            # text-8
    fontWeight: 300
    lineHeight: 42.5px
    letterSpacing: 0.1px
  headline-condensed:        # "THIS MAY / ON PLAYSTATION"
    fontFamily: '"SST Condensed", "SST", Arial, sans-serif'
    fontSize: 34px
    fontWeight: 700
    lineHeight: 1.2
    textTransform: uppercase
  subhead:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 22px            # text-6
    fontWeight: 300
    lineHeight: 27.5px
  body-md:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 14px            # text-4 / root
    fontWeight: 400
    lineHeight: 21px
  caption:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 12px            # text-3
    fontWeight: 400
    lineHeight: 1.4
rounded:
  xs: 2px      # corner-size-0
  sm: 3px      # corner-size-1
  md: 6px      # corner-size-2
  lg: 12px     # corner-size-3
  xl: 24px     # corner-size-4
  full: 9999px # buttons / pills
spacing:        # custom scale (px)
  1: 2
  2: 4
  3: 7
  4: 10
  5: 14
  6: 21
  7: 28
  8: 35
  9: 42
  10: 56
  11: 70
  12: 112
components:
  button-primary:              # "Find out more", "Discover PlayStation Plus"
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.body-md}'
    fontWeight: 700
    rounded: '{rounded.full}'
    padding: '16px 28px'
  button-commerce:             # "Shop the sale", "Buy now", "See all deals"
    backgroundColor: '{colors.commerce}'
    textColor: '{colors.on-commerce}'
    typography: '{typography.body-md}'
    fontWeight: 700
    rounded: '{rounded.full}'
  button-light:                # white pill on dark/photo ("Find out more")
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.full}'
  card:
    backgroundColor: 'rgba(255,255,255,0.97)'
    rounded: '{rounded.lg}'
    borderColor: '{colors.hairline}'
  section-gradient-blue: 'linear-gradient(#0068bd, #003697)'
motion:
  easing-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  duration-standard: 300ms
  duration-placeholder: 800ms
icons:
  style: solid
  sizes: { sm: 12px, md: 18px, lg: 28px, xl: 40px }
  color: '{colors.on-surface}'

PlayStation

playstation-design · alpha

Overview

PlayStation.com is built on its iconic PS Blue (#0068bd) sitting over a clean white canvas, with deep blue-to-navy gradients (#0068bd → #003697) carrying the big brand moments. It is a mature, tokenized system with full light and dark themes and semantic color roles (text/background/border × base/hover/focus/active). The commerce layer has its own voltage: a warm PlayStation orange (#d53b00) used exclusively for buy/sale CTAs, so "Buy now" reads differently from a neutral blue "Find out more". Type is Sony's proprietary SST, notably set in light (300) weight at large sizes for an airy, premium tone, with an SST Condensed bold treatment for the dramatic ALL-CAPS "THIS MAY / ON PLAYSTATION" headers. Buttons are fully pill; everything else uses small 2–24px corners. The brand's ○ ✕ □ △ shapes, the PS Plus yellow (#fcc71d), and a 12-column mesh grid round out the identity.

Colors

Brand — primary #0068bd (PS Blue) drives links, primary buttons, and accent headings; primary-strong #0070cc is the focus/border blue. The hero gradient runs #0068bd → navy #003697.

Commerce — commerce #d53b00 (PlayStation orange) is reserved for transactional CTAs ("Shop the sale", "Buy now", "See all deals"), giving purchase actions a distinct, urgent color separate from informational blue.

Surface — white primary, surface-secondary #f5f7fa, surface-tertiary #ebeef0; cards float on near-opaque white (rgba(255,255,255,0.97)).

Text — on-surface #000000 primary, on-surface-secondary #6b6b6b.

Accents — ps-plus #fcc71d (the PS Plus yellow badge), success #007a62, warning #c81b3a, and a magenta hint #cb2070 for helper text.

Dark theme — PlayStation genuinely ships dark: canvas #121314, text white, and a lighter blue primary-dark #53b1ff (blues are brightened on dark so they stay legible).

Typography

Family: SST (Sony's proprietary face), fallback "Helvetica Neue", Arial, sans-serif; an SST Condensed is used for bold uppercase headers, and SST display sizes use weight 300. Root font is 14px. Closest open-source substitutes: Inter or Source Sans 3 for SST, Oswald/Archivo Narrow for the condensed header.

Token	Size	Weight	Line-height	Usage
display	53px	300	1.25	Large section heads ("Discover PlayStation Plus")
headline-lg	34px	300	42.5px	Page H1 / "Discover all PS5…"
headline-condensed	34px	700	1.2	UPPERCASE "THIS MAY / ON PLAYSTATION"
subhead	22px	300	27.5px	Sub-section titles (often PS Blue)
body-md	14px	400	21px	Body / nav
caption	12px	400	1.4	Meta, captions

Type scale (px): 8 / 10 / 12 / 14 / 18 / 22 / 27 / 34 / 43 / 53 / 67.

Layout

A custom px spacing scale (2 / 4 / 7 / 10 / 14 / 21 / 28 / 35 / 42 / 56 / 70 / 112) on a 12-column mesh grid (14px gutter, 42px margins). The page alternates white product sections with dark/navy "editorial" bands. Heavy use of horizontal carousels (consoles & accessories, game tiles, PS Plus tiers, blog posts) with circular blue prev/next controls. Generous whitespace; centered section intros.

Elevation & Depth

Soft, low shadows tokenized as low/high × base/hover/active. Cards rest on a faint hairline + subtle shadow. The brand leans on gradients (accent blue→navy, content, gloss, surface) far more than on heavy shadow. A "gloss" gradient adds a subtle sheen to some surfaces.

Shapes

Corner ladder 2 / 3 / 6 / 12 / 24px plus fully pill buttons. The effect is crisp and product-like — small radii on cards/tiles, pills on actions. The PlayStation ○ ✕ □ △ symbols are a recurring decorative/brand motif.

Components

• button-primary — PS Blue pill, white bold text ("Find out more").
• button-commerce — orange #d53b00 pill for buy/sale actions.
• button-light — white pill (on dark/photo) with dark text.
• card — near-white rgba(255,255,255,0.97), ~12px radius, faint hairline + shadow.
• carousel controls — circular blue buttons with white chevrons; segmented pagination.
• PS Plus tier card — dark gradient panel with a yellow "DELUXE/EXTRA" label.

Motion

Standard ~300ms ease; an 800ms placeholder/skeleton animation for loading media. Carousels slide; hovers brighten. Personality is smooth and premium rather than playful — no bounce, restrained parallax on hero media.

Iconography

Solid glyphs on a tokenized size ladder (12 / 18 / 28 / 40 / 64 / 96px), default on-surface. The PlayStation logo, the PS Plus logo, and the ○ ✕ □ △ face buttons are the core brand marks. Platform tags (PS5/PS4) appear as small pill chips on game tiles.

Do's and Don'ts

• Do use PS Blue #0068bd for primary/info actions and the blue→navy gradient for hero bands.
• Do reserve orange #d53b00 exclusively for commerce (buy/sale) CTAs.
• Do set large headings in light-weight (300) SST; use SST Condensed bold for uppercase headers.
• Do support a true dark theme and brighten blues on dark (#53b1ff).
• Do use fully-pill buttons and small 2–24px corners elsewhere.
• Don't use orange for non-commerce actions or blue for buy buttons.
• Don't set big headlines in heavy weight — the airy 300 weight is the brand tone.
• Don't over-shadow; prefer gradients and hairlines for depth.

Known Gaps

• PlayStation exposes a rich tokenized system (light + dark roles, captured above). Hex values are converted from rgb() triples. "SST" is proprietary — substitute as noted. Some semantic role tokens beyond those listed were omitted for brevity.