PlayStation
PlayStation sets restrained SST headlines in a light weight on a light bone white canvas. Cobalt (#0070cc) is reserved for actions, on fully rounded pill buttons, while the rest of the page stays with graphite text and neutral surfaces. The most common corner radius is 16px, with 8px and 4px on smaller elements.
playstation.com ↗Colors
Cobalt
#0070cc
Primary actions and links
Deep Cobalt
#00439c
Secondary accent and highlights
Bone White
#ffffff
Page canvas
Graphite
#1f1f1f
Headlines and body copy
Void
#121314
Surface or divider
Deep Void
#000000
Surface or divider
Fog
#cecdd2
Supporting colour
Ash
#6b6b6b
Supporting colour
Indigo
#26254f
Supporting colour
Type scale
Buttons
Style reference measured from the public page at playstation.com on 2026-10-12 for design education. PlayStation and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.
# PlayStation — Style Reference > PlayStation sets restrained SST headlines in a light weight on a light bone white canvas. Cobalt (#0070cc) is reserved for actions, on fully rounded pill buttons, while the rest of the page stays with graphite text and neutral surfaces. The most common corner radius is 16px, with 8px and 4px on smaller elements. **Theme:** light · **Source:** https://www.playstation.com (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cobalt | `#0070cc` | `--color-accent` | Primary actions and links | | Deep Cobalt | `#00439c` | `--color-secondary` | Secondary accent and highlights | | Bone White | `#ffffff` | `--color-canvas` | Page canvas | | Graphite | `#1f1f1f` | `--color-ink` | Headlines and body copy | | Void | `#121314` | `--color-surface-1` | Surface or divider | | Deep Void | `#000000` | `--color-surface-2` | Surface or divider | | Fog | `#cecdd2` | `--color-surface-3` | Supporting colour | | Ash | `#6b6b6b` | `--color-surface-4` | Supporting colour | | Indigo | `#26254f` | `--color-surface-5` | Supporting colour | ## Typography | Role | Family | Size | Weight | Line height | Tracking | |------|--------|------|--------|-------------|----------| | Display | SST | 39px | 300 | 1.25 | 0.003em | | Heading | sst | 39px | 300 | 1.25 | -0.005em | | Subheading | SST | 25px | 300 | 1.25 | 0.004em | | Body | sst | 16px | 400 | 1.50 | -0.013em | | Nav | SST | 14px | 400 | 1.50 | -0.014em | Font families on the page: SST, Shared-Nav-Icons, sst, AlternateGotNo1D, Arial. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence. ## Shape - Corner radius, most to least used: 16px, 8px, 4px, 32px, 100% - Primary button: background `#0070cc`, text `#ffffff`, radius 999px, padding 0px 8px, 16px / 500
