registry://designs/voltagent-awesome-design-md-playstation
### PlayStation - Gaming console retail. - Three-surface channel layout, cyan hover-scale interaction - A three-surface marketing system organized around alternating black, white, and PlayStation Blue chapters that scroll past the viewer like a
| version | alpha |
| name | PlayStation |
| 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" ps-plus-gold-start: "#ffce21" ps-plus-gold-mid: "#f5a623" ps-plus-gold-end: "#ee8e00" marathon-yellow: "#deff20" |
| 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: "{rounded.full}" size: 8px pagination-dot-active: backgroundColor: "{colors.on-dark}" rounded: "{rounded.full}" size: 8px badge-info: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.caption-sm}" rounded: "{rounded.full}" padding: 4px 10px primary-nav: backgroundColor: "{colors.canvas-dark}" textColor: "{colors.on-dark}" typography: "{typography.body-strong}" rounded: "{rounded.none}" height: 48px sub-nav: backgroundColor: "{colors.canvas-dark}" textColor: "{colors.on-dark}" typography: "{typography.caption-md}" rounded: "{rounded.none}" height: 40px footer-section: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.caption-md}" rounded: "{rounded.none}" padding: 48px 32px support-search-bar: backgroundColor: "{colors.canvas-light}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.full}" padding: 12px 24px height: 56px support-row: backgroundColor: "{colors.canvas-light}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 16px 0px link-inline: textColor: "{colors.link-light}" typography: "{typography.link-md}" |
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:
{colors.canvas-dark} (black), {colors.canvas-light} (white), {colors.primary} (PlayStation Blue) alternating down the page{colors.primary} — #0070d1) is the universal primary CTA — fully-rounded pill at {rounded.full} (9999px){colors.commerce} — #d53b00) is the secondary CTA reserved for "Buy now" / "Pre-order" / store actions{rounded.md}) for product cards and feature panels; 4px-radius ({rounded.sm}) for inputs; pills ({rounded.full}) for every CTASource 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.
{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.{colors.primary-pressed} — #0064b7): pressed state for the primary pill — also doubles as the inline link color on light surfaces.{colors.primary-active} — #004d8d): deeply-pressed state for the primary button.{colors.commerce} — #d53b00): the secondary CTA reserved for store/buy/pre-order actions. The only warm color in the system.{colors.commerce-pressed} — #aa2f00): pressed state for commerce buttons.{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.{colors.canvas-dark} — #000000): pure black hero band, primary nav background, footer base. The dominant surface for editorial product moments.{colors.surface-dark-elevated} — #121314): inset dark panels, PS Plus tier banner background, "ON PLAYSTATION" gradient end.{colors.surface-dark-card} — #181818): game tile fill, dark product card background.{colors.canvas-light} — #ffffff): true white console-showcase band, support page body, news strip background.{colors.surface-soft} — #f3f3f3): hairline-soft band fill on light pages, divider rule on light surfaces.{colors.surface-card} — #f5f7fa): cool-blue-tinted product card and tier-card background on light canvas.{colors.surface-filter} — rgba(245,247,250,0.3)): translucent fill for filter-pill default state on light canvas.{colors.hairline-light} — #f3f3f3): 1px divider rule on light pages.{colors.hairline-dark} — rgba(229,229,229,0.2)): translucent 1px divider on dark canvas.{colors.ink} — #000000): primary text on {colors.canvas-light}. Headlines, button text, support body.{colors.ink-deep} — #121314): warmer near-black for in-card titles on dark surfaces and deep-shadow gradients.{colors.ink-elevated} — #181818): the lightest of the dark-canvas inks, used for elevated card backgrounds.{colors.body-light} — rgba(0,0,0,0.6)): translucent body text on light canvas — the system's default paragraph color.{colors.mute-light} — #6b6b6b): metadata text and footer link captions on light canvas.{colors.ash-light} — #cccccc): disabled-state text and lowest-emphasis utility on light surfaces.{colors.on-dark} — #ffffff): primary text on {colors.canvas-dark} — headlines, button text on dark hero bands.{colors.body-dark} — rgba(255,255,255,0.7)): translucent body text on dark canvas.{colors.on-dark-mute} — #cccccc): secondary text and disabled state on dark surfaces.{colors.mute-dark} — rgba(229,229,229,0.55)): captions and metadata on dark canvas.{colors.warning} — #c81b3a): validation errors and destructive confirmation copy.{colors.link-light} — #0064b7): inline body-prose anchor link on light canvas — same hex as {colors.primary-pressed}.{colors.link-dark} — #53b1ff): inline body-prose anchor link on dark canvas — a brightened blue for dark-mode legibility.{colors.ps-plus-gold-start} (#ffce21) → {colors.ps-plus-gold-mid} (#f5a623) → {colors.ps-plus-gold-end} (#ee8e00) that anchors the PS Plus banner on the home page. The only gradient in the system; reserved exclusively for PS Plus chrome.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.| 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 |
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.
PlayStation SST is proprietary. The closest open-source substitutes:
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.
{spacing.xxs} (4px) · {spacing.xs} (8px) · {spacing.sm} (12px) · {spacing.md} (16px) · {spacing.lg} (24px) · {spacing.xl} (32px) · {spacing.xxl} (48px) · {spacing.section} (96px).{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.{rounded.md}.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.
| 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 |
The system has effectively no resting shadow on cards; depth is built from surface-color contrast across band chapters. Cards lift only on press.
Depth comes from the alternating-band rhythm and from the imagery itself:
{colors.ps-plus-gold-start} → {colors.ps-plus-gold-end}) sits as the only chrome gradient in the system, anchoring the "Discover PlayStation Plus" CTA.{colors.surface-dark-elevated} (#121314) to {colors.canvas-dark} (#000000) creates a cinematic dimming effect under the anniversary callout.| 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.
{rounded.md} (8px), 4-up rail at desktop with horizontal carousel.{colors.marathon-yellow} accent on a few small UI tags.{rounded.md} with a small text block below.No hover states documented per system policy. Each spec covers Default and Active/Pressed only.
button-primary — the universal PlayStation CTA
{colors.primary} (PlayStation Blue), text {colors.on-primary}, type {typography.button-lg}, padding 12px 28px, height ~48px, rounded {rounded.full}.button-primary-pressed — background drops to {colors.primary-pressed} (#0064b7).button-commerce — orange store CTA
{colors.commerce} (#d53b00), text {colors.on-commerce}, type {typography.button-lg}, padding 12px 28px, height ~48px, rounded {rounded.full}.button-commerce-pressed — background drops to {colors.commerce-pressed}.button-secondary-light — outline variant on light canvas
{colors.ink}, 1px solid {colors.ash-light} border, type {typography.button-lg}, padding 12px 28px, height ~48px, rounded {rounded.full}.button-secondary-dark — outline variant on dark canvas
{colors.on-dark}, 1px solid {colors.hairline-dark}, type {typography.button-lg}, padding 12px 28px, height ~48px, rounded {rounded.full}.{colors.canvas-dark} hero bands.button-disabled
{colors.surface-soft}, text {colors.ash-light}, rounded {rounded.full} — flat soft gray.filter-pill + filter-pill-active
{colors.surface-filter} (translucent), text {colors.ink}, type {typography.button-md}, padding 8px 16px, rounded {rounded.full}.{colors.canvas-light} (opaque white) — the chip "lifts" from the translucent default.text-input + text-input-focused
{colors.canvas-light}, text {colors.ink}, 1px solid {colors.ash-light}, type {typography.body-md}, padding 12px 16px, height ~48px, rounded {rounded.sm} (4px).{colors.primary} border, no halo (relies on the border weight increase as the focus signal).support-search-bar — the support-page signature search field
{colors.canvas-light}, text {colors.ink}, type {typography.body-md}, padding 12px 24px, height ~56px, rounded {rounded.full}.product-card — light-canvas product/feature card
{colors.surface-card} (#f5f7fa cool-blue-tinted), 1px solid {colors.hairline-light} (rare; usually borderless), padding {spacing.lg} (24px), rounded {rounded.md} (8px).product-card-dark — dark-canvas product card
{colors.surface-dark-card} (#181818), padding {spacing.lg}, rounded {rounded.md}.game-tile — game/console thumbnail tile
{colors.surface-dark-elevated}, padding 0, rounded {rounded.md}.{typography.body-sm}.feature-card — light-canvas marketing card
{colors.canvas-light}, padding {spacing.xl} (32px), rounded {rounded.md}.hero-band-blue — the PlayStation Blue full-bleed band
{colors.primary}, text {colors.on-primary} in {typography.display-md}, padding 96px 48px, rounded {rounded.none}.hero-band-dark — full-bleed dark hero
{colors.canvas-dark} (with optional gradient end at {colors.surface-dark-elevated}), text {colors.on-dark} in {typography.display-xl}, padding 96px 48px, rounded {rounded.none}.hero-band-light — full-bleed white hero
{colors.canvas-light}, text {colors.ink} in {typography.display-xl}, padding 96px 48px, rounded {rounded.none}.ps-plus-banner — PlayStation Plus tier callout
{colors.surface-dark-elevated} with the {colors.ps-plus-gold-start} → {colors.ps-plus-gold-end} gold gradient as a horizontal accent bar across the top, text {colors.on-dark} in {typography.heading-xl}, padding 48px 32px, rounded {rounded.md}.carousel-paddle — circular carousel control
rgba(255,255,255,0.16), icon {colors.on-dark}, rounded {rounded.full}, size 48px.pagination-dot + pagination-dot-active
{rounded.full}. Default fill {colors.ash-dark}; active fill {colors.on-dark}.badge-info — small info tag
{colors.primary}, text {colors.on-primary} in {typography.caption-sm}, padding 4px 10px, rounded {rounded.full}.link-inline — body-prose anchor link
{colors.link-light} text on light canvas / {colors.link-dark} on dark canvas, no underline by default. Inline body links inside support article paragraphs.primary-nav
{colors.canvas-dark}, text {colors.on-dark}, height ~48px, type {typography.body-strong}, rounded {rounded.none}.sub-nav — secondary nav strip
{colors.canvas-dark}, text {colors.on-dark} in {typography.caption-md}, height ~40px, rounded {rounded.none}.Top Nav (Mobile)
footer-section
{colors.primary} (PlayStation Blue), text {colors.on-primary} in {typography.caption-md}, padding {spacing.xxl} (48px) vertical.{typography.caption-sm}.support-row — support article-list row
{colors.canvas-light}, text {colors.ink} in {typography.body-md}, padding 16px 0, with a 1px {colors.hairline-light} bottom rule.{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.{colors.commerce} (orange) for store/buy/pre-order CTAs only. It is never used on marketing chrome or hero pills.{spacing.section} (96px) rhythm with the next band's surface color taking over the page edge-to-edge — no decorative dividers between bands.{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.{component.ps-plus-banner} with the gold gradient exclusively for the PlayStation Plus tier callout — never decorate other components with the gold.{colors.primary} with another shade of blue. The brand blue is precise — #0070d1 for default and #0064b7 for pressed.{colors.commerce} (orange) on marketing/hero CTAs. It's reserved exclusively for store actions.{rounded.full} — no medium-radius buttons.| 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 |
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.
{spacing.section} (96px) desktop → 64px tablet → 48px mobile.{typography.display-xl} (54px) at desktop, scaling 44px / 32px / 28px down the breakpoint stack.{colors.primary}, {component.button-primary-pressed}, {rounded.full}) — do not paraphrase.npx @google/design.md lint DESIGN.md after edits — broken-ref, contrast-ratio, and orphaned-tokens warnings flag issues automatically.-pressed, -disabled) — do not bury them inside prose.{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.{colors.primary} scarce per viewport — at most one full-bleed PlayStation Blue band per page./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.{colors.warning} color token.Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.
Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.
Share your design system with AI agents worldwide