packages/shared-skills/skills/frontend/references/design/playstation.md
PlayStation.com carries itself like the marketing wing of a premium consumer-electronics brand that happens to sell entertainment. The page is organized as a vertical channel of alternating surfaces: a near-black masthead and hero, a sequence of paper-white editorial panels in the middle, and a deep cobalt-blue footer that anchors the entire experience. Between those surface modes the site leans hard on photography and 3D product renders — the PS5 console, game cover art, DualSense controllers — letting the hardware do the emotional work while the chrome stays restrained.
The signature typographic move is SST Light (weight 300) at large sizes. Sony's custom SST family is used from 22px up to 54px in weight 300, giving display headlines a whispered, elegant quality that feels closer to a luxury watch ad than a game store. That "quiet authority" is the exact opposite of The Verge's Manuka shout or Wired's newsstand density — PlayStation wants the type to recede and the product to lead. Body and UI lean on weights 500–700, but the display voice is consistently thin and calm.
The one place restraint breaks is interaction. Every primary button has the same hover move: fill swaps to an electric cyan #1eaedb, a 2px white border appears, a 2px PlayStation-blue outer ring blooms behind it, and the entire button scales up 1.2×. That combination of color pop, border, ring, and lift-scale is a signature move unique to Sony among major brands — a miniature "power-on" animation that the site repeats hundreds of times across a single page.
Key Characteristics:
#0070cc as the brand anchor; cyan #1eaedb reserved exclusively for hover/focus states#d53b00 used exclusively for PlayStation Store / buy-state CTAs#0070cc): The brand's anchor color. Used on the primary footer, inline links, primary button fills on dark surfaces, and every "official" marker. Treat this as immovable — it is the color the brand is most associated with in consumer memory.#000000): Pure black for the masthead, hero backdrops, and product presentation zones. PlayStation uses black to frame hardware the way a museum uses black to frame a sculpture.#1eaedb): The interaction color. Applied ONLY to hover, focus, and active states of buttons and links. Never appears as a default background or a text color at rest. Pair with a 2px #ffffff border and a 2px #0070cc outer ring on hover for the full signature treatment.#1883fd): The brighter variant used on inline text-link hovers. Distinct from Cyan — this is the link color, Cyan is the button color.#0068bd): The link color at rest on light surfaces — a slightly more saturated cousin of the brand blue.#ffffff): Primary content canvas for editorial panels between the masthead and footer.#f5f7fa): The atmospheric end-stop of the light section-gradient. Used subtly behind certain panels to lift them off pure white.#f3f3f3): The quiet horizontal-rule color between content rows.#000000): Top nav and hero canvas — reserved for product-forward zones.#121314): The starting anchor of the dark section-gradient when a panel needs atmospheric depth.rgba(245, 247, 250, 0.3)): Translucent background used behind sticky filter bars — the only "glassmorphism" moment on the site.#000000): Primary display headlines on white surfaces.#1f1f1f): Body headlines and link color at rest — slightly softer than pure black to reduce visual ring on large blocks.#6b6b6b): Secondary body text and metadata.#cccccc): Tertiary labels, disabled states.rgba(0, 0, 0, 0.6)): Form placeholder text — 60% black, not a separate gray value.#ffffff): Primary text on dark and blue surfaces.#53b1ff): The link color at rest on dark/black surfaces — a lighter airborne variant of PlayStation Blue for legibility on black.#d53b00): Reserved for PlayStation Store buy-state CTAs, price callouts, and "on sale" badges. The only warm color on the site — use sparingly and never outside a commerce context.#aa2f00): The pressed/active state of commerce buttons.#c81b3a): Form errors and destructive-action warnings.rgba(0, 0, 0, 0.8)): The dramatic scrim used behind hero text on product photography.rgba(0, 0, 0, 0.16)): Low-weight elevation ring on cards.rgba(0, 0, 0, 0.08)): Featherweight card elevation — barely visible but separates white panels from white background.rgba(0, 0, 0, 0.06)): The lightest shadow in the system.PlayStation uses two section gradients and nothing else:
#ffffff → #f5f7fa — an almost-imperceptible wash that quietly lifts a panel off the canvas.#121314 → #000000 — a short vertical wash that gives hero panels a subtle vignette without introducing any hue shift.Both gradients are used only as section backgrounds, never inside components. There are no gradient buttons, no gradient text, no glowing halos. The brand is blue — not blue-to-purple, not blue-to-cyan.
Arial, Helvetica. Sony's custom global typeface, designed by Toshi Omagari and Akira Kobayashi. Covers weights 300 / 500 / 600 / 700 across the homepage. The weight 300 at 22–54px is PlayStation's typographic signature.helvetica, arial. A compressed variant used in a handful of UI modules where width matters.| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Hero Display (XL) | SST | 54px / 3.38rem | 300 | 1.25 | -0.1px | The biggest SST moment on the page — quiet-weight luxury headline |
| Hero Display (L) | SST | 44px / 2.75rem | 300 | 1.25 | 0.1px | Secondary hero headlines |
| Large Display | SST | 35px / 2.20rem | 300 | 1.25 | — | Feature panel headlines |
| Mid Display | SST | 28px / 1.75rem | 300 | 1.25 | 0.1px | Section headings |
| Compact Display | SST | 22px / 1.38rem | 300 | 1.25 | 0.1px | Module titles — still in light weight 300 |
| Playstation SST Sub | Playstation SST | 22.5px / 1.41rem | 400 | 1.30 | — | Promotional sub-heading |
| UI Heading Small | SST | 18px / 1.13rem | 600 | 1.00 | — | Tight UI headings |
| Button / CTA | SST | 18px / 1.13rem | 500 | 1.25 | 0.4px | Primary button label |
| Button / Emphasized | SST | 18px / 1.13rem | 700 | 1.25 | 0.45px | Higher-emphasis CTAs (buy, subscribe) |
| Button Serif | SST | 18px / 1.13rem | 600 | 1.50 | — | Secondary button label |
| Body Relaxed | SST | 18px / 1.13rem | 400 | 1.50 | 0.1px | Standard reading body |
| Link Body | SST | 18px / 1.13rem | 400 | 1.50 | — | Inline link text |
| Compact Button | SST | 14px / 0.88rem | 700 | 1.25 | 0.324px | Mini CTAs in cards |
| Utility Caption | SST | 14px / 0.88rem | 500 | 1.50 | — | Captions, tag labels |
| Caption Body | SST | 14px / 0.88rem | 400 | 1.50 | — | Standard metadata |
| Playstation Caption Bold | Playstation SST | 14px / 0.88rem | 700 | 1.40 | — | Emphasized caption |
| Playstation Caption Mid | Playstation SST | 14px / 0.88rem | 600 | 1.40 | — | Semi-bold caption |
| Playstation Button | Playstation SST | 14.4px / 0.90rem | 700 | 1.00 | 0.144px | UI button with tight leading |
| Playstation Tab | Playstation SST | 14px / 0.88rem | 400 | 1.10 | 0.14px | Tab/pill label |
| Playstation Compact Caption | Playstation SST | 12.8px / 0.80rem | 400 | 1.10 | — | Smallest UI caption |
| Micro Caption | SST | 12px / 0.75rem | 500 | 1.50 | — | Footer microcopy, legal text |
| Compact Caption Bold | SST | 12.06px / 0.75rem | 700 | 1.50 | — | Emphasized micro text |
-0.1px on the 54px hero tightens the display type just enough to read as "designed" without becoming a typographic statement.Primary — PlayStation Blue Pill
#0070cc (PlayStation Blue)#ffffff, SST 18px / 500 / 0.4px tracking999px — full pill12px 24px (variable based on size class)rgb(255, 255, 255) none 0px at rest#1eaedb (PlayStation Cyan)#ffffff#ffffff border appears#0070cc outer ring shadow blooms (0 0 0 2px #0070cc)transform: scale(1.2) — the button actually grows 20%opacity: 0.6 — a quick dim to signal pressrgb(0, 114, 206) 0px 0px 0px 2px focus shadowSecondary — White Outline on Dark
#ffffff#0172ce (PlayStation Blue variant)2px outset #000000 — a genuine outset border, which is extremely rare in modern CSS999px or 36px)16px 20pxCommerce Orange
#d53b00 (Commerce Orange)#ffffff, SST 18px / 700 / 0.45px tracking999px — pill#aa2f00Transparent Ghost
#1f1f1f (Deep Charcoal)1px solid #dedede0 10px (tight, nav-optimized)#0072ce, opacity 0.6Icon Circle
rgba(0, 0, 0, 0.2) on photography; #ffffff on light surfaces100% — perfect circlevar(--color-role-backgrounds-primary-link-hover) (roughly #e5e5e5 on light)Mini CTA (In-card)
999pxHero Card (Game Feature)
24px or 19px for feature cardsrgba(0, 0, 0, 0.8) 0px 5px 9px 0px — a dramatic drop-shadow only used when a card overlaps the hero photographyGame Cover Tile
12px or 13px (images) / 19px (card frame)rgba(0, 0, 0, 0.08) 0px 5px 9px 0px — feather-weight elevationContent Panel (White)
#ffffff or the light section gradient #ffffff → #f5f7fa12px–24px depending on panel hierarchyrgba(0, 0, 0, 0.06) 0px 5px 9px 0px — the lightest in the systemDark Card on Dark
rgba(0, 0, 0, 0.2) over photography6px (compact) or 24px (feature)#ffffff background, 1px solid #cccccc border, 3px border radius (tighter than the rest of the system — inputs are the one place where PlayStation gets genuinely compact), SST 16px text in #1f1f1f, placeholder rgba(0, 0, 0, 0.6).#0070cc focus ring via box-shadow: 0 0 0 2px #0070cc. No border-color change — the ring does the work.#c81b3a (Warning Red), inline error text below in the same red.#000000) full-bleed strip with the PlayStation logo (white) left-aligned, category links centered in SST 14–16px / 500, and a small "Sign In" CTA right-aligned.#ffffff to #1883fd (Link Hover Blue), no underline.#0070cc.12px, 13px, or 24px depending on card context. Game covers get 6–12px, hero images get 24px.rgba(0, 0, 0, 0.8) 0 5px 9px 0 drop on heroes, feather rgba(0, 0, 0, 0.06) 0 5px 9px 0 on grid tiles.loading="lazy" on everything below the fold, eager on the masthead hero.#ffffff#000000, SST 14px / 50014px 18px9999px — full pill1280–1920px depending on panel.PlayStation treats whitespace like a luxury brand treats store lighting — as a premium signal. There is noticeably more vertical breathing room between modules than on any other major retail site, and the white editorial panels often hold only one headline + one image + one CTA at hero-scale padding. The effect is a "gallery pace" where each product gets its own room rather than competing in a grid of thumbnails.
Eleven discrete radius values — one of the richest radius systems of any site in this catalog. The range exists because PlayStation deliberately uses different radii for different hierarchies: 3px for utility, 12px for media, 24px for features, 999px for CTAs.
| Level | Treatment | Use |
|---|---|---|
| 0 | No shadow | Default content on #ffffff |
| 1 | rgba(0, 0, 0, 0.06) 0 5px 9px 0 | Feather-light editorial panel lift |
| 2 | rgba(0, 0, 0, 0.08) 0 5px 9px 0 | Standard grid tile elevation |
| 3 | rgba(0, 0, 0, 0.16) 0 5px 9px 0 | Emphasized card (hover or active) |
| 4 | rgba(0, 0, 0, 0.8) 0 5px 9px 0 | Hero overlay shadow — dramatic drop used over photography |
| 5 | 0 0 0 2px #0070cc (focus ring) | Primary button focus state |
| 6 | 0 0 0 2px #000000 (hover ring) | Secondary button hover ring |
| 7 | Section gradient #121314 → #000000 | Atmospheric depth on dark hero panels |
PlayStation's depth philosophy is layered but restrained. The shadow scale runs from 0.06 to 0.16 for normal states, then jumps to 0.8 for hero drops — there is no 0.2, 0.3, 0.4 middle ground. The effect is that most of the page sits almost flat, but when a hero card needs to float over photography, it genuinely floats. Elevation is either whispered or shouted, never muttered.
#0070cc) as the primary CTA fill and the footer anchor. It is the brand's anchor color.scale(1.2).999px) on primary and commerce buttons.#1eaedb) exclusively for hover, focus, and active states — never as a resting background.#d53b00) only on PlayStation Store / purchase CTAs and price callouts.rgba(0, 0, 0, 0.8) hero drop shadows when a card overlaps product photography.0.scale(1.2) hover move on primary buttons. The lift-scale is a brand interaction signature.#1eaedb appear as a text or background color at rest. It only exists in motion.| Name | Width | Key Changes |
|---|---|---|
| Small Mobile | <400px | Single column, nav collapses to hamburger, SST hero scales to ~28px |
| Mobile | 400–599px | Single column, tiles stack full-width, padding opens to 16px |
| Large Mobile | 600–767px | Still single column but 2-column tile option in select modules |
| Tablet Portrait | 768–1023px | 2-column game grid, nav still condensed |
| Tablet Landscape | 1024–1279px | 3–4 column grid, full nav restored |
| Desktop | 1280–1599px | Full editorial grid, max hero display scale (44–54px) |
| Large Desktop | 1600–1919px | Container caps at 1600px, margins expand |
| 4K / Big-Screen | ≥1920px | Container expands to 1920px max, hero content scales up to match TV viewing distance |
| Ultra-Wide | ≥2120px | Extreme breakpoint — page stays anchored, outer margins absorb extra width |
The dembrandt sweep detected 30 breakpoints between 320px and 2120px — an unusually wide responsive range. PlayStation tunes specifically for big-screen contexts (1920–2120px) because PS5 owners frequently browse the site on TVs via the console's browser or via cast-to-TV from a phone. Most retail sites stop tuning at 1440px; PlayStation keeps tuning through 4K.
srcset + <picture> with art-direction), aspect ratios preserved per breakpoint.loading="lazy" on everything below the fold; hero is eager with a preload hint.#0070cc)"#1eaedb)"#ffffff)"#000000)"#000000)"#1f1f1f)"#ffffff)"#d53b00)"#0070cc)"#0070cc PlayStation Blue fill, white text in SST 18px / 500 / 0.4px tracking, 999px border radius, 12px × 24px padding. On hover, the background transitions to #1eaedb PlayStation Cyan, a 2px #ffffff border appears, a 2px #0070cc outer ring blooms via box-shadow, and the entire button scales 1.2× — all in a 180ms ease transition."#000000 Console Black canvas with a 54px SST weight 300 headline in #ffffff with -0.1px letter-spacing and 1.25 line-height. Place a single primary CTA below with the standard PlayStation hover treatment. No ALL-CAPS labels anywhere."rgba(0, 0, 0, 0.08) 0 5px 9px 0 drop shadow, a 14px SST 700 title below, a 12px SST 500 platform tag, and a mini 14px / 700 / 0.324px tracking primary CTA in PlayStation Blue."#d53b00 Commerce Orange fill, #ffffff text in SST 18px / 700 / 0.45px tracking, 999px radius, 12px × 28px padding. Active state darkens to #aa2f00. Hover follows the standard cyan-invert with 1.2× scale."#ffffff background with the subtle #ffffff → #f5f7fa light section gradient, 24px border radius, 48px interior padding, feather-weight rgba(0, 0, 0, 0.06) 0 5px 9px 0 elevation, a 35px SST 300 headline, a 18px body paragraph, and a single primary CTA."When refining existing screens generated with this design system:
#0070cc), Cyan (#1eaedb), Commerce Orange (#d53b00), and the declared grays/blacks/whites should appear in chrome. If you see any other hue, correct it.