primary#0070CC
Play has no limits
A PlayStation preview built from SST-like light headlines, uppercase feature copy, blue actions, orange purchase CTAs, cover tiles, PS Plus tiers, and support glow modules.
01 / Colors
Everyday UI stays white and neutral; high-signal color is reserved for action, purchase, subscription, support, and footer moments.
02 / Typography
Scale is calm; product energy comes from uppercase feature copy and large imagery.
03 / Buttons
04 / Cards & Surfaces
Product information stays quiet, game art gets tactile shadow, and Premium cards use gold.
Clean white product card with low elevation and light heading weight.
Premium tier surface with gold emphasis and structured benefits.
Dark campaign card for cinematic editorial shelves.
Art-forward tile with compact caption and strong dark shadow.
Utility surfaces stay compact and scan-friendly.
Purchase-focused module that reserves orange for the transaction.
05 / Brand-Specific Product Patterns
Cover-art browsing with dark shelf and compact captions.
IMMERSIVE PLAY WITH DUALSENSE
06 / Forms
07 / Spacing
08 / Radius
6px / game covers
8px / media cards
11px / support tiles
12px / cards
9999px / CTAs
09 / Elevation
0 4px 7px rgba(0,0,0,.08)
0 4px 7px rgba(0,0,0,.80)
0 0 4px rgba(16,88,226,.20), inset highlight
10 / Extracted Component Tokens
Core properties used by this preview.
:root {
--brand-primary: #0070CC;
--brand-primary-hover: #0064B7;
--brand-primary-pressed: #0059A3;
--brand-accent: #D53B00;
--brand-accent-hover: #C03500;
--brand-accent-pressed: #AA2F00;
--brand-ink: #000000;
--brand-body: #1F1F1F;
--brand-muted: #6B6B6B;
--brand-canvas: #FFFFFF;
--brand-surface-alt: #F5F7FA;
--brand-link: #0068BD;
--brand-blue-deep: #003697;
--brand-footer-blue: #00439C;
--brand-dark-canvas: #121314;
--brand-dark-surface: #1F2024;
--brand-ps-plus-gold: #FCC71D;
--r-sm: 6px;
--r-md: 8px;
--r-lg: 11px;
--r-xl: 12px;
--r-pill: 9999px;
--s-sm: 14px;
--s-xl: 42px;
--s-section: 56px;
--shadow-low: 0 4px 7px rgba(0,0,0,.08);
}