--- version: alpha name: playstation.com description: "Light product system built on #ffffff with #0070cc as the primary CTA accent. Type anchored in sst at 49px / weight 300. Extracted automatically from https://playstation.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)." narrative: | playstation.com is built on a pure-white canvas (rgb(255,255,255)). The system uses rgb(0, 112, 204) as the high-saturation accent for primary actions. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside sst as the primary typeface. Sst is paired with Shared-Nav-Icons for secondary roles. A layered elevation system (4 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 67 keyframe animations plus transition-driven interactions. colors: background: "#ffffff" surface-1: "#fcfcfc" surface-2: "rgba(255, 255, 255, 0.5)" ink: "#1f1f1f" ink-subtle: "#6b6b6b" primary: "#0070cc" on-primary: "#ffffff" primary-hover: "#0172ce" hairline: "#858585" semantic-success: "#009476" semantic-warning: "#c81b3a" typography: display-xl: fontFamily: "sst, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 49px fontWeight: 300 lineHeight: 1.25 letterSpacing: -0.1px display-md: fontFamily: "sst, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 25px fontWeight: 300 lineHeight: 1.25 letterSpacing: 0.1px headline: fontFamily: "sst, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 20px fontWeight: 300 lineHeight: 1.25 letterSpacing: 0.1px body: fontFamily: "SST, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 13.3333px fontWeight: 500 lineHeight: 1.58 letterSpacing: 0 body-sm: fontFamily: "SST, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: normal letterSpacing: 0 caption: fontFamily: "sst, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 button: fontFamily: "sst, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.25 letterSpacing: 0.4px eyebrow: fontFamily: "sst, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0 rounded: none: 0px xs: 4px sm: 8px md: 12px lg: 16px xl: 32px pill: 999px spacing: xxs: 2px xs: 4px sm: 8px md: 12px lg: 24px xl: 32px xxl: 64px components: button-light--invert: backgroundColor: "{colors.on-primary}" textColor: "{colors.primary-hover}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 16px 20px button-ghost: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 0px 20px 0px 5px button-pill: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 0px 8px card-standard-card: backgroundColor: "transparent" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 2px navigation-main-nav: backgroundColor: "transparent" typography: "{typography.button}" rounded: "{rounded.none}" padding: 0px 20px pricing-card-default-tier: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 36px 0px 0px status-badge-neutral-dark: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 5px status-badge-neutral-dark-2: backgroundColor: "transparent" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 2px 80px 16px status-badge-neutral-light: backgroundColor: "{colors.on-primary}" textColor: "#000000" typography: "{typography.eyebrow}" rounded: "{rounded.pill}" padding: 12px 16px extracted_at: "2026-06-11T05:02:01.945Z" completeness: 92 scoreVersion: "v2" --- # Design System — playstation.com > Extracted automatically by Prism from https://playstation.com > Date: 2026-06-11 > Viewport: Desktop 1440x900 + Mobile 390x844 > Values are extracted, not hand-written: rendered styles via getComputedStyle() + colors declared in CSS custom properties (token-only values are marked `(token)` and may not be painted). ## 0. Design DNA **Density**: moderate  |  **Motion**: expressive  |  **Weight**: heavy  |  **Aesthetic**: sharp-architectural | Dimension | Value | Signal | |---|---|---| | Canvas | neutral | `#ffffff` | | Type posture | sans-led (sst) | "EN JUIN" | | Color assertion | dual-accent | #0070cc | | Whitespace | moderate | section rhythm 48px | | Interaction | expressive | 67 keyframes, 27 transitions | | Radius language | 0px-architectural | from token scale | **Prism fingerprint**: `neutral-canvas · sans-display · dual-accent · 0px-architectural · expressive-motion` > **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc): > > - **Canvas**: `rgb(255,255,255)` is the page background. Every component composits against this. > - **Accent**: `rgb(0, 112, 204)` for primary CTAs ONLY. Never decorative. > - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role. > - **Section rhythm**: 48px between major bands. Card padding: 24px. > - **Default radius**: 8px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips. > > **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending. ## 1. Visual Theme & Atmosphere **Signature:** a gradient wash in the hero — colours: #050606, #333A4A, #D1D3DF, #2A2C2F, #828fa4. This is the brand's most recognizable visual — reproduce it, don't replace it with a generic card or flat panel. playstation.com uses a pure-white canvas (`#ffffff`), letting typography, color and imagery carry the visual weight. Typography is anchored in **sst**. Headlines run at a remarkably light weight (300) — restraint over assertion, creating an editorial calm that invites reading rather than demanding it. Body text reads in Near-Black (`#1f1f1f`) — softened from pure black, a small but deliberate detail that lowers reading friction. **M Tricolor Blue** (`#0070cc`) is the single high-saturation color in the system — it earns its presence only on interactive elements, making CTAs and links the unmistakable focal points against the otherwise neutral palette. Elevation is built from multi-layer shadow stacks (4 distinct) — each combines several blurred layers at varying offsets to build a clear front-to-back hierarchy. Border radius varies from pill-shaped (fully rounded) to moderately rounded elements, creating visual rhythm. Motion design uses smooth easing curves for polished state transitions. **Key Characteristics:** - Background: Pure White (`#ffffff`) - Primary typeface: Bebas Neue - Primary text: Near-Black (`#1f1f1f`) - Accent: M Tricolor Blue (`#0070cc`) - Display: 39px weight 300, letter-spacing 0.1px - Shadow system: 4 distinct elevation levels - Custom fonts loaded: Bebas Neue, SST, SST Condensed, VideoJS, Mont W05 ## 2. Color Palette & Roles ### Background & Surface - **Pure White** (`#ffffff`): Page background (primary) - **#ffef2e** (`#ffef2e`): Surface / elevated background - **Pure White** (`#fcfcfc`): Surface / elevated background - **Off-White** (`#f5f7fa`): Surface / elevated background ### Text & Content - **Near-Black** (`#1f1f1f`): Primary body text - **Pure Black** (`#000000`): Secondary text - **#0000ee** (`#0000ee`): Secondary text - **Near-Black** (`#121314`): Secondary text - **Charcoal** (`#26254f`): Secondary text ### Accent & Interactive - **M Tricolor Blue** (`#0172ce`): Interactive / accent - **M Tricolor Blue** (`#0070d1`): Interactive / accent - **M Tricolor Blue** (`#0070cc`): Interactive / accent - **M Tricolor Blue** (`#0068bd`): Interactive / accent - **M Tricolor Red** (`#d53b00`): Interactive / accent - **#0064b7** (`#0064b7`): Interactive / accent - **Honey** (`#c58821`): Interactive / accent ### Border & Divider - **Border Color** (`#0072ce`): Border (CSS var) - **Light Grey** (`#cccccc`): Borders / dividers - **Light Grey** (`#cecdd2`): Borders / dividers - **Translucent #d2d4d9 (90%)** (`rgba(210, 212, 217, 0.9)`): Borders / dividers ### Full Extracted Palette **32 colors rendered on the page** + **29** more declared in design tokens (CSS custom properties — not necessarily painted). (20 categorized above + 41 additional below.) Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out. - `#858585` — Slate Grey - `#999999` — Grey - `#6b6b6b` — Slate Grey - `#b2b2b2` — Grey - `#f48250` — Coral - `#00439c` — Cobalt Blue - `#53b1ff` — #53b1ff - `#363636` — Charcoal - `#1a4237` — Charcoal - `#d63d00` — M Tricolor Red - `#003b39` — Navy Blue - `rgba(128, 128, 128, 0.85)` — Translucent Medium Gray (85%) - `#e5e5e5` — Whitesmoke *(token)* - `#17181a` — Near-Black *(token)* - `#1f2024` — Near-Black *(token)* - `#f3f3f3` — Off-White *(token)* - `#aa2f00` — #aa2f00 *(token)* - `#c81b3a` — Crimson *(token)* - `#050606` — Pure Black *(token)* - `#2c2d33` — Charcoal *(token)* - `#d4dce9` — #d4dce9 *(token)* - `#fcc71d` — Amber *(token)* - `#ebeef0` — Whitesmoke *(token)* - `#333a4a` — Dark Gray *(token)* - `#c03500` — #c03500 *(token)* - `#0059a3` — Cobalt Blue *(token)* - `#969799` — Grey *(token)* - `#009476` — Teal *(token)* - `#007a62` — Teal *(token)* - `#31a1ff` — #31a1ff *(token)* - `#cb2070` — Cherry *(token)* - `#090a0a` — Pure Black *(token)* - *…+9 more in `raw-css.json` (`desktop.allColors`).* ### Gradients & Decorative Fills - `linear-gradient(0deg, rgb(178 178 178/1), rgb(18 19 20/1))` — (--color-role-gradients-cx-article-dark) - `linear-gradient(0deg, rgb(255 255 255/1), rgb(210 212 217/1))` — (--color-role-gradients-surface-interactive-wizard-mobile-light) - `linear-gradient(rgb(23 24 26/1), rgb(31 32 36/1))` — (--color-role-gradients-content-dark) - `linear-gradient(rgb(243 243 243/1), rgb(255 255 255/1))` — (--color-role-gradients-surface-light) - `linear-gradient(rgb(31 32 36/1), rgb(31 32 36/0.7))` — (--color-role-gradients-fade-out-dark) - `linear-gradient(rgb(23 24 26/0.85), rgb(31 32 36/0.85))` — (--color-role-gradients-content-transparent-dark) - `linear-gradient(to bottom right, rgb(255 255 255/0.08), rgb(255 255 255/0.2), rgb(255 255 255/0.08))` — (--color-role-gradients-gloss-light) - `linear-gradient(rgb(255 255 255/1), rgb(255 255 255/0.7))` — (--color-role-gradients-fade-out-light) ### CSS Custom Properties (Design Tokens) **Spacing Token** - `--component-additional-top-gap`: `0%` - `--space-7`: `32px` - `--spacer-size-5`: `375px` - `--space-5`: `16px` **Motion Token** - `--ph-animation-delay`: `0.4s` - `--ph-animation-duration`: `0.8s` **Shadow Token** - `--color-role-shadows-low-active-light`: `rgb(0 0 0/0.16)` - `--color-role-shadows-low-hover-dark`: `rgb(0 0 0/0.8)` - `--color-role-shadows-high-hover-light`: `rgb(0 0 0/0.32)` - `--color-role-shadows-high-active-dark`: `rgb(0 0 0/1)` **Font Size Token** - `--root-font-size`: `16px` **Other tokens** - `--color-role-gradients-cx-article-dark`: `linear-gradient(0deg, rgb(178 178 178/1), rgb(18 19 20/1))` - `--color-17-darken-10-light`: `0 100 183` - `--color-role-borders-secondary-link-focus-dark`: `rgb(229 229 229/0.2)` - `--color-role-backgrounds-primary-link-focus-light`: `rgb(0 100 183/1)` - `--color-role-borders-commerce-link-base-dark`: `rgb(214 61 0/1)` - `--color-role-gradients-content-dark`: `linear-gradient(rgb(23 24 26/1), rgb(31 32 36/1))` - `--color-8-light`: `243 243 243` - `--color-role-page-backgrounds-primary-light`: `rgb(255 255 255/1)` ## 3. Typography Rules ### Font Families - **Primary**: `sst` - **Secondary**: `Bebas Neue` - **Font 3**: `SST Condensed` - **Font 4**: `VideoJS` - **Font 5**: `Shared-Nav-Icons` ### Custom Fonts Loaded - **Bebas Neue** weight 700 (normal) - **Bebas Neue** weight 350 (normal) - **Bebas Neue** weight 300 (normal) - **Bebas Neue** weight 400 (normal) - **Bebas Neue** weight 100 (normal) - **SST** weight 700 (normal) - **SST** weight 900 (normal) - **SST** weight 400 (italic) - **SST** weight 300 (normal) - **SST** weight 500 (normal) - **SST** weight 200 (normal) - **SST Condensed** weight 700 (normal) - **SST Condensed** weight 500 (normal) - **SST Condensed** weight 400 (normal) - **VideoJS** weight 400 (normal) - **Shared-Nav-Icons** weight normal (normal) - **Mont W05** weight 800 (normal) ### Typography Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | |------|------|------|--------|-------------|----------------|-------| | Display Hero | sst | 49px | 300 | 1.25 | -0.1px | Main headline (h1) | | Sub-heading | sst | 25px | 300 | 1.25 | 0.1px | Third-level heading (h3) | | Label Heading | sst | 20px | 300 | 1.25 | 0.1px | Small heading (H4) | | Card Title | sst | 16px | 400 | 1.5 | normal | Card headings | | Button Large | sst | 16px | 500 | 1.25 | 0.4px | Button label (16px) | | Link Large | SST | 16px | 500 | normal | normal | Link (16px) — Decoration: none | | Link | SST | 15px | 500 | 1.07 | normal | Link (15px) — Decoration: none | | Eyebrow / Overline | sst | 14px | 500 | 1.5 | normal | Label above heading, uppercase tag | | Caption | sst | 14px | 400 | 1.5 | normal | Image caption, helper text | | Button | SST | 13.3333px | 500 | 1.58 | normal | Button label (13.3333px) | | Button | SST | 13px | 500 | 1.62 | normal | Button label (13px) | ### Full Font Size Scale Sizes detected in the design (descending): `49px`, `39.06px`, `39px`, `31.25px`, `25px`, `20px`, `16px`, `15px`, `14px`, `13.33px`, `13px`, `12px`, `10px` > 5 size(s) detected outside the sampled hierarchy (39.0626px, 39px, 31.2499px, 12px, 10px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles. ## 4. Component Stylings ### Buttons **Light / Invert** - Background: `#ffffff` `{colors.on-primary}` - Text: `#0172ce` `{colors.primary-hover}` - Padding: 16px 20px - Radius: 0px - Border: 2px outset rgb(0, 0, 0) - Font: 13.3333px weight 500 - Use: Bright CTA on dark sections - Focus: boxShadow: `rgba(0, 0, 0, 0.34) 0px 2px 4px 1px`, outline: `rgb(59, 153, 252) solid 2px` **Ghost** - Background: `transparent` - Text: `#1f1f1f` `{colors.ink}` - Padding: 0px 20px 0px 5px - Radius: 0px - Font: 13px weight 500 - Use: Subtle action, toolbar, nav button - Focus: boxShadow: `rgba(0, 0, 0, 0.34) 0px 2px 4px 1px`, outline: `rgb(59, 153, 252) solid 2px` **Pill** - Background: `#0070cc` `{colors.primary}` - Text: `#ffffff` `{colors.on-primary}` - Padding: 0px 8px - Radius: 999px - Font: 16px weight 500 - Use: Status pills, tags, chips - Focus: boxShadow: `rgba(0, 0, 0, 0.34) 0px 2px 4px 1px`, outline: `rgb(59, 153, 252) solid 2px` **Pill** - Background: `transparent` - Text: `#0068bd` - Padding: 0px - Radius: 32px - Border: 2px solid rgba(0, 0, 0, 0) - Font: 16px weight 400 - Use: Status pills, tags, chips - Focus: boxShadow: `rgba(0, 0, 0, 0.34) 0px 2px 4px 1px`, outline: `rgb(59, 153, 252) solid 2px` ### Cards & Containers **Standard Card** - Background: `transparent` - Padding: 2px - Radius: 9999px - Shadow: `rgba(0, 0, 0, 0.06) 0px 4px 8px 0px` - Use: Content containers, listing items - Hover: boxShadow: `rgba(0, 0, 0, 0.07) 0px 4px 8.10795px 0px` ### Navigation **Main Nav** - Background: `transparent` - Padding: 0px 20px - Radius: none - Font: 16px weight 500 - Use: Fixed/sticky flex nav — N/A items ### Pricing Cards **Default Tier** - Background: `transparent` - Text: `#1f1f1f` `{colors.ink}` - Padding: 36px 0px 0px - Radius: 0px - Font: 16px weight 400 - Use: Subscription tier card - Hover: boxShadow: `rgba(0, 0, 0, 0.07) 0px 4px 8.10795px 0px` ### Status Badges **Neutral Dark** - Background: `transparent` - Text: `#1f1f1f` `{colors.ink}` - Padding: 5px - Radius: 0px - Font: 16px weight 500 - Use: Status indicator, label, pill **Neutral Dark** - Background: `transparent` - Text: `#ffffff` `{colors.on-primary}` - Padding: 2px 80px 16px - Radius: 0px - Font: 16px weight 400 - Use: Status indicator, label, pill **Neutral Light** - Background: `#ffffff` `{colors.on-primary}` - Text: `#000000` - Padding: 12px 16px - Radius: 9999px - Font: 14px weight 500 - Use: Status indicator, label, pill ## 4b. Component Behaviors (State Matrix) ### Interaction State Narrative - **Button**: - **focus:** shadow added - **Card**: - **hover:** shadow level changes - **FooterLink**: - **hover:** opacity 0.6 *State transitions extracted via Playwright simulation — exact values in the YAML matrix below.* ```yaml component-behaviors: button: default: bg: "rgb(255, 255, 255)" fg: "rgb(1, 114, 206)" border: "2px outset rgb(0, 0, 0)" focus: bg: "transparent" fg: "inherit" shadow: "rgba(0, 0, 0, 0.34) 0px 2px 4px 1px" link: default: bg: "rgba(0, 0, 0, 0)" fg: "rgb(0, 0, 238)" card: default: bg: "rgba(0, 0, 0, 0)" fg: "rgb(255, 255, 255)" shadow: "rgba(0, 0, 0, 0.06) 0px 4px 8px 0px" hover: bg: "transparent" fg: "inherit" shadow: "rgba(0, 0, 0, 0.07) 0px 4px 8.10795px 0px" navLink: default: bg: "rgba(0, 0, 0, 0)" fg: "rgb(0, 0, 0)" badge: default: bg: "rgba(0, 0, 0, 0)" fg: "rgb(255, 255, 255)" footerLink: default: bg: "rgba(0, 0, 0, 0)" fg: "rgb(255, 255, 255)" hover: bg: "transparent" fg: "inherit" ``` **Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand. ## 4c. Component Vocabulary (Closed System) *This brand uses ONLY the following component vocabulary. Introducing new variants without justification breaks the system's tonal coherence.* ### Buttons - **3 shape(s)** in this system: `Light / Invert`, `Ghost`, `Pill` - **DO NOT introduce new buttons variants** without justification ### Cards & Containers - **1 shape(s)** in this system: `Standard Card` - **DO NOT introduce new cards & containers variants** without justification ### Navigation - **1 shape(s)** in this system: `Main Nav` - **DO NOT introduce new navigation variants** without justification ### Pricing Cards - **1 shape(s)** in this system: `Default Tier` - **DO NOT introduce new pricing cards variants** without justification ### Status Badges - **2 shape(s)** in this system: `Neutral Dark`, `Neutral Light` - **DO NOT introduce new status badges variants** without justification ## 5. Layout Principles ### Layout Type **top-nav + content** ### Grid Single column, centered content ### Max Width 100% ### Spacing System Compact spacing — information density prioritized | Token | Value | |-------|-------| | xxs | 2px | | xs | 4px | | sm | 8px | | md | 12px | | base | 16px | | lg | 24px | | xl | 32px | | 2xl | 48px | | 3xl | 64px | ### Border Radius Scale | Name | Value | Use | |------|-------|-----| | None | 0px | No rounding | | Xs | 4px | Tiny corners (badges, micro elements) | | Sm | 8px | Buttons, inputs, small elements | | Md | 12px | Cards, containers | | Lg | 16px | Large rounded elements, pill segments | | Xl | 32px | Category strips, featured containers | | Full | 999px | Pills, avatars, circular elements | ### Shape Language | Component | Border Radius | |-----------|---------------| | Buttons | `0px` | | Cards & Containers | `9999px` | | Navigation | `none` | | Pricing Cards | `0px` | | Status Badges | `0px` | | Page Body | `0px` | **Shape Personality**: Sharp + Pill Contrast — Angular precision with pill-shaped accents (status badges, tags). Creates strong visual hierarchy. **Full Radius Spectrum**: 0px, 4px, 8px, 12px, 16px, 32px, 999px, full/pill (from `allBorderRadii` scan) ## 5b. Spacing Rhythm Names **Measured section padding**: bands use ~24px internal vertical padding (up to 112px) — **compact**. (Distinct from the gap *between* sections above.) Reproduce this generous vertical breathing room; cramped spacing is the #1 tell of a cheap clone. *Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.* | Name | Value | Use case | |------|-------|----------| | **hero** | `64px` | Top/bottom of full-bleed hero sections | | **section** | `32px` | Between major bands (color change, content shift) | | **subsection** | `24px` | Within a section, between content groups | | **card** | `12px` | Card padding, list-item spacing | | **compact** | `8px` | Form fields, tight clusters, badge padding | | **micro** | `4px` | Icon-text gap, tag inner padding | **Agent rule**: NEVER hardcode raw pixel values for spacing in generated UI. Always reference these named tokens (`spacing-rhythm.section`, etc.). ## 5c. Widget & Structure Library Structural patterns extracted from the page DOM — these are the **blueprints** an agent should follow to reproduce the page architecture (not just CSS values). **6/8 structural patterns detected.** ### Hero Pattern - **Composition:** left-aligned — - **Viewport coverage:** 213px tall (not full-viewport) - **Heading:** "Incarnez Wolverine" — 39px left-aligned - **Subheading:** "Découvrez une toute nouvelle aventure chargée d'émotion basée sur le personnage emblématique de la bande dessinée, disponible le 15 septembre sur PS5." - **CTAs:** none detected in hero (unusual — agent should verify) - **Clone instruction:** Reproduce the **left-aligned** layout. Use the heading font-size token at the documented size. Pair the centered text with the hero’s decorative visual (gradient / SVG / hero image — see §9b), not bare text. ### Navigation Pattern - **Position:** static (scrolls with page) - **Layout:** unknown — Layout not classified - **Height:** 64px - **Logo:** ✓ present - **Nav links:** 0 primary items - **CTAs in nav:** 0 (no buttons — links only) - **Clone instruction:** Build a static unknown navigation. Link-only — no button styling needed. ### Card Grid Pattern - **Card count:** 13 cards detected - **Columns (desktop):** 1-up grid - **Card dimensions:** 1440×873px (aspect 1.65:1) - **Gap:** 0px between cards - **Content:** ✓ image - **Image position:** top - **Clone instruction:** Build a 1-column grid (desktop) with cards at ~1.65:1 aspect ratio. Each card has an image at the top. ### Pricing Table Pattern - **Tier count:** 2 pricing tiers - **Layout:** vertical stacked - **Columns (desktop):** 2-up - **Clone instruction:** Build a 2-column vertical-stack pricing comparison. ### CTA Banner Pattern - **Banner count:** 1 - **Position:** mid-page - **Visual treatment:** ✓ contrasting background - **Primary CTA text:** "Nouveautés" - **Clone instruction:** Place a single CTA banner mid-page. Use contrasting solid background. ### Footer Pattern - **Columns:** 2 - **Links:** 0 total - **Height:** 72px - **Includes:** ✗ no newsletter | ✗ no social | - **Clone instruction:** Build a 2-column footer with ~0 links per column. ## 6. Depth & Elevation | Level | Treatment | Use | |-------|-----------|-----| | Flat (Level 0) | No shadow | Page background, content blocks | | Layered (Level 1) |
`rgba(0, 0, 0, 0.16) 0px 4px 8px 0px` | Cards, elevated surfaces | | Layered (Level 2) |
`rgba(0, 0, 0, 0.06) 0px 4px 8px 0px` | Cards, elevated surfaces | | Layered (Level 3) |
`rgba(0, 0, 0, 0.8) 0px 4px 8px 0px` | Cards, elevated surfaces | | Layered (Level 4) |
`rgba(0, 0, 0, 0.08) 0px 4px 8px 0px` | Cards, elevated surfaces | **Shadow Philosophy**: Multi-layered shadow system creating natural, atmospheric depth. Each shadow level combines multiple layers for realistic elevation. ## 7. Motion & Interaction ### Dominant Easing Curves | Curve | Semantic Name | |-------|---------------| | `ease` | CSS ease — Default | | `ease-out` | Ease Out — Decelerating | | `ease-in` | Ease In — Accelerating | ### Duration Scale | CSS Variable | Value | Tier | |--------------|-------|------| | `--ph-animation-duration` | `0.8s` | Cinematic | ### Copy-Paste Transition Snippets **All Props** ```css transition: height 0.55s; ``` **All Props** ```css transition: height 0.55s, transform 0.55s, -webkit-transform 0.55s; ``` **All Props** ```css transition: left 0.25s ease-in; ``` **All Props** ```css transition: margin-left 0.1s ease-out 0.2s, opacity 0.1s ease-out 0.2s; ``` ### Keyframe Animation Catalog | Animation Name | Type | Animated Props | Use Hint | |----------------|------|----------------|----------| | `vjs-spinner-show` | Custom | visibility | Loading indicator | | `vjs-spinner-spin` | Rotate / Spin | transform | Loading indicator | | `vjs-spinner-fade` | Custom | border-top-color | Loading indicator | | `jetstream-search-input-grow` | Scale | transform | UI transition | | `jetstream-search-slide-down` | Slide | transform | Panel / drawer enter | | `jetstream-search-slide-up` | Slide | transform | Panel / drawer enter | | `jetstream-search-fadein` | Fade | opacity | Element entrance | | `jetstream-search-fadeout` | Fade | opacity | Element exit | | `jetstream-search-input-shrink` | Scale | transform | UI transition | | `fadeIn` | Fade | opacity | Element entrance | | `fadeInLight` | Fade | opacity | Element entrance | | `fadeInLeft` | Fade + Move | opacity, transform | Element entrance | | `fadeInUp` | Fade + Move | opacity, transform | Element entrance | | `fadeInDown` | Fade + Move | opacity, transform | Element entrance | | `fadeInUpBig` | Fade + Move | opacity, transform | Element entrance | | `fadeOutUpBig` | Fade + Move | opacity, transform | Element exit | | `panLeft` | Fade + Move | opacity, transform | UI transition | | `panRight` | Fade + Move | opacity, transform | UI transition | | `panUp` | Fade + Move | opacity, transform | UI transition | | `panDown` | Fade + Move | opacity, transform | UI transition | > *47 additional animations omitted (repetitive variants). See raw keyframes in `raw-css.json`.* ### Motion Fingerprint - **Speed Character**: Balanced Pacing (median duration: `250ms`) - **Dominant Easing**: custom cubic-bezier curves - **Animation Library**: 67 unique animations (67 total including variants) > This design moves with balanced pacing timing using custom cubic-bezier curves, creating a UI that feels natural and fluid. ## 8. Do's and Don'ts ### Do - Use Near-Black (`#1f1f1f`) for text — not pure black, it's warmer and more readable - Use sst as the primary typeface — it defines the brand personality - Keep font weights between 300-500 — the system uses a narrow weight range for subtle hierarchy - Use the extracted shadow patterns for elevation — they are tuned to match the brand palette - Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles) - Use M Tricolor Blue (`#0070cc`) as the primary accent — it's the brand's signature interactive color - Use pill-shaped radius (999px) for primary CTA buttons — the brand uses fully-rounded, pill CTAs - Apply 2px padding inside cards — matches the design system's content breathing room - Use 9999px border-radius on cards — consistent with the grid card corners - Maintain nav height at 64px — consistent vertical space for the navigation bar - Respect the 4px–32px spacing range — the design uses a wide scale for visual breathing room - Each card includes a top image — imagery is part of the card identity, not optional ### Don't - Don't use pure black (`#000000`) for text — the near-black adds warmth - Don't substitute with generic sans-serif or serif — the custom font carries the brand - Don't use weight 700 (bold) or above — 500 is the maximum weight in this system - Don't invent new shadow values — use only the extracted shadow levels - Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements - Don't introduce additional saturated accent colors — the palette is intentionally controlled - Don't use rectangular buttons for primary actions — the rounded pill shape is the brand standard - Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence - Don't make the nav sticky — this design lets it scroll away to maximize content focus - Don't over-build the footer — this design keeps it minimal (2 cols, 0 links) ## 7b. Enforceable Brand Rules *Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.* ```yaml rules: - id: brand-canvas-001 type: do rule: "Always use the page background `rgb(255,255,255)` as the base canvas" why: "Every component is designed to composit against this exact tone" test: "document.body.style.backgroundColor === 'rgb(255,255,255)'" - id: brand-accent-001 type: do rule: "Reserve `rgb(0, 112, 204)` for primary CTAs and brand-mark signals only" why: "Single chromatic assertion device — overuse dilutes meaning" test: "querySelectorAll('[style*=\"rgb(0, 112, 204)\"]').length <= 3 per fold" ``` ## 9. Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | 359px | Single column, compact spacing | | Mobile Large | 640px | Expanded mobile layout | | Mobile Large | 767px | Expanded mobile layout | | Tablet | 1023px | Multi-column grids begin | | Desktop | 1100px | Full feature layout | | Desktop | 1280px | Full feature layout | ### Token Diff — Desktop vs Mobile | Element | Property | Desktop | Mobile | |---------|----------|---------|--------| | heading | font-size | `39px` | `29px` | | heading | line-height | `48.75px` | `36.25px` | | body | font-size | `16px` | `14px` | | body | padding | `36px 0px 0px` | `60px 0px 36px` | | nav | height | `64px` | `60px` | | card | width | `274px` | `230px` | ### Collapsing Strategy - Headlines: 39px → 29px on mobile - Navigation: horizontal links → hamburger menu on mobile - Cards: multi-column → stacked vertical on mobile - Footer: multi-column → stacked single column on mobile ### Touch Targets - Buttons: 16px 20px padding - Navigation: adequate spacing between items - Interactive elements: minimum 44px touch target recommended ### Collapsing Narrative How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions): - **Hero collapses left-aligned → centered** — composition shifts (verify on actual mobile render). ## 7c. Visual Effects & Dynamic Behavior *The live/dynamic layer beyond static CSS — reproduce these, not flat substitutes. This is often what separates a faithful clone from a wireframe.* - **Glassmorphism** — 4 frosted/blur layer(s) (e.g. `blur(4px)`). - **Scroll-driven reveals** — content animates in on scroll (CSS scroll-timeline). Build fade/translate reveal-on-scroll for below-fold bands. - **CSS-variable animations** (5) — animated custom properties. > **Motion fingerprint**: glassmorphism (4 layers), CSS scroll-driven animations ## 9b. Visual Tone & Photography **Tone:** Mixed photography + illustration A balanced mix of photographic content and vector graphics. Photos likely carry product/lifestyle context while SVG handles icons, logos, and decorative accents. **Hero Image (above-fold dominant visual):** - Aspect: 2.67:1 (ultra-wide cinematic) - Rendered size: 1440×540px - Alt text: "Wolverine avec les griffes sorties" - *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.* **Aspect Ratio Distribution:** - Landscape (1.15–2.3): 38 (56%) - Portrait (<0.87): 0 (0%) - Square (0.87–1.15): 24 (35%) - Ultra-wide (>2.3): 6 (9%) **Media Format Mix:** - SVG: 1 (icons, illustrations, decorative geometry) **Average rendered image size:** 377×237px **Above-fold image count:** 19 / 68 **Decorative Patterns Detected:** - 1 large decorative SVG shape (≥200×200px, non-icon) — likely blob/illustration accents - 1 background pattern (non-photo url() backgrounds) — textures/illustrations as backdrops - **Glassmorphism** detected (`backdrop-filter: blur`) — layered transparent surfaces with blur, modern OS-like aesthetic **Clone instruction for decorative work:** Glassmorphism is a brand signature — use `backdrop-filter: blur(20px)` on overlapping surfaces. **Imagery Guidance for clones:** - Mix photography and illustration intentionally: photos for product/context, vectors for icons + decorative accents. - Respect the format split — replacing JPGs with illustrations (or vice versa) will shift the brand tone. ## 10. Agent Prompt Guide ### Quick Reference - Background: Pure White (`#ffffff`) - Primary text: Near-Black (`#1f1f1f`) - Accent: M Tricolor Blue (`#0070cc`) - Border: Slate Grey (`#858585`) - Font: sst - Body: 16px weight 400 ### Example Component Prompts - "Create a hero section on Pure White background (#ffffff). Headline at 39px sst weight 300, line-height 1.25, letter-spacing 0.1px, color #1f1f1f." - "Create the primary CTA button: `#0070cc` background, `#ffffff` text, 999px border-radius, 0px 8px padding, 500 weight, sst font." - "Design a card on `transparent` background. Border: none. Radius: 9999px. Shadow: use extracted shadow. Padding: 2px." - "Build navigation: static on `#ffffff`. sst 16px weight 500 for links." ### Iteration Guide 1. **Canvas**: Set the light canvas to Pure White (`#ffffff`) — every component is composited against this exact base. 2. **Typography**: All type in sst, weight range 300–500. Never exceed 500 — heavier weights break the brand's tonal restraint. 3. **Accent**: M Tricolor Blue (`#0070cc`) is the sole interactive color. On hover → M Tricolor Blue (`#0172ce`). Use CSS transitions, not opacity/brightness filters. 4. **Shape**: CTAs at `0px`, cards at `9999px`. Apply border-radius from the extracted scale only — don't invent intermediate values. 5. **Spacing**: Use the `--ca-space-*` token scale (4px–32px). All padding, margin, and gap values are multiples from this scale — no magic numbers. 6. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent. ## 11. CSS Design Tokens Raw Export *Copy-paste ready `:root {}` block — all values extracted directly from the live site.* ```css /* Colors */ :root { --ca-on-primary: #ffffff; --ca-surface-1: #fcfcfc; --ca-ink: #1f1f1f; --ca-ink-subtle: #6b6b6b; --ca-primary: #0070cc; --ca-primary-hover: #0172ce; --ca-hairline: #858585; --ca-semantic-success: #009476; --ca-semantic-warning: #c81b3a; } /* Typography */ :root { --ca-font-primary: "sst", system-ui, sans-serif; --ca-text-display: 49px; --ca-text-body: 13.3333px; --ca-text-small: 16px; --ca-text-caption: 14px; --ca-text-button: 16px; } /* Spacing & Radius */ :root { --ca-space-xxs: 2px; --ca-space-xs: 4px; --ca-space-sm: 8px; --ca-space-md: 12px; --ca-space-base: 16px; --ca-space-lg: 24px; --ca-space-xl: 32px; --ca-space-2xl: 48px; --ca-space-3xl: 64px; --ca-radius-none: 0px; --ca-radius-xs: 4px; --ca-radius-sm: 8px; --ca-radius-md: 12px; --ca-radius-lg: 16px; --ca-radius-xl: 32px; --ca-radius-full: 999px; } ``` ## 13. Page Structure Skeleton *The actual layout the source site uses. Reproduce these sections in order to match the site structure.* ```yaml page-skeleton: - section: hero tag: div classes: ["root"] height: 7394px width: full-bleed layout: block children: 1 - section: feature-section tag: div classes: ["gdk", "root", "container", "responsivegrid"] height: 7394px width: full-bleed layout: block children: 1 - section: feature-section tag: div height: 7394px width: full-bleed layout: block children: 2 - section: feature-section tag: div classes: ["gdk", "root", "container", "responsivegrid"] height: 6714px width: full-bleed layout: block children: 1 - section: feature-section tag: div height: 6714px width: full-bleed layout: block children: 13 - section: feature-section tag: div classes: ["page-banner__content-wrapper"] height: 540px width: full-bleed layout: block children: 1 vertical-padding: ~48px padding: "48px 0px" - section: feature-section tag: div classes: ["homepage-hero-carousel-core"] height: 763px width: full-bleed layout: block children: 1 - section: feature-section tag: div classes: ["homepage-hero-slide"] height: 540px width: full-bleed layout: block children: 1 - section: feature-section tag: div classes: ["page-banner", "theme--light", "+logo-size@mobile--2", "+logo-size@desktop--2"] height: 540px width: full-bleed layout: block children: 2 bg: "rgb(255, 239, 46)" vertical-padding: ~48px - section: feature-section tag: div classes: ["gpdc-section", "slider", "featured-hardware-v2", "theme--light"] height: 845px width: full-bleed layout: block children: 3 bg: "rgb(255, 255, 255)" vertical-padding: ~24px padding: "48px 0px 0px" - section: feature-section tag: div classes: ["homepage-hardware-wrapper-v2"] height: 845px width: full-bleed layout: block children: 1 vertical-padding: ~24px - section: feature-section tag: section classes: ["gpdc-section", "theme--dark", "astro-list-games-grid"] height: 790px width: full-bleed layout: block children: 1 bg: "rgb(18, 19, 20)" tone: dark vertical-padding: ~24px padding: "48px 0px 0px" - section: feature-section tag: div classes: ["section"] height: 790px width: full-bleed layout: block children: 1 vertical-padding: ~24px - section: feature-section tag: div height: 702px width: full-bleed layout: block children: 2 - section: content-section tag: div classes: ["mesh-container"] height: 613px width: 1280px layout: block children: 2 - section: feature-section tag: section classes: ["gpdc-section", "theme--light", "astro-psplus-discover"] height: 844px width: full-bleed layout: block children: 1 bg: "rgb(206, 205, 210)" vertical-padding: ~24px padding: "48px 0px 0px" - section: feature-section tag: div classes: ["section"] height: 844px width: full-bleed layout: block children: 1 vertical-padding: ~24px - section: feature-section tag: div classes: ["txt-block-title", "txt-block-title--large", "mesh-container"] height: 185px width: 1280px layout: block children: 3 - section: feature-section tag: section classes: ["gpdc-section", "theme--dark", "pt-ls@desktop--lg", "pb-ls@desktop--2xl"] height: 581px width: full-bleed layout: block children: 1 bg: "rgb(18, 19, 20)" tone: dark vertical-padding: ~112px (airy) padding: "64px 0px 160px" - section: feature-section tag: div classes: ["section"] height: 581px width: full-bleed layout: block children: 1 vertical-padding: ~112px (airy) - section: feature-section tag: div classes: ["gdk", "root", "container", "responsivegrid"] height: 1121px width: full-bleed layout: block children: 1 - section: feature-section tag: div height: 1121px width: full-bleed layout: block children: 2 - section: content-section tag: section classes: ["gpdc-section", "theme--dark", "mt-ls@tablet--neg-sm", "mt-ls@desktop--neg-md"] height: 589px width: full-bleed layout: block children: 1 bg: "rgb(38, 37, 79)" tone: dark vertical-padding: ~24px padding: "48px 0px 0px" - section: content-section tag: div classes: ["section"] height: 541px width: full-bleed layout: block children: 1 vertical-padding: ~24px - section: feature-section tag: section classes: ["gpdc-section", "theme--light", "astro-ps-store"] height: 605px width: full-bleed layout: block children: 1 bg: "rgb(255, 255, 255)" vertical-padding: ~24px padding: "48px 0px 0px" ``` **Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block). ## 14. Copy Library (Real Content from Source) *Actual text content extracted from the live page. Use these strings verbatim when reproducing the site — they carry the brand voice.* ```yaml copy: section-headings: - "Incarnez Wolverine" - "Découvrez toutes les consoles et tous les accessoires PS5" - "Les incroyables jeux PS4 et PS5 déjà sortis et à venir" - "De nouvelles remises sur le PlayStation Store" - "Les dernières actus du PlayStation Blog" sub-headings: - "Console PlayStation 5" - "PlayStation Plus Premium" - "Suivez-nous sur les réseaux sociaux" ctas: - "Passer au contenu principal" - "Jeux" - "Connexion" - "Rechercher" - "Précommander maintenant" - "Acheter maintenant Plus d'infos" - "Acheter maintenant" navigation: - "À propos de SIE" - "Carrières" - "PlayStation Studios" - "PlayStation Productions" - "Entreprise" - "L'histoire de PlayStation" footer-links: - "À propos de SIE" - "Mentions juridiques" - "Conditions d'utilisation du site web" ``` **Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording. ## 15. Asset Inventory (Image Roles & Ratios) *Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.* ```yaml assets: hero: count: 1 avg-ratio: 2.67 common-aspect: "~16:6 banner" sample-alts: - "Wolverine avec les griffes sorties" product: count: 24 avg-ratio: 1.00 common-aspect: "~1:1 square" sample-alts: - "007 First Light" - "Call of Duty®: Black Ops 7" - "Death Stranding 2: On the Beach" ``` **Agent rule**: when generating placeholder images, match these counts and aspect ratios. Use neutral placeholder backgrounds for `product` (e.g. `#f5f5f5`), full-color photography hints for `hero` and `editorial`. ## 16. Component HTML Templates *Suggested HTML markup for reproducing the key components — based on what was detected in the source DOM.* ### Button (primary action) ```html ``` _Source pattern detected: padding `16px 20px` · radius `0px` · weight `500`_ ### Generic Card ```html
``` _Source pattern detected: padding `2px` · radius `9999px` · shadow `rgba(0, 0, 0, 0.06) 0px 4px 8px 0px`_ **Agent rule**: use these markup skeletons as the structural baseline. Apply tokens from §2-3 for visual styling. ## 17. Content Architecture & Resources (Links by Purpose) *The page's links classified by purpose — the information architecture to reproduce. Categories, featured images, devices and projects are extracted from the rendered DOM, not guessed.* **By purpose:** **nav** 1 · **social** 5 · **footer** 6 · **other** 48 **Projects / case studies detected** (clustered by URL + featured image): *Games* — medium confidence, 12 items: | Title | Featured image | Link | |---|---|---| | **Note**: All values above are extracted from the live site's CSS files. The font files are saved locally by Prism and embedded in the output HTML. Use them as-is for maximum fidelity. ## 11.2 Measured Reality (CDP Engine) Captured directly from Chrome's engine across **all 2571 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear. ### Real Responsive Breakpoints **34 breakpoints** read from the live `@media` rules (not guessed) — 14 most relevant: `319px` · `320px` · `359px` · `360px` · `400px` · `425px` · `426px` · `530px` · `550px` · `600px` · `610px` · `640px` · `699px` · `700px` … (+20 more) ### Measured Design Scale **Type scale by usage** (× = paint count): `16px`×1736 · `14px`×337 · `12px`×121 · `70px`×93 · `15px`×84 · `8px`×56 · `20px`×46 · `10px`×34 **Radius scale** (× = paint count): `16px`×68 · `8px`×51 · `23px`×48 · `4px`×44 · `15px`×18 · `32px`×12 · `100%`×12 · `12px`×8 **Weights** (× = paint count): `400`×1994 · `500`×462 · `300`×78 · `600`×24 · `700`×9 **Layout gaps** (× = paint count): `48px 32px`×7 · `4px`×4 · `0px 16px`×3 · `32px normal`×2 · `16px`×2 · `8px`×1 · `0px 32px`×1 · `0px 64px`×1 **Elevation (real shadows)**: ```css rgba(0, 0, 0, 0.8) 0px 4px 8px 0px rgba(0, 0, 0, 0.08) 0px 4px 8px 0px rgba(0, 0, 0, 0.16) 0px 4px 8px 0px rgba(0, 0, 0, 0.06) 0px 4px 8px 0px ``` ### Provenance — measured styles on key elements Read from the live CSSOM (includes runtime-injected CSS). This is *what actually styles the page*, by element: ```css nav { font-family:SST,helvetica,arial,sans-serif; font-weight:500 } @media only screen and (min-width: 700px) nav { transition:height .55s ease } h1 { font-size:var(--text-8); font-weight:300; color:var(--type-custom-color, var(--type-style-color)) } h2 { font-size:calc(1rem*2.0736) } @media (min-width: 768px) h2 { font-size:calc(1rem*2.44141) } @media (min-width: 768px) h2 { font-size:calc(1rem*1.95312) } button { color:#0172ce; font-family:SST,helvetica,arial,sans-serif; font-weight:500; transition:top .55s ease } button { background-color:#fff } card { border-radius:var(--corner-size-0) } card { border-radius:var(--pill-radius) } card { box-shadow:0 var(--space-2) var(--space-3) 0 var(--shadow-color); transition:box-shadow .2s ease-in-out } card { border-radius:var(--corner-size-2) } ``` > Selectors normalised to their semantic element — source class names are often build-hashed (`.bgDIHX`) and not reusable. The declarations + CSS vars are the transferable part. --- *Generated by Prism — automated Playwright extraction + design analysis.* *Source: https://playstation.com | 2026-06-11T05:02:02.205Z* *Values extracted via getComputedStyle() (rendered) + CSS custom properties (tokens, marked `(token)`). Token-only values may not be painted — verify against the live site before shipping.*