# PlayStation — Design System
> Official gaming platform site for consoles, games, and accessories.
- **Canonical:** https://uiuxskills.com/library/playstation-2
- **Source:** https://www.playstation.com
- **Category:** Media & Consumer Tech
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:18:32.701Z

---

---
version: alpha
name: PlayStation
description: Official gaming platform site for consoles, games, and accessories.
tone: >-
  Authoritative, cinematic, and performance-oriented. The tone is direct and focused on the 'next
  generation' of gaming.
color-scheme: dark
colors:
  primary: "#0065CC"
  surface: "#1F1F1F"
  surface-dim: "#131315"
  surface-bright: "#26254F"
  on-surface: "#FFFFFF"
  on-primary: "#FFFFFF"
  neutral: "#CECDD2"
  background: "#000000"
  error: "#B3261E"
  outline: "#333333"
typography:
  display-lg:
    fontFamily: SST, sans-serif
    fontSize: 48px
  display-md:
    fontFamily: SST, sans-serif
    fontSize: 36px
  headline-lg:
    fontFamily: SST, sans-serif
    fontSize: 30px
  headline-md:
    fontFamily: SST, sans-serif
    fontSize: 24px
  body-md:
    fontFamily: SST, sans-serif
    fontSize: 16px
  label-md:
    fontFamily: SST, sans-serif
    fontSize: 14px
  label-sm:
    fontFamily: SST, sans-serif
    fontSize: 12px
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#0050A0"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
  card-elevated:
    backgroundColor: "{colors.surface-dim}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.background}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#FFFFFF"
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  nav-bar:
    backgroundColor: "{colors.background}"
    height: 64px
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-bright:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-neutral:
    backgroundColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.2)
  md: 0 4px 6px rgba(0,0,0,0.3)
  lg: 0 10px 15px rgba(0,0,0,0.4)
---

## Overview

PlayStation's visual identity is defined by a high-contrast, immersive aesthetic that prioritizes dark surfaces and vibrant blue accents. It conveys a premium, cinematic gaming experience through bold typography and clean, structured layouts that keep the focus on high-fidelity content.

## Colors

The color strategy relies on a "dark-mode" foundation, using deep blacks and charcoal tones to create a cinematic stage for product imagery and brand highlights.

*   Primary (#0065CC): The signature PlayStation blue used for primary CTAs and brand highlights.
*   Background (#000000): The base canvas color for the entire site.
*   Surface (#1F1F1F): The primary dark surface color for cards and sections.
*   Surface-dim (#131315): A deeper shade for background sections to create depth.
*   Surface-bright (#26254F): Used for subtle highlights or secondary container backgrounds.
*   On-surface (#FFFFFF): Standard text color for high contrast against dark surfaces.
*   Neutral (#CECDD2): Secondary text or muted UI elements.
*   Error (inferred) (#B3261E): Semantic color for alerts and error states.
*   Outline (inferred) (#333333): Border color for cards and input fields.

## Typography

The typography uses the SST font family to maintain a clean, technical, and authoritative voice across all interface levels.

*   Display-lg (inferred): Used for hero headlines.
*   Display-md (inferred): Used for section titles.
*   Headline-lg (inferred): Used for sub-headlines.
*   Headline-md (inferred): Used for card titles.
*   Body-md (inferred): Standard body copy.
*   Label-md (inferred): Button labels and UI controls.
*   Label-sm (inferred): Small captions and metadata.

## Layout

The site employs a responsive grid system with a fixed 64px header. Content is centered with generous padding, utilizing a mobile-first approach where components stack vertically on smaller screens and expand into multi-column grids on desktop. The page pattern follows a strict sequence: nav, hero, product-showcase, deals, and footer. The hero pattern features a full-width image with left-aligned text and a single primary CTA. Use {spacing.md} as the standard gutter between grid items to maintain consistent rhythm.

## Elevation & Depth

Depth is primarily conveyed through subtle color shifts between {colors.surface-dim} and {colors.surface-bright}, supplemented by soft, multi-layered shadows on interactive cards to indicate elevation.

*   elevation.sm — subtle card lift.
*   elevation.md — standard dropdown or popover depth.
*   elevation.lg — modal or drawer overlay.

## Shapes

The brand utilizes a subtle rounding strategy, favoring small radii for UI elements to maintain a sharp, technical feel. A scale of {rounded.sm} (2px) to {rounded.md} (4px) is applied to most cards and inputs, while larger radii like {rounded.xl} or {rounded.full} are reserved for buttons to ensure an approachable, interactive touch.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use {colors.primary} for primary actions and transparent backgrounds with {colors.primary} borders for secondary actions. They utilize {typography.label-md} and a rounded shape for a balanced, clickable appearance.

### Card
Cards are constructed using {colors.surface} or {colors.surface-dim} to provide contrast against the black background. They feature {rounded.md} corners and are designed to house product imagery and text content in a structured, elevated container.

### Input Field
Input fields use a {colors.background} fill with an {colors.outline} border. On focus, the border transitions to {colors.primary} to indicate active state.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary CTAs. | Do not use {colors.primary} for background surfaces. |
| Apply {typography.display-lg} for hero headlines. | Avoid using {typography.body-md} for section headers. |
| Use {colors.surface} for all cards. | Never use low-contrast text on {colors.surface-dim}. |
| Use {spacing.md} as the standard grid gutter. | Do not mix sharp corners with {rounded.full}. |
| Apply {rounded.md} to all interactive cards. | Avoid excessive use of shadows. |
| Use {colors.on-surface} for body text. | Do not use {colors.error} for non-destructive actions. |
| Maintain 64px height for {nav-bar}. | Do not exceed 64px height for {nav-bar}. |
| Use {typography.label-md} for buttons. | Do not use {typography.display-lg} for buttons. |

## Content Style

CTA labels use imperative verbs in sentence case (e.g., "Shop the sale", "Buy now"). This keeps the user journey direct and action-oriented.

Headings are benefit-driven and cinematic, designed to evoke the "next generation" of gaming. They should be declarative and concise.

Copy density is kept low, with short, punchy paragraphs that focus on product features and immersion. Use whitespace to separate sections and maintain a clean, premium feel.

## Imagery & Icons

The imagery style is a mix of high-fidelity product photography and cinematic game key art. Icons are minimalist, thin-stroke, and white, ensuring they remain legible against dark backgrounds. Avoid cluttered compositions; allow the high-quality assets to carry the visual weight of the brand.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for PlayStation, an authoritative, cinematic gaming platform. Match its dark-mode, performance-oriented tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.display-lg}`, `{rounded.md}` — never hardcode hex values, pixel sizes, or font names.
2. Use only components defined under `components:`. Do not invent variants (e.g. no `button-ghost`, no `card-outlined`) unless the spec lists them.
3. Follow the Layout section for page sequencing (nav → hero → product-showcase → deals → footer), grid gutters (`{spacing.md}`), and mobile-first stacking.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict before proceeding.
5. Elevation is conveyed through surface color shifts (`{colors.surface-dim}` → `{colors.surface-bright}`) plus `elevation.sm/md/lg` shadows. Do not introduce decorative borders or glows outside this system.

## Output contract

**Must:**
- Use all tokens by their YAML names.
- Include hover, focus, and disabled states for every interactive component where the spec defines them (e.g. `button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{rounded.md}` to cards and inputs; reserve `{rounded.xl}` or `{rounded.full}` for buttons only.
- Use `{typography.label-md}` for button labels; `{typography.display-lg}` only for hero headlines.
- Write CTA labels as imperative sentence case ("Buy now", "Shop the sale") per the Content Style section.
- Maintain `{nav-bar}` height at exactly 64px.

**Must NOT:**
- Invent colors, font sizes, radii, or spacing values absent from the spec.
- Use generic system defaults when a brand token exists.
- Apply `{colors.primary}` as a background surface.
- Apply `{colors.error}` to non-destructive actions.
- Mix sharp corners with `{rounded.full}` on the same component.
- Add emoji, decorative flourishes, or marketing filler copy.
- Rewrite existing page copy, button labels, or navigation items.
- Alter page structure or information architecture as a side effect of styling.

## When in doubt
- If the spec doesn't define a value, ask the user before inventing one.
- For ambiguous backgrounds, default to `{colors.surface}` for cards and `{colors.background}` for page canvas.
- For text on dark surfaces, default to `{colors.on-surface}`; use `{colors.neutral}` only for secondary or muted UI labels.
- Tokens marked "(inferred)" in the spec prose are visual approximations. If an authoritative source (theme file, Storybook) is available, those values take precedence.
- For unspecified breakpoints, follow the mobile-first approach in Layout with a single breakpoint at 768px.