A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
Playstation, in one page
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 weight 300 with -0.1px to +0.4px tracking — the brand's signature airy editorial voice
- 8px-radius (
{rounded.md}) for product cards and feature panels; 4px-radius ({rounded.sm}) for inputs; pills ({rounded.full}) for every CTA - Game tiles, console renders, and PS Plus tier illustrations occupy 60-90% of each section — imagery does the storytelling
- Color-block page rhythm (one observed band sequence): dark hero → light console showcase → dark "Great PS4 & PS5 games" rail → light "Discover PlayStation Plus" tier band → light "30 years of PlayStation" callout → dark "ON PLAYSTATION" band → light news strip → blue footer
Do's and don'ts
Do
- Reserve
{colors.primary}(PlayStation Blue) for primary CTAs and the footer surface only. The blue band is precious — at most one full-bleed blue band per page. - Reserve
{colors.commerce}(orange) for store/buy/pre-order CTAs only. It is never used on marketing chrome or hero pills. - Use PlayStation SST at weight 300 for display headings (54 / 44 / 35 / 28 / 22). The light weight is the brand voice.
- Stack content sections at
{spacing.section}(96px) rhythm with the next band's surface color taking over the page edge-to-edge — no decorative dividers between bands. - Use
{rounded.full}(9999px) on every CTA pill and{rounded.md}(8px) on every product card. The two-radius vocabulary is the entire shape system aside from inputs. - Pair full-bleed game key art and console renders inside dark or light bands; let imagery occupy 60-90% of the band's vertical height.
- Use
{component.ps-plus-banner}with the gold gradient exclusively for the PlayStation Plus tier callout — never decorate other components with the gold.
Don't
- Don't introduce drop shadows on resting cards. The system is flat-on-canvas; cards lift only on press.
- Don't replace
{colors.primary}with another shade of blue. The brand blue is precise —#0070d1for default and#0064b7for pressed. - Don't use
{colors.commerce}(orange) on marketing/hero CTAs. It's reserved exclusively for store actions. - Don't introduce a sans-serif body font, italic, or monospace style. PlayStation SST carries every text role.
- Don't soften pill geometry. CTAs are always
{rounded.full}— no medium-radius buttons. - Don't use the gold PS Plus gradient on anything that isn't the PS Plus banner. It is a tier-specific brand asset.
- Don't put a gradient on chrome. The only allowed gradient is the gold PS Plus accent and the soft top-to-bottom darkening of the "ON PLAYSTATION" band.
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Playstation design language. Follow the measured tokens below — do not substitute your own palette.
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
Type:
- families: PlayStation SST, Arial, Helvetica, SST
- scale: 12, 14, 16, 18, 22, 28, 35, 44, 54
- weights: 300, 400, 500, 600, 700
Shape:
- radius: 0, 4, 8, 16
Spacing: 4, 8, 12, 16, 24, 32, 48, 96
Rules:
- Reserve `{colors.primary}` (PlayStation Blue) for primary CTAs and the footer surface only. The blue band is precious — at most one full-bleed blue band per pag…
- Reserve `{colors.commerce}` (orange) for store/buy/pre-order CTAs only. It is never used on marketing chrome or hero pills.
- Use PlayStation SST at weight 300 for display headings (54 / 44 / 35 / 28 / 22). The light weight is the brand voice.
- Stack content sections at `{spacing.section}` (96px) rhythm with the next band's surface color taking over the page edge-to-edge — no decorative dividers betwee…
- Use `{rounded.full}` (9999px) on every CTA pill and `{rounded.md}` (8px) on every product card. The two-radius vocabulary is the entire shape system aside from…
- Pair full-bleed game key art and console renders inside dark or light bands; let imagery occupy 60-90% of the band's vertical height.
Avoid:
- Don't introduce drop shadows on resting cards. The system is flat-on-canvas; cards lift only on press.
- Don't replace `{colors.primary}` with another shade of blue. The brand blue is precise — `#0070d1` for default and `#0064b7` for pressed.
- Don't use `{colors.commerce}` (orange) on marketing/hero CTAs. It's reserved exclusively for store actions.
- Don't introduce a sans-serif body font, italic, or monospace style. PlayStation SST carries every text role.
- Don't soften pill geometry. CTAs are always `{rounded.full}` — no medium-radius buttons.
- Don't use the gold PS Plus gradient on anything that isn't the PS Plus banner. It is a tier-specific brand asset.
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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. - PlayStation Blue Active (
{colors.primary-active}—#004d8d): deeply-pressed state for the primary button. - Commerce Orange (
{colors.commerce}—#d53b00): the secondary CTA reserved for store/buy/pre-order actions. The only warm color in the system. - Commerce Orange Pressed (
{colors.commerce-pressed}—#aa2f00): pressed state for commerce buttons. - Marathon Yellow (
{colors.marathon-yellow}—#deff20): a single high-saturation game-page accent extracted from Marathon's product palette — used only inside the dedicated/marathon/game page chrome and not part of the system's general accent vocabulary.
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. - Surface Dark Card (
{colors.surface-dark-card}—#181818): game tile fill, dark product card background. - Canvas Light (
{colors.canvas-light}—#ffffff): true white console-showcase band, support page body, news strip background. - Soft Surface (
{colors.surface-soft}—#f3f3f3): hairline-soft band fill on light pages, divider rule on light surfaces. - Surface Card (
{colors.surface-card}—#f5f7fa): cool-blue-tinted product card and tier-card background on light canvas. - Surface Filter (
{colors.surface-filter}—rgba(245,247,250,0.3)): translucent fill for filter-pill default state on light canvas. - Hairline Light (
{colors.hairline-light}—#f3f3f3): 1px divider rule on light pages. - Hairline Dark (
{colors.hairline-dark}—rgba(229,229,229,0.2)): translucent 1px divider on dark canvas.
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. - Ink Elevated (
{colors.ink-elevated}—#181818): the lightest of the dark-canvas inks, used for elevated card backgrounds. - Body Light (
{colors.body-light}—rgba(0,0,0,0.6)): translucent body text on light canvas — the system's default paragraph color. - Mute Light (
{colors.mute-light}—#6b6b6b): metadata text and footer link captions on light canvas. - Ash Light (
{colors.ash-light}—#cccccc): disabled-state text and lowest-emphasis utility on light surfaces. - On Dark (
{colors.on-dark}—#ffffff): primary text on{colors.canvas-dark}— headlines, button text on dark hero bands. - Body Dark (
{colors.body-dark}—rgba(255,255,255,0.7)): translucent body text on dark canvas. - On Dark Mute (
{colors.on-dark-mute}—#cccccc): secondary text and disabled state on dark surfaces. - Mute Dark (
{colors.mute-dark}—rgba(229,229,229,0.55)): captions and metadata on dark canvas.
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}. - Link Dark (
{colors.link-dark}—#53b1ff): inline body-prose anchor link on dark canvas — a brightened blue for dark-mode legibility.
Type scaleRead the full spec
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 |
|---|---|---|---|---|---|
{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 |
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.
- Source Sans Pro Light (300) as an alternative for the display tier when Roboto reads too utilitarian.
When substituting, preserve the +0.1px to +0.45px tracking on display and button tiers — the spacing is part of what makes PlayStation SST feel premium at the light weight.
Components and layoutRead the full spec
No hover states documented per system policy. Each spec covers Default and Active/Pressed only.
Buttons
button-primary — the universal PlayStation CTA
- Background
{colors.primary}(PlayStation Blue), text{colors.on-primary}, type{typography.button-lg}, padding12px 28px, height ~48px, rounded{rounded.full}. - Used for "Add to bag", "Sign up", "Learn more", "Subscribe" — every primary action across both light and dark canvases.
- Pressed state lives in
button-primary-pressed— background drops to{colors.primary-pressed}(#0064b7).
button-commerce — orange store CTA
- Background
{colors.commerce}(#d53b00), text{colors.on-commerce}, type{typography.button-lg}, padding12px 28px, height ~48px, rounded{rounded.full}. - Reserved for "Buy now", "Pre-order", "Add to cart" — store actions only. The only warm color in the system.
- Pressed state lives in
button-commerce-pressed— background drops to{colors.commerce-pressed}.
button-secondary-light — outline variant on light canvas
- Background transparent, text
{colors.ink}, 1px solid{colors.ash-light}border, type{typography.button-lg}, padding12px 28px, height ~48px, rounded{rounded.full}. - Lower-emphasis CTA on white surfaces ("Learn more →", "Watch trailer").
button-secondary-dark — outline variant on dark canvas
- Background transparent, text
{colors.on-dark}, 1px solid{colors.hairline-dark}, type{typography.button-lg}, padding12px 28px, height ~48px, rounded{rounded.full}. - Same role as the light variant but inverted for use on
{colors.canvas-dark}hero bands.
button-disabled
- Background
{colors.surface-soft}, text{colors.ash-light}, rounded{rounded.full}— flat soft gray.
Filter & Tab Chips
filter-pill + filter-pill-active
- Default: background
{colors.surface-filter}(translucent), text{colors.ink}, type{typography.button-md}, padding8px 16px, rounded{rounded.full}. - Active: background flips to
{colors.canvas-light}(opaque white) — the chip "lifts" from the translucent default. - Used in the PS5 games filter strip ("All", "Coming Soon", "PlayStation VR2", "Recently Released").
Inputs & Forms
text-input + text-input-focused
- Default: background
{colors.canvas-light}, text{colors.ink}, 1px solid{colors.ash-light}, type{typography.body-md}, padding12px 16px, height ~48px, rounded{rounded.sm}(4px). - Focused: 2px solid
{colors.primary}border, no halo (relies on the border weight increase as the focus signal).
support-search-bar — the support-page signature search field
- Background
{colors.canvas-light}, text{colors.ink}, type{typography.body-md}, padding12px 24px, height ~56px, rounded{rounded.full}. - Sits at the top of the support page hero with a magnifier icon at the left edge and "Search the support center" placeholder.
Cards & Containers
product-card — light-canvas product/feature card
- Container: background
{colors.surface-card}(#f5f7facool-blue-tinted), 1px solid{colors.hairline-light}(rare; usually borderless), padding{spacing.lg}(24px), rounded{rounded.md}(8px). - Used for the "PlayStation Store" sale callout, news cards, and PS Plus tier comparison cards on light canvas.
product-card-dark — dark-canvas product card
- Container: background
{colors.surface-dark-card}(#181818), padding{spacing.lg}, rounded{rounded.md}. - Used for game-detail cards and dark-canvas feature panels.
game-tile — game/console thumbnail tile
- Container: background
{colors.surface-dark-elevated}, padding 0, rounded{rounded.md}. - Layout: 16:9 cover art at full bleed inside the radius, with title + platform tag overlaid at the bottom-left in
{typography.body-sm}. - Used in the "Great PS4 & PS5 games" rail and the PS5 games listing grid.
feature-card — light-canvas marketing card
- Container: background
{colors.canvas-light}, padding{spacing.xl}(32px), rounded{rounded.md}. - Used for the "PlayStation Store" hero card and similar feature panels with a small product icon, title, body, and CTA.
hero-band-blue — the PlayStation Blue full-bleed band
- Background
{colors.primary}, text{colors.on-primary}in{typography.display-md}, padding96px 48px, rounded{rounded.none}. - The Marathon launch CTA strip and the footer surface use this band. The band's defining purpose is "this is the action moment of the page."
hero-band-dark — full-bleed dark hero
- Background
{colors.canvas-dark}(with optional gradient end at{colors.surface-dark-elevated}), text{colors.on-dark}in{typography.display-xl}, padding96px 48px, rounded{rounded.none}. - The home-page hero, the game-detail page hero, and the "ON PLAYSTATION" anniversary band.
hero-band-light — full-bleed white hero
Responsive behaviourRead the full spec
Breakpoints
| 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 |
Touch Targets
All interactive elements meet WCAG AAA (≥ 44×44px). {component.button-primary} and {component.button-commerce} sit at 48px height with 28px horizontal padding (effective ~48×100px tappable). {component.text-input} sits at 48px. {component.support-search-bar} sits at 56px. {component.filter-pill} is ~36–40px height with 16px padding extending to 44px tappable via inline padding. {component.carousel-paddle} is exactly 48×48 circular.
Collapsing Strategy
- Primary nav: desktop horizontal cluster → tablet hamburger drawer at 768px. The right-cluster icons (search, cart, account) stay visible at every breakpoint.
- Sub-nav: desktop horizontal anchor row → tablet horizontal scroll → mobile select dropdown.
- Game tile carousel: 4-up → 3-up → 2-up at 1024 and 768px; carousel paddles stay visible at every desktop breakpoint, hide on mobile in favor of touch-swipe.
- Hero bands: stay full-bleed at every breakpoint; only the internal content column reflows from 2-column (text-left + image-right) to single-column (text above image).
- Console showcase: desktop 5-up thumbnail strip → tablet 3-up + horizontal scroll → mobile 1-up with paddle.
- Support page: desktop 30/70 split (sidebar + body) → tablet sidebar promoted to top accordion → mobile fully collapsed accordion.
- Section padding:
{spacing.section}(96px) desktop → 64px tablet → 48px mobile. - Hero headline:
{typography.display-xl}(54px) at desktop, scaling 44px / 32px / 28px down the breakpoint stack.
Image Behavior
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-playstation {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #000000;
--heading-color: #000000;
--link-color: #0070d1;
--link-hover-color: #00559e;
--border-color: #d1d1d1;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(0,0,0,0.06);
--card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
--header-bg: #000000;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #595959;
--button-bg: #0070d1;
--button-text-color: #ffffff;
--button-hover-bg: #00559e;
--button-border: none;
--button-border-radius: 8px;
--button-secondary-bg: #f0f0f0;
--button-secondary-text-color: #000000;
--button-secondary-hover-bg: #e0e0e0;
--button-secondary-border: 1px solid #d1d1d1;
--prompt-bg: #f2f2f2;
--prompt-text-color: #000000;
--base-font: var(--font-helvetica);
--heading-font: var(--font-inter);
--card-border-radius: 8px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- tokyu 80.0%
- greenspoon 76.7%
- omo 76.6%
- hp 75.2%
- yamatomichi 75.0%
Where this came from
- Source document
volt/design-md/playstation/DESIGN.md· 38.5 KB- Repository
- VoltAgent/awesome-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.