A three-surface marketing system organized around alternating black, white, and PlayStation Blue chapters that scroll past the viewer like a console launch trailer. PlayStation SST display copy at signature weight 300 (light) gives the chrome an airy, premium feel; bright PlayStation Blue (#0070d1) carries every primary CTA as a fully-rounded pill; commerce orange (#d53b00) anchors store actions. The system never decorates — imagery does all the heavy lifting.
01 — Color
Three-canvas chapter system: black, white, and PlayStation Blue. Commerce orange is reserved for store actions; the gold gradient anchors only the PS Plus tier banner.
Brand & Accent
Surface — Dark Canvas
Surface — Light Canvas
Text Tiers
Semantic & Brand Gradient
02 — Typography
PlayStation SST renders display headlines at weight 300 (light) — the brand's signature airy editorial voice. Heading sizes drop in tight increments with +0.1 to +0.45px tracking on display and button tiers.
03 — Components
PlayStation Blue primary, commerce orange for store actions, transparent secondary on both light and dark canvases — all fully-rounded pills.
04 — Surface Bands
Each section is a full-bleed band — pure black, true white, or PlayStation Blue — each owning one editorial moment. Section-color change IS the divider.
PS Plus Banner
05 — Cards
Game tile, light product card, dark product card, and feature card — all at 8px radius, no resting shadow.
Game Tile Carousel (4-up at desktop)
Product & Feature Cards
PlayStation Store
Light canvas product card with cool-blue-tinted background.
Game Detail
Dark canvas card for product detail and feature panels.
PlayStation Plus
Light canvas marketing card with hairline border, 32px padding.
06 — Support Page
Light-canvas support page chrome with a 56px-tall fully-rounded search bar and stacked article rows separated by 1px Hairline rules.
07 — Forms
4px-radius rectangle inputs at 48px height. Focus relies on a 2px solid PlayStation Blue border replacing the 1px ash default.
08 — Layout
8px base. Section rhythm at 96px is the universal vertical gap between major chapters.
09 — Shapes
Three operative values: 4px for inputs, 8px for cards and tiles, pill (9999px) for every CTA. Hero bands stay flat at 0px.
Hero bands, primary nav, footer, sub-nav
Text inputs, support search field
Game tiles, product cards, PS Plus banner
Rare large container with extra-soft corners
Every CTA pill, filter chips, paddles, dots
10 — Depth
No resting shadows. Cards lift only on press. Depth comes from alternating-band rhythm.
11 — Responsive
7 breakpoint zones. Hero bands stay full-bleed at every breakpoint; only the internal column structure reflows.
| Name | Width | Key Changes |
|---|---|---|
| ultrawide | 1920px+ | Content max-width 1280px; gutters grow to ~80px |
| desktop-large | 1440px | Default — 4-up game tile carousel, full primary nav |
| desktop | 1280px | Same with narrower gutters |
| desktop-small | 1024px | Game tiles → 3-up; sub-nav stays horizontal |
| tablet | 768px | Game tiles → 2-up; primary nav becomes hamburger |
| mobile | 480px | Single-column; hero 54px → ~32px |
| mobile-narrow | 320px | Section padding tightens to 32px |