Design System

Play Has
No Limits.

Immersive gaming darkness with electric blue pulse. Bold, confident, and unapologetically modern — built for the living room and beyond.

17 color tokens 10 type steps 4px grid 4 surface levels

\u25B3

\u25CB

\u2715

\u25A1

Download Spec theme.css tokens.json variables.css

Foundation

Color Tokens

Absolute darkness as canvas. PlayStation Blue drives all interactions. 17 tokens across surfaces, text, interaction, and state feedback.

Void Black

#000000

Primary page background

Deep Night

#0a0a0a

Elevated surfaces

Carbon

#1a1a1a

Card surfaces, inputs

Graphite

#2a2a2a

Borders, dividers

Slate

#3a3a3a

Inactive states

Pure White

#ffffff

Primary text, icons

Soft White

#e0e0e0

Secondary text

Cool Gray

#999999

Placeholders, labels

Muted Gray

#666666

Helper text, captions

PlayStation Blue

#003791

Primary brand, CTAs

Electric Blue

#0070d1

Hover states

Neon Blue

#00b0ff

Highlights, focus rings

Trophy Gold

#f5a623

Achievements, rewards

PS Plus Red

#e60012

PS Plus tiers

Success Green

#00c853

Confirmation states

Warning Amber

#ff9100

Caution states

Error Red

#ff1744

Error states

Typography

Type Scale

PS Sans as primary typeface (Inter substitute). Bold, tight letter-spacing for a strong gaming presence. Condensed variant for maximum impact headlines.

Display-lg Play Has No Limits 72px / 1.0 / −0.03em

Display New Releases 56px / 1.0 / −0.03em

Display-sm Featured Games 40px / 1.1 / −0.02em

Heading-lg Explore the collection 32px / 1.15 / −0.02px

Heading Section heading 24px / 1.2 / −0.01px

Heading-sm Subsection heading 20px / 1.3 / −0.01px

Body Default body text for readable content 16px / 1.5 / 0

Body-sm Dense data, comparison rows 14px / 1.5 / 0

Caption Meta info · Labels · System 12px / 1.5 / 0.02px

Fonts

Primary PS Sans 400-700 · 12-22px

Condensed PS Sans Condensed 600-700 · 24-36px · Headlines only

Mono PS Mono 400-700 · 12-16px · Technical only

Fallback Inter Substitute for all above

Layout

Spacing & Shapes

Base unit 4px. Spacious density for an immersive entertainment experience. 14-step spacing scale, 6 border radius values.

Spacing Scale (4px base)

44px

88px

1212px

1616px

2424px

3232px

4848px

9696px

Border Radius

sharp 0px

sm 4px

md 8px

lg / cards 12px

xl 16px

pills 9999px

Elevation

Surfaces

Four surface levels on pure black. Depth is created through subtle brightness shifts, not shadows. The canvas does the work.

Void Black #000000

Deep Night #0a0a0a

Carbon #1a1a1a

Graphite #2a2a2a

Components

Button Variants

Primary CTA (PlayStation Blue), secondary ghost, and interactive elements. All buttons use uppercase text with wide letter-spacing.

Primary CTA Button

Main call to action — purchase, download

.btn-primary

PlayStation Blue (#003791) background, Pure White text, 8px radius, uppercase 700 weight. Hover lightens to Electric Blue (#0070d1).

Secondary Ghost Button

Secondary actions, navigation

.btn-secondary

Pure White text, Graphite border, 8px radius. For less prominent actions that still need visual presence.

Interactive Ghost Button

Tertiary actions, links

.btn-ghost

Neon Blue (#00b0ff) text and border. Clear interactive target for secondary navigation.

Trophy Badge

Achievement indicators

.trophy

Platinum Gold Silver

Trophy Gold (#f5a623) text on Carbon (#1a1a1a) pill background. Use exclusively for trophy and achievement UI.

PS Plus Badge

Subscription tier indicator

.ps-plus-badge

Essential Extra Premium

PS Plus Red (#e60012) gradient background, Pure White text. Use only for PS Plus tier and promotional content.

PS Button Shapes

Controller button indicators

.ps-shape