Design System — PlayStation Design System

Visual Theme & Atmosphere

PlayStation's marketing system reads like a console launch trailer scrolling past the viewer in chapters. Each section is a full-bleed band — pure black {colors.canvas-dark}, true white {colors.canvas-light}, or PlayStation Blue {colors.primary} — and each chapter owns one editorial moment: hero console photography, a games-coming-soon strip, the PlayStation Plus tier banner, the "30 Years of PlayStation" anniversary band, the news strip from the PlayStation Blog. There is no decorative chrome between chapters; the section background change IS the divider. Sections stack at {spacing.section} (96px) rhythm with the next band's color taking over the page edge-to-edge.

The system has two distinct surface modes that alternate down the page: a dark canvas mode for editorial product moments (hero, "ON PLAYSTATION" band, marathon game pages) and a light canvas mode for utility surfaces (PS5 games listing, support pages, news index). Both modes use the same chrome vocabulary — fully-rounded {rounded.full} pill buttons, 8px-radius {rounded.md} cards, the proprietary PlayStation SST face — only the surface and on-surface colors change. The third surface mode is the PlayStation Blue band ({colors.primary} — #0070d1) reserved for the highest-priority moments: the Marathon launch CTA strip, the footer, and any "Action Required" banner.

...

Key Characteristics:

Three-canvas chapter system: {colors.canvas-dark} (black), {colors.canvas-light} (white), {colors.primary} (PlayStation Blue) alternating down the page
...

Live Visual Theme Representation:

Visual Theme Example

Color Palette & Roles

> Source pages: /en-tr/ (home), /en-tr/ps5/games/ (PS5 games listing), /en-tr/games/marathon/ (single game page), /tr-tr/support/account/ (support center). The chrome palette is identical across all four pages; the support page uses the light-canvas mode exclusively while marketing pages alternate.

Brand & Accent

PlayStation Blue ({colors.primary} — #0070d1): the brand's universal primary. Every primary CTA pill, the active filter chip, the footer surface, badge fills, and inline link color on dark surfaces.
PlayStation Blue Pressed ({colors.primary-pressed} — #0064b7): pressed state for the primary pill — also doubles as the inline link color on light surfaces.
...

Surface

Canvas Dark ({colors.canvas-dark} — #000000): pure black hero band, primary nav background, footer base. The dominant surface for editorial product moments.
Surface Dark Elevated ({colors.surface-dark-elevated} — #121314): inset dark panels, PS Plus tier banner background, "ON PLAYSTATION" gradient end.
...

Text

Ink ({colors.ink} — #000000): primary text on {colors.canvas-light}. Headlines, button text, support body.
Ink Deep ({colors.ink-deep} — #121314): warmer near-black for in-card titles on dark surfaces and deep-shadow gradients.
...

Semantic

Warning ({colors.warning} — #c81b3a): validation errors and destructive confirmation copy.
Link Light ({colors.link-light} — #0064b7): inline body-prose anchor link on light canvas — same hex as {colors.primary-pressed}.
...

Brand Gradient

PlayStation Plus Gold Gradient — a horizontal three-stop gold gradient {colors.ps-plus-gold-start} (#ffce21) → {colors.ps-plus-gold-mid} (#f5a623) → {colors.ps-plus-gold-end} (#ee8e00) that anchors the PS Plus banner on the home page. The only gradient in the system; reserved exclusively for PS Plus chrome.

primary

#0070d1

primary-pressed

#0064b7

primary-active

#004d8d

on-primary

#ffffff

link-light

#0064b7

link-dark

#53b1ff

commerce

#d53b00

commerce-pressed

#aa2f00

commerce-link-base

#d63d00

on-commerce

#ffffff

ink

#000000

ink-deep

#121314

ink-elevated

#181818

charcoal

#1f2024

mute-light

#6b6b6b

ash-light

#cccccc

canvas-light

#ffffff

surface-soft

#f3f3f3

surface-card

#f5f7fa

canvas-dark

#000000

surface-dark-elevated

#121314

surface-dark-card

#181818

hairline-light

#f3f3f3

on-dark

#ffffff

on-dark-mute

#cccccc

warning

#c81b3a

ps-plus-gold-start

#ffce21

ps-plus-gold-mid

#f5a623

ps-plus-gold-end

#ee8e00

marathon-yellow

#deff20

Typography Rules

Font Family

PlayStation SST is the proprietary brand sans-serif used across every text role on the site. It carries weights 300 (light), 400 (regular), 500 (medium), 600 (semibold), and 700 (bold), and falls back through sst → Arial → Helvetica. The brand's distinctive choice is using weight 300 (light) for display headlines — unusual for a gaming brand and the source of the system's editorial, airy character.
SST appears as a secondary cut for in-product surfaces, falling back to Helvetica → Arial.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
...	...	...	...	...	...

Principles

The hierarchy works on a 1.25-line-height ladder almost exclusively — even body sits at 1.5 instead of the typical 1.6 — which keeps long-form support pages tight and console showcases efficient. The weight contrast between display (300) and button (700) is dramatic: a single 18px chrome line might host a heavyweight CTA next to a feather-light 22px headline, giving the system its editorial gaming-magazine feel.

Note on Font Substitutes

PlayStation SST is proprietary. The closest open-source substitutes:

Roboto Light (300) for the display tier — its slightly looser letter-spacing matches SST's display optical fit.
Inter at weights 400/500/600 for body and chrome — the closest geometric sans match for SST's body cut.
...

...

Dynamic Preview:

display-xl size: 54px | weight: 300 | height: 1.25 | spacing: -0.1px