Section 01 / Palette

Color Palette

PlayStation Blue as the anchor, Cyan reserved for hover states, Commerce Orange for purchase moments.

Primary — Brand Anchor
PlayStation Blue
#0070CC
The anchor. Primary CTAs, footer, and inline link color.
Console Black
#000000
The masthead and hero canvas — framing hardware like a museum piece.
Secondary & Accent
PlayStation Cyan
#1EAEDB
The interaction color. Hover, focus, and active states only — never at rest.
Link Hover Blue
#1883FD
Brighter variant for inline text-link hover states.
Dark Link Blue
#0068BD
Link rest color on light surfaces.
Commerce & Semantic
Commerce Orange
#D53B00
Reserved for PlayStation Store buy CTAs and price callouts.
Commerce Orange Active
#AA2F00
Pressed state for commerce buttons.
Warning Red
#C81B3A
Form errors and destructive warnings.
Surface & Background
Paper White
#FFFFFF
Primary content canvas for editorial panels.
Ice Mist
#F5F7FA
Atmospheric end-stop of the light section gradient.
Shadow Black
#121314
Starting anchor of the dark section gradient.
Divider Tint
#F3F3F3
Quiet horizontal-rule color between content rows.
Neutrals & Text
Deep Charcoal
#1F1F1F
Body headlines and link color at rest.
Body Gray
#6B6B6B
Secondary body text and metadata.
Mute Gray
#CCCCCC
Tertiary labels and disabled states.
Section 02 / Typography

Typographic Hierarchy

SST weight 300 for display — quiet authority. Weights rise to 500–700 only at the UI layer.

Hero Display XLSST · 54px / 300 / 1.25 / -0.1px
Play has no limits
Hero Display LSST · 44px / 300 / 1.25 / 0.1px
Explore the new console
Large DisplaySST · 35px / 300 / 1.25
Feature panel headline
Mid DisplaySST · 28px / 300 / 1.25 / 0.1px
Section heading text
Compact DisplaySST · 22px / 300 / 1.25 / 0.1px
Module title — still in light weight
UI HeadingSST · 18px / 600 / 1.00
Tight UI heading
Primary ButtonSST · 18px / 500 / 1.25 / 0.4px
Primary CTA label
Emphasized ButtonSST · 18px / 700 / 1.25 / 0.45px
Buy PlayStation Plus
Body RelaxedSST · 18px / 400 / 1.50 / 0.1px
Standard reading body — generous leading for product narrative, with just enough letter-spacing to feel composed without looking designed.
Compact ButtonSST · 14px / 700 / 1.25 / 0.324px
Add to Cart
Utility CaptionSST · 14px / 500 / 1.50
Rated E · PS5 · PS4
Micro CaptionSST · 12px / 500 / 1.50
© 2026 Sony Interactive Entertainment LLC
Section 03 / Buttons

Button Variants

Every primary button shares the same hover move: cyan fill, white border, blue ring, scale 1.2×. Hover to see.

Primary — Blue Pill
Secondary — White Outline
Commerce — Orange Pill
Ghost — Transparent
Icon Circle — 100%
Neutral Pill Tag
PS5
Section 04 / Product Tiles

Game Cover Grid

3:4 cover art in 12px rounded frames, feather-weight elevation, commerce-orange prices.

PS5

Astro Bot — Galaxy Edition

$69.99
PS5 · PS4

Horizon Forbidden West

$49.99
PS5

Rift Apart: Beyond Dimensions

$39.99
PSVR2

Synthwave Odyssey VR

$29.99
Section 05 / Forms

Inputs & Newsletter

Tight 3px radius inputs — the one place PlayStation gets genuinely compact. Focus uses a 2px blue ring.

Please enter a valid email address
Section 06 / Spacing

Spacing Scale (8px System)

Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.

1px
2px
5px
8px · base
10px
12px
14px
16px
18px
20px
21px
Section 07 / Radius

Border Radius Scale

Eleven discrete radii — from 2px utility UI to 999px full-pill CTAs.

2pxAdmin UI
3pxInputs, tabs
6pxCompact buttons
12pxMedia, figures
19pxFeature cards
24pxHero cards
36pxSecondary pills
48pxFeature buttons
999pxPrimary pill
100%Icon circles
Section 08 / Elevation

Depth & Elevation

Shadow opacity lands on 0.06 / 0.08 / 0.16 / 0.8 — whispered or shouted, never muttered.

Level 0
Border only — `#f3f3f3` divider tint
Level 1
Feather-weight 0.06 shadow
Level 2
Standard 0.08 tile elevation
Level 3
Emphasized 0.16 active state
Level 4
Dramatic 0.8 hero drop
Level 5
2px #0070CC focus ring
Level 6
2px #000000 hover ring
Level 7
Dark gradient hero surface