Untitled Design System

### Spacing System

• Base unit: 8px (with finer 4/12px steps for tight inline gaps).

• Tokens (front matter): {spacing.xxs} (4px) · {spacing.xs} (8px) · {spacing.sm} (12px) · {spacing.md} (16px) · {spacing.lg} (24px) · {spacing.xl} (32px) · {spacing.xxl} (48px) · {spacing.section} (96px).

• Universal section rhythm: every page in the set uses {spacing.section} (96px) as the vertical gap between major content blocks. Card grids use {spacing.lg} (24px) gutters; in-card padding sits at {spacing.lg} to {spacing.xl} depending on density.

• Hero band padding: 96px vertical / 48px horizontal — the largest spacing in the system, reserved for full-bleed surface chapters.

### Grid & Container

• Max width: ~1280px content area for body text on desktop with 24px gutters that expand to ~48px at ultrawide. Hero bands and game-tile rails go full-bleed with no max-width constraint on imagery.

• Game tile carousel: 4-up at desktop with horizontal scroll on the same row, collapsing to 3-up at 1024px and 2-up at 768px. Each tile uses 16:9 cover art at {rounded.md}.

• Console showcase grid: desktop 5-column thumbnail strip below the main hero render, collapsing to 3-up + horizontal scroll at tablet.

• Support page: desktop 2-column 30/70 split (sidebar nav + article body), collapsing to single-column with the sidebar promoted to a top accordion at mobile.

• News strip: 3-up card grid at desktop, 2-up at tablet, 1-up at mobile.

### Whitespace Philosophy

Whitespace is structural and band-defined. The 96px {spacing.section} between chapters reads as silence between trailer cuts — there's no decorative wash, no gradient transition, no mid-section divider. Inside a section, content is left-aligned in a tight column with the imagery breathing in the right 60-70% of the band. Paragraph text is comfortable at 1.5 line-height but column widths stay narrow (~520px at desktop) to keep long-form copy readable.

### Border Radius Scale

| 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 |

The radius vocabulary works on a 4 / 8 / pill rhythm for chrome with structural surfaces staying flat at 0px.

### Photography Geometry

• Hero console render: large centered console + DualSense composition on white, ~70% width of the band, with copy slot to the left.

• Game tiles: 16:9 key art at {rounded.md} (8px), 4-up rail at desktop with horizontal carousel.

• Marathon game page hero: full-bleed cinematic 16:9 still with the "MARATHON" wordmark in the lower-left at light weight, brand yellow {colors.marathon-yellow} accent on a few small UI tags.

• News card thumbnails: 16:9 imagery at {rounded.md} with a small text block below.

• Avatar / brand icons: 32–40px circles for sub-nav social row.

### 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

• Hero imagery (console renders, game key art) uses art-direction crops on mobile so the central subject stays centered when the band collapses to single-column.

• Game tile cover art preserves 16:9 ratio at every breakpoint; only the column count changes.

• Console showcase thumbnails maintain their natural aspect (~1:1 product render) across breakpoints.

• All non-critical imagery is lazy-loaded as the user scrolls into the next chapter.

1. Focus on ONE component at a time. Pull its YAML entry and verify every property resolves.

2. Reference component names and tokens directly ({colors.primary}, {component.button-primary-pressed}, {rounded.full}) — do not paraphrase.

3. Run npx @google/design.md lint DESIGN.md after edits — broken-ref, contrast-ratio, and orphaned-tokens warnings flag issues automatically.

4. Add new variants as separate component entries (-pressed, -disabled) — do not bury them inside prose.

5. Default body to {typography.body-md} (18px / 400 / 1.5); reach for {typography.display-xl} strictly for the page-top hero headline; use {typography.body-strong} for primary nav links.

6. Keep {colors.primary} scarce per viewport — at most one full-bleed PlayStation Blue band per page.

7. When introducing a new component, ask whether it can be expressed with the existing pill + 8px-radius card + full-bleed-band vocabulary before adding new tokens. The system's strength is that it almost never needs new ones.

• Mobile screenshots not captured — responsive behavior synthesizes PlayStation's known mobile pattern (hamburger drawer, single-column band reflow, hero downscale) from desktop evidence and the breakpoint stack.

• Hover states not documented by system policy.

• Sign-in / authentication chrome (login modal, account dashboard, profile pages) not in the captured pages.

• PlayStation Store in-store browsing surfaces (PDP / cart / checkout) are not in the captured set — those use a more dense data-table layout that this document does not describe.

• Game-page-specific theming — the /marathon/ page uses {colors.marathon-yellow} as a chapter accent. Other game pages may pull in their own per-title brand colors that vary outside the documented system.

• Form validation states (success / error inline messages) not present in the captured surfaces beyond the {colors.warning} color token.