playstation-design-analysis

A three-surface marketing system organized around alternating black, white, and PlayStation Blue chapters that scroll past the viewer like a console launch trailer. Each section has a single editorial purpose — hero photography, console product render, PS Plus tier callout, news strip — and each owns one of three full-bleed canvas modes. The chrome is unusually quiet for a gaming brand: bright PlayStation Blue (`#0070d1`) carries every primary CTA as a fully-rounded pill, the proprietary SST face renders display copy at a signature weight 300 (light) for an airy, premium feel, and a crisp 8px-radius secondary card system carries product info on either canvas mode. The system never decorates — no gradient backgrounds on chrome, no atmospheric mesh, no drop shadows beyond a faint section-divide. Imagery does all the heavy lifting: console glamour shots, game key art, and PS Plus tier illustrations occupy 60-90% of every section, with copy compressed into a small editorial slot.

Jump to install

Repository: 1122414/my-skills
Last source activity: August 13, 2026 at 05:20
Detected SKILL.md language: English
Stars: 0
Forks: 0

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/1122414/my-skills --skill playstation-design-analysis

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer

3 files

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

version	alpha
name	PlayStation-design-analysis
description	A three-surface marketing system organized around alternating black, white, and PlayStation Blue chapters that scroll past the viewer like a console launch trailer. Each section has a single editorial purpose — hero photography, console product render, PS Plus tier callout, news strip — and each owns one of three full-bleed canvas modes. The chrome is unusually quiet for a gaming brand: bright PlayStation Blue (`#0070d1`) carries every primary CTA as a fully-rounded pill, the proprietary SST face renders display copy at a signature weight 300 (light) for an airy, premium feel, and a crisp 8px-radius secondary card system carries product info on either canvas mode. The system never decorates — no gradient backgrounds on chrome, no atmospheric mesh, no drop shadows beyond a faint section-divide. Imagery does all the heavy lifting: console glamour shots, game key art, and PS Plus tier illustrations occupy 60-90% of every section, with copy compressed into a small editorial slot.
colors	{"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","body-light":"rgba(0,0,0,0.6)","mute-light":"#6b6b6b","ash-light":"#cccccc","body-dark":"rgba(255,255,255,0.7)","mute-dark":"rgba(229,229,229,0.55)","ash-dark":"rgba(229,229,229,0.2)","canvas-light":"#ffffff","surface-soft":"#f3f3f3","surface-card":"#f5f7fa","surface-filter":"rgba(245,247,250,0.3)","canvas-dark":"#000000","surface-dark-elevated":"#121314","surface-dark-card":"#181818","hairline-light":"#f3f3f3","hairline-dark":"rgba(229,229,229,0.2)","on-dark":"#ffffff","on-dark-mute":"#cccccc","warning":"#c81b3a","_truncated":true}
typography	{"display-xl":{"fontFamily":"PlayStation SST","fontSize":"54px","fontWeight":300,"lineHeight":1.25,"letterSpacing":"-0.1px"},"display-lg":{"fontFamily":"PlayStation SST","fontSize":"44px","fontWeight":300,"lineHeight":1.25,"letterSpacing":"0.1px"},"display-md":{"fontFamily":"PlayStation SST","fontSize":"35px","fontWeight":300,"lineHeight":1.25,"letterSpacing":0},"heading-xl":{"fontFamily":"PlayStation SST","fontSize":"28px","fontWeight":300,"lineHeight":1.25,"letterSpacing":"0.1px"},"heading-lg":{"fontFamily":"PlayStation SST","fontSize":"22px","fontWeight":300,"lineHeight":1.25,"letterSpacing":"0.1px"},"heading-md":{"fontFamily":"PlayStation SST","fontSize":"18px","fontWeight":600,"lineHeight":1,"letterSpacing":0},"body-md":{"fontFamily":"PlayStation SST","fontSize":"18px","fontWeight":400,"lineHeight":1.5,"letterSpacing":"0.1px"},"body-strong":{"fontFamily":"PlayStation SST","fontSize":"18px","fontWeight":500,"lineHeight":1.25,"letterSpacing":"0.4px"},"body-sm":{"fontFamily":"PlayStation SST","fontSize":"16px","fontWeight":400,"lineHeight":1.5,"letterSpacing":0},"caption-md":{"fontFamily":"PlayStation SST","fontSize":"14px","fontWeight":400,"lineHeight":1.5,"letterSpacing":0},"caption-sm":{"fontFamily":"PlayStation SST","fontSize":"12px","fontWeight":500,"lineHeight":1.5,"letterSpacing":0},"link-md":{"fontFamily":"PlayStation SST","fontSize":"18px","fontWeight":400,"lineHeight":1.5,"letterSpacing":0},"button-lg":{"fontFamily":"PlayStation SST","fontSize":"18px","fontWeight":700,"lineHeight":1.25,"letterSpacing":"0.45px"},"button-md":{"fontFamily":"PlayStation SST","fontSize":"14px","fontWeight":700,"lineHeight":1.25,"letterSpacing":"0.324px"}}
rounded	{"none":"0px","sm":"4px","md":"8px","lg":"16px","full":"9999px"}
spacing	{"xxs":"4px","xs":"8px","sm":"12px","md":"16px","lg":"24px","xl":"32px","xxl":"48px","section":"96px"}
components	{"button-primary":{"backgroundColor":"{colors.primary}","textColor":"{colors.on-primary}","typography":"{typography.button-lg}","rounded":"{rounded.full}","padding":"12px 28px","height":"48px"},"button-primary-pressed":{"backgroundColor":"{colors.primary-pressed}","textColor":"{colors.on-primary}","typography":"{typography.button-lg}","rounded":"{rounded.full}"},"button-commerce":{"backgroundColor":"{colors.commerce}","textColor":"{colors.on-commerce}","typography":"{typography.button-lg}","rounded":"{rounded.full}","padding":"12px 28px","height":"48px"},"button-commerce-pressed":{"backgroundColor":"{colors.commerce-pressed}","textColor":"{colors.on-commerce}","typography":"{typography.button-lg}","rounded":"{rounded.full}"},"button-secondary-light":{"backgroundColor":"transparent","textColor":"{colors.ink}","typography":"{typography.button-lg}","rounded":"{rounded.full}","padding":"12px 28px","height":"48px"},"button-secondary-dark":{"backgroundColor":"transparent","textColor":"{colors.on-dark}","typography":"{typography.button-lg}","rounded":"{rounded.full}","padding":"12px 28px","height":"48px"},"button-disabled":{"backgroundColor":"{colors.surface-soft}","textColor":"{colors.ash-light}","rounded":"{rounded.full}"},"text-input":{"backgroundColor":"{colors.canvas-light}","textColor":"{colors.ink}","typography":"{typography.body-md}","rounded":"{rounded.sm}","padding":"12px 16px","height":"48px"},"text-input-focused":{"backgroundColor":"{colors.canvas-light}","textColor":"{colors.ink}","rounded":"{rounded.sm}"},"filter-pill":{"backgroundColor":"{colors.surface-filter}","textColor":"{colors.ink}","typography":"{typography.button-md}","rounded":"{rounded.full}","padding":"8px 16px"},"filter-pill-active":{"backgroundColor":"{colors.canvas-light}","textColor":"{colors.ink}","typography":"{typography.button-md}","rounded":"{rounded.full}"},"product-card":{"backgroundColor":"{colors.surface-card}","textColor":"{colors.ink}","typography":"{typography.body-md}","rounded":"{rounded.md}","padding":"24px"},"product-card-dark":{"backgroundColor":"{colors.surface-dark-card}","textColor":"{colors.on-dark}","typography":"{typography.body-md}","rounded":"{rounded.md}","padding":"24px"},"game-tile":{"backgroundColor":"{colors.surface-dark-elevated}","textColor":"{colors.on-dark}","typography":"{typography.body-sm}","rounded":"{rounded.md}","padding":"0px"},"feature-card":{"backgroundColor":"{colors.canvas-light}","textColor":"{colors.ink}","typography":"{typography.body-md}","rounded":"{rounded.md}","padding":"32px"},"hero-band-blue":{"backgroundColor":"{colors.primary}","textColor":"{colors.on-primary}","typography":"{typography.display-md}","rounded":"{rounded.none}","padding":"96px 48px"},"hero-band-dark":{"backgroundColor":"{colors.canvas-dark}","textColor":"{colors.on-dark}","typography":"{typography.display-xl}","rounded":"{rounded.none}","padding":"96px 48px"},"hero-band-light":{"backgroundColor":"{colors.canvas-light}","textColor":"{colors.ink}","typography":"{typography.display-xl}","rounded":"{rounded.none}","padding":"96px 48px"},"ps-plus-banner":{"backgroundColor":"{colors.surface-dark-elevated}","textColor":"{colors.on-dark}","typography":"{typography.heading-xl}","rounded":"{rounded.md}","padding":"48px 32px"},"carousel-paddle":{"backgroundColor":"rgba(255,255,255,0.16)","textColor":"{colors.on-dark}","rounded":"{rounded.full}","size":"48px"},"pagination-dot":{"backgroundColor":"{colors.ash-dark}","rounded":"[Truncated]","size":"[Truncated]"},"pagination-dot-active":"[Truncated]","badge-info":"[Truncated]","primary-nav":"[Truncated]","sub-nav":"[Truncated]","footer-section":"[Truncated]","support-search-bar":"[Truncated]","support-row":"[Truncated]","link-inline":"[Truncated]"}

Overview

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.

The typography is the system's most distinctive choice. PlayStation SST renders display headlines at weight 300 (light) — unusual for a gaming brand that could easily reach for bold geometric display faces. The light weight gives the chrome an airy, almost editorial quality that lets the imagery speak; copy is information rather than decoration. Heading sizes drop in tight increments (54 → 44 → 35 → 28 → 22 → 18) and body settles at 18px with 1.5 line-height for comfortable long-form reading on support and games pages.

Key Characteristics:

Three-canvas chapter system: {colors.canvas-dark} (black), {colors.canvas-light} (white), {colors.primary} (PlayStation Blue) alternating down the page
PlayStation Blue ({colors.primary} — #0070d1) is the universal primary CTA — fully-rounded pill at {rounded.full} (9999px)
Commerce orange ({colors.commerce} — #d53b00) is the secondary CTA reserved for "Buy now" / "Pre-order" / store actions
PlayStation SST display tier renders at with -0.1px to +0.4px tracking — the brand's signature airy editorial voice

Level	Treatment	Use
0 — Flat	No border, no shadow	Default for hero bands, footer, full-bleed sections — the dominant treatment
1 — Hairline divider	1px solid `{colors.hairline-light}` or `{colors.hairline-dark}`	Card borders, support row dividers, footer column rules
2 — Soft active shadow	`0 4px 12px rgba(0,0,0,0.16)`	Active/pressed CTAs, lifted product card
3 — Section gradient	Soft top-to-bottom darkening from `{colors.surface-dark-elevated}` to `{colors.canvas-dark}`	"ON PLAYSTATION" band — only place a gradient appears on chrome

Token	Value	Use
`{rounded.none}`	0px	Hero bands, primary nav, footer, sub-nav, support article body — every full-bleed structural surface
`{rounded.sm}`	4px	Text inputs, support search field utilities
`{rounded.md}`	8px	Game tiles, product cards, feature cards, PS Plus banner
`{rounded.lg}`	16px	Rare large container with extra-soft corners (e.g., dialog cards)
`{rounded.full}`	9999px	Every CTA pill (primary / commerce / secondary), filter chips, pagination dots, carousel paddles

Name	Width	Key Changes
ultrawide	1920px+	Hero band stays at content max-width 1280px; outer gutters grow to ~80px
desktop-large	1440px	Default desktop — 4-up game tile carousel, full primary nav
desktop	1280px	Same layout with narrower outer gutters
desktop-small	1024px	Game tile rail collapses to 3-up; sub-nav remains horizontal
tablet	768px	Game tiles → 2-up; primary nav becomes hamburger drawer
mobile	480px	Single-column everything; hero `{typography.display-xl}` scales 54px → ~32px
mobile-narrow	320px	Section padding tightens to 32px; hero further scales to ~28px

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display-xl}`	54px	300	1.25	-0.1px	Hero headline ("Discover all PS5 consoles and accessories")
`{typography.display-lg}`	44px	300	1.25	0.1px	Section headline ("Great PS4 & PS5 games out now or coming soon")
`{typography.display-md}`	35px	300	1.25	0	Mid-section headline, game-page sub-hero
`{typography.heading-xl}`	28px	300	1.25	0.1px	"30 Years of PlayStation" callout, in-band sub-heading
`{typography.heading-lg}`	22px	300	1.25	0.1px	News card title, support category title
`{typography.heading-md}`	18px	600	1	0	Card label, navigation menu heading, in-product strong title
`{typography.body-md}`	18px	400	1.5	0.1px	Body copy, paragraph text, support article body
`{typography.body-strong}`	18px	500	1.25	0.4px	Inline emphasis, primary nav link, button label (large)
`{typography.body-sm}`	16px	400	1.5	0	Card description, secondary body
`{typography.caption-md}`	14px	400	1.5	0	Footer link, metadata, sub-nav text
`{typography.caption-sm}`	12px	500	1.5	0	Smallest utility text, badge label
`{typography.link-md}`	18px	400	1.5	0	Inline body-prose anchor link
`{typography.button-lg}`	18px	700	1.25	0.45px	Primary CTA pill
`{typography.button-md}`	14px	700	1.25	0.324px	Compact pill, filter chip, secondary CTA

playstation-design-analysis

Source facts

Install options

Review the source files

More from this repository

More from this repository

Overview

Overview

Colors

Brand & Accent

Surface

Text

Semantic

Brand Gradient

Typography

Font Family

Hierarchy

Principles

Note on Font Substitutes

Layout

Spacing System

Grid & Container

Whitespace Philosophy

Elevation & Depth

Decorative Depth

Shapes

Border Radius Scale

Photography Geometry

Components

Buttons

Filter & Tab Chips

Inputs & Forms

Cards & Containers

Inline

Navigation

Footer

Support-page-specific

Do's and Don'ts

Do

Don't

Responsive Behavior

Breakpoints

Touch Targets

Collapsing Strategy

Image Behavior

Iteration Guide

Known Gaps