PlayStation

version: alpha name: PlayStation-design-analysis 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 的营销体系读起来就像一帧帧滑过观众眼前的主机发布预告片。每一段都是一个全幅色带——纯黑 {colors.canvas-dark}、纯白 {colors.canvas-light} 或 PlayStation Blue {colors.primary}——每段承担一个编辑性时刻：首屏主机摄影、游戏即将上线列表、PlayStation Plus 等级横幅、"30 Years of PlayStation" 周年纪念带、来自 PlayStation Blog 的新闻条。各章之间没有任何装饰性 chrome；章节背景色的切换本身就是分隔线。各 section 以 {spacing.section}（96px）节奏堆叠，下一个色带的颜色接管页面的边到边。

系统沿页面交替使用两种截然不同的表面模式：深色画布模式用于编辑性产品时刻（首屏、"ON PLAYSTATION" 色带、Marathon 游戏页），浅色画布模式用于工具型表面（PS5 游戏列表、支持页、新闻索引）。两种模式使用同一套 chrome 词汇——全圆角 {rounded.full} 胶囊按钮、8px 圆角 {rounded.md} 卡片、自有的 PlayStation SST 字面——只有表面色和 on-surface 颜色发生变化。第三种表面模式是 PlayStation Blue 色带（{colors.primary} — #0070d1），保留给最高优先级的时刻：Marathon 发布 CTA 条、页脚，以及任何 "Action Required" 横幅。

排版是系统最具辨识度的选择。PlayStation SST 在展示级标题上以 weight 300（细体）渲染——对一个轻易就能使用粗几何展示字面的游戏品牌来说并不寻常。细体赋予 chrome 一种轻盈、近乎编辑性的气质，让图像成为主角；文案是信息而非装饰。标题尺寸以紧凑的梯度递减（54 → 44 → 35 → 28 → 22 → 18），正文稳定在 18px、1.5 行高，在支持页和游戏页上提供舒适的长文阅读体验。

关键特征：

• 三画布章节系统：{colors.canvas-dark}（黑）、{colors.canvas-light}（白）、{colors.primary}（PlayStation Blue）沿页面交替出现
• PlayStation Blue（{colors.primary} — #0070d1）是通用主 CTA——全圆角胶囊，圆角 {rounded.full}（9999px）
• 商务橙（{colors.commerce} — #d53b00）是保留给 "Buy now" / "Pre-order" / 商店动作的次级 CTA
• PlayStation SST 展示级以 weight 300 渲染，字距 -0.1px 至 +0.4px——品牌标志性的轻盈编辑之声
• 8px 圆角（{rounded.md}）用于产品卡片和特性面板；4px 圆角（{rounded.sm}）用于输入框；胶囊（{rounded.full}）用于所有 CTA
• 游戏 tile、主机渲染图和 PS Plus 等级插画占据每个 section 60-90% 的面积——图像负责讲故事
• 色彩块页面节奏（一次观察到的色带序列）：深色首屏 → 浅色主机展示 → 深色 "Great PS4 & PS5 games" 列表 → 浅色 "Discover PlayStation Plus" 等级带 → 浅色 "30 years of PlayStation" 横幅 → 深色 "ON PLAYSTATION" 带 → 浅色新闻条 → 蓝色页脚

配色

来源页面： /en-tr/（首页）、/en-tr/ps5/games/（PS5 游戏列表）、/en-tr/games/marathon/（单个游戏页）、/tr-tr/support/account/（支持中心）。所有四个页面的 chrome 调色板完全相同；支持页只使用浅色画布模式，而营销页则交替使用。

品牌与点缀

• PlayStation Blue（{colors.primary} — #0070d1）：品牌的通用主色。用于每一个主 CTA 胶囊、激活筛选芯片、页脚表面、徽标填充，以及深色表面上的行内链接颜色。
• PlayStation Blue Pressed（{colors.primary-pressed} — #0064b7）：主胶囊的按下状态——同时也作为浅色表面的行内链接颜色。
• PlayStation Blue Active（{colors.primary-active} — #004d8d）：主按钮的深度按下状态。
• Commerce Orange（{colors.commerce} — #d53b00）：保留给商店/购买/预购动作的次级 CTA。系统中唯一的暖色。
• Commerce Orange Pressed（{colors.commerce-pressed} — #aa2f00）：商务按钮的按下状态。
• Marathon Yellow（{colors.marathon-yellow} — #deff20）：从 Marathon 产品色板中提取的高饱和度单点游戏页点缀——仅在专属 /marathon/ 游戏页 chrome 内使用，不属于系统通用点缀词表。

表面

• Canvas Dark（{colors.canvas-dark} — #000000）：纯黑首屏带、主导航背景、页脚基底。编辑性产品时刻的主导表面。
• Surface Dark Elevated（{colors.surface-dark-elevated} — #121314）：内嵌深色面板、PS Plus 等级横幅背景、"ON PLAYSTATION" 渐变末端。
• Surface Dark Card（{colors.surface-dark-card} — #181818）：游戏 tile 填充、深色产品卡片背景。
• Canvas Light（{colors.canvas-light} — #ffffff）：纯白主机展示带、支持页正文、新闻条背景。
• Soft Surface（{colors.surface-soft} — #f3f3f3）：浅色页上柔和发丝带填充、浅色表面上的分隔线。
• Surface Card（{colors.surface-card} — #f5f7fa）：浅色画布上带冷蓝调的产品卡片和等级卡片背景。
• Surface Filter（{colors.surface-filter} — rgba(245,247,250,0.3)）：浅色画布上筛选胶囊默认状态的半透明填充。
• Hairline Light（{colors.hairline-light} — #f3f3f3）：浅色页上的 1px 分隔线。
• Hairline Dark（{colors.hairline-dark} — rgba(229,229,229,0.2)）：深色画布上的半透明 1px 分隔线。

文字

• Ink（{colors.ink} — #000000）：{colors.canvas-light} 上的主文字。标题、按钮文字、支持正文。
• Ink Deep（{colors.ink-deep} — #121314）：用于深色表面卡片标题和深色阴影渐变的偏暖近黑。
• Ink Elevated（{colors.ink-elevated} — #181818）：深色画布 ink 中最浅的一档，用于抬升卡片的背景。
• Body Light（{colors.body-light} — rgba(0,0,0,0.6)）：浅色画布上的半透明正文——系统的默认段落色。
• Mute Light（{colors.mute-light} — #6b6b6b）：浅色画布上的元数据和页脚链接说明文字。
• Ash Light（{colors.ash-light} — #cccccc）：浅色表面上的禁用状态文字和最低强调度工具文字。
• On Dark（{colors.on-dark} — #ffffff）：{colors.canvas-dark} 上的主文字——深色首屏带上的标题、按钮文字。
• Body Dark（{colors.body-dark} — rgba(255,255,255,0.7)）：深色画布上的半透明正文。
• On Dark Mute（{colors.on-dark-mute} — #cccccc）：深色表面上的次要文字和禁用状态。
• Mute Dark（{colors.mute-dark} — rgba(229,229,229,0.55)）：深色画布上的说明文字和元数据。

语义

• Warning（{colors.warning} — #c81b3a）：校验错误和破坏性确认文案。
• Link Light（{colors.link-light} — #0064b7）：浅色画布上正文段落中的行内锚链接——与 {colors.primary-pressed} 同色。
• Link Dark（{colors.link-dark} — #53b1ff）：深色画布上正文段落中的行内锚链接——为深色模式可读性而提亮的蓝色。

品牌渐变

• PlayStation Plus Gold Gradient——横向三段金色渐变 {colors.ps-plus-gold-start}（#ffce21）→ {colors.ps-plus-gold-mid}（#f5a623）→ {colors.ps-plus-gold-end}（#ee8e00），锚定在首页的 PS Plus 横幅上。系统中唯一的渐变；专门保留给 PS Plus chrome。

字体排版

字体族

• PlayStation SST 是专有的品牌无衬线字体，用于网站上的每一个文字角色。它承载 weight 300（细）、400（常规）、500（中）、600（半粗）、700（粗），并通过 sst → Arial → Helvetica 回退。品牌最具辨识度的选择是在展示级标题上使用 weight 300（细体）——对一个游戏品牌而言并不寻常，是系统编辑性、轻盈气质的来源。
• SST 作为产品内表面的次级字面出现，回退到 Helvetica → Arial。

层级

原则

层级几乎完全使用 1.25 行高的阶梯——即便正文也固定在 1.5 而不是典型的 1.6——这让长文支持页保持紧凑，让主机展示高效。展示级（300）和按钮（700）之间的字重对比非常戏剧化：同一行 18px chrome 上可能并排出现一个粗重的 CTA 和一个极轻的 22px 标题，赋予系统其编辑性的游戏杂志质感。

关于字体替代

PlayStation SST 是专有的。最接近的开源替代：

• Roboto Light (300) 用于展示级——稍宽的字距与 SST 展示级字面光学匹配。
• Inter（400/500/600）用于正文和 chrome——与 SST 正文字面最接近的几何无衬线匹配。
• Source Sans Pro Light (300) 作为展示级的替代，当 Roboto 显得过于工具化时。

替代时，保留展示级和按钮级上 +0.1px 到 +0.45px 的字距——正是这个间距让 PlayStation SST 在细体下感觉高级。

布局

间距系统

• 基础单位： 8px（紧密内联间隙使用更细的 4/12px 步长）。
• Token（frontmatter）： {spacing.xxs}（4px）· {spacing.xs}（8px）· {spacing.sm}（12px）· {spacing.md}（16px）· {spacing.lg}（24px）· {spacing.xl}（32px）· {spacing.xxl}（48px）· {spacing.section}（96px）。
• 通用 section 节奏： 这一组中每个页面使用 {spacing.section}（96px）作为主要内容块之间的纵向间距。卡片网格使用 {spacing.lg}（24px）间隔；卡片内 padding 根据密度位于 {spacing.lg} 到 {spacing.xl} 之间。
• 首屏带 padding： 96px 纵向 / 48px 横向——系统中最大的间距，保留给全幅表面章节。

网格与容器

• 最大宽度： 桌面正文内容区约 1280px，24px 间隔，超宽屏扩展到约 48px。首屏带和游戏 tile 列表全幅延伸，图像上无最大宽度限制。
• 游戏 tile 轮播： 桌面 4 列，同行横向滚动，1024px 时降为 3 列，768px 时降为 2 列。每个 tile 使用 16:9 封面美术图，圆角 {rounded.md}。
• 主机展示网格： 桌面主渲染图下方 5 列缩略图条，tablet 时降为 3 列 + 横向滚动。
• 支持页： 桌面 2 列 30/70 分割（侧边栏导航 + 文章正文），移动端降为单列，侧边栏提升为顶部折叠面板。
• 新闻条： 桌面 3 列卡片网格，tablet 2 列，移动端 1 列。

留白哲学

留白是结构性的、按色带定义的。章节之间 96px 的 {spacing.section} 读起来像预告片片段间的静默——没有装饰性渲染、没有渐变过渡、没有段中分隔。section 内部，内容左对齐于一个紧凑的栏中，图像在色带右 60-70% 区域呼吸。正文在 1.5 行高下舒适，但栏宽保持狭窄（桌面约 520px），以保持长文文案的可读性。

层次与深度

系统在卡片上几乎没有静息阴影；深度由色带章节间的表面色对比构建。卡片仅在按下时抬起。

装饰性深度

深度来自交替色带的节奏以及图像本身：

• 主机产品摄影——DualSense 手柄和 PS5 主机渲染图在中性白色背景上拍摄，边缘光清晰，在浅色画布带内全幅展示。
• 游戏主视觉——全幅电影剧照（Marathon、最新的大作发布）在深色画布带内，标题组合在左下角叠加。
• PS Plus 等级横幅——一个柔和的横向金色渐变（{colors.ps-plus-gold-start} → {colors.ps-plus-gold-end}）作为系统中唯一的 chrome 渐变，锚定 "Discover PlayStation Plus" CTA。
• "ON PLAYSTATION" 渐变带——从 {colors.surface-dark-elevated}（#121314）到 {colors.canvas-dark}（#000000）的自上而下加深，在周年纪念横幅下创造电影感的暗淡效果。

形状

圆角刻度

圆角词表在 chrome 上以 4 / 8 / 胶囊的节奏运作，结构表面保持平直（0px）。

摄影几何

• 首屏主机渲染图： 大尺寸居中主机 + DualSense 构图于白色背景上，占据色带约 70% 宽度，文案槽位于左侧。
• 游戏 tile： 16:9 主视觉，圆角 {rounded.md}（8px），桌面 4 列横向轮播。
• Marathon 游戏页首屏： 全幅电影感 16:9 剧照，"MARATHON" 字标位于左下角细体，品牌黄 {colors.marathon-yellow} 点缀少量 UI 标签。
• 新闻卡片缩略图： 16:9 图像，圆角 {rounded.md}，下方有一个小文本块。
• 头像 / 品牌图标： 32–40px 圆形用于子导航社交行。

组件

未记录 hover 状态，遵循系统策略。每个规范仅涵盖 Default 和 Active/Pressed。

按钮

button-primary——通用 PlayStation CTA

• 背景 {colors.primary}（PlayStation Blue），文字 {colors.on-primary}，字号 {typography.button-lg}，padding 12px 28px，高约 48px，圆角 {rounded.full}。
• 用于 "Add to bag"、"Sign up"、"Learn more"、"Subscribe"——浅色和深色画布上的每一个主动作。
• 按下状态位于 button-primary-pressed——背景降为 {colors.primary-pressed}（#0064b7）。

button-commerce——橙色商店 CTA

• 背景 {colors.commerce}（#d53b00），文字 {colors.on-commerce}，字号 {typography.button-lg}，padding 12px 28px，高约 48px，圆角 {rounded.full}。
• 保留给 "Buy now"、"Pre-order"、"Add to cart"——仅商店动作。系统中唯一的暖色。
• 按下状态位于 button-commerce-pressed——背景降为 {colors.commerce-pressed}。

button-secondary-light——浅色画布上的描边变体

• 背景透明，文字 {colors.ink}，1px 实线 {colors.ash-light} 边框，字号 {typography.button-lg}，padding 12px 28px，高约 48px，圆角 {rounded.full}。
• 白色表面上的较低强调 CTA（"Learn more →"、"Watch trailer"）。

button-secondary-dark——深色画布上的描边变体

• 背景透明，文字 {colors.on-dark}，1px 实线 {colors.hairline-dark}，字号 {typography.button-lg}，padding 12px 28px，高约 48px，圆角 {rounded.full}。
• 与浅色变体相同角色但反色，用于 {colors.canvas-dark} 首屏带。

button-disabled

• 背景 {colors.surface-soft}，文字 {colors.ash-light}，圆角 {rounded.full}——扁平的柔和灰色。

筛选与 Tab 芯片

filter-pill + filter-pill-active

• 默认：背景 {colors.surface-filter}（半透明），文字 {colors.ink}，字号 {typography.button-md}，padding 8px 16px，圆角 {rounded.full}。
• 激活：背景翻转为 {colors.canvas-light}（不透明白色）——芯片从半透明默认状态"抬起"。
• 用于 PS5 游戏筛选条（"All"、"Coming Soon"、"PlayStation VR2"、"Recently Released"）。

输入与表单

text-input + text-input-focused

• 默认：背景 {colors.canvas-light}，文字 {colors.ink}，1px 实线 {colors.ash-light} 边框，字号 {typography.body-md}，padding 12px 16px，高约 48px，圆角 {rounded.sm}（4px）。
• 聚焦：2px 实线 {colors.primary} 边框，无光晕（依赖边框粗细增加作为聚焦信号）。

support-search-bar——支持页标志性的搜索字段

• 背景 {colors.canvas-light}，文字 {colors.ink}，字号 {typography.body-md}，padding 12px 24px，高约 56px，圆角 {rounded.full}。
• 位于支持页首屏顶部，左侧有放大镜图标，placeholder 为 "Search the support center"。

卡片与容器

product-card——浅色画布上的产品/特性卡片

• 容器：背景 {colors.surface-card}（#f5f7fa 冷蓝调），1px 实线 {colors.hairline-light}（罕见；通常无边框），padding {spacing.lg}（24px），圆角 {rounded.md}（8px）。
• 用于 "PlayStation Store" 促销横幅、新闻卡片和浅色画布上的 PS Plus 等级对比卡片。

product-card-dark——深色画布上的产品卡片

• 容器：背景 {colors.surface-dark-card}（#181818），padding {spacing.lg}，圆角 {rounded.md}。
• 用于游戏详情卡片和深色画布特性面板。

game-tile——游戏/主机缩略图 tile

• 容器：背景 {colors.surface-dark-elevated}，padding 0，圆角 {rounded.md}。
• 布局：16:9 封面美术图全幅填充圆角内部，标题 + 平台标签在左下角以 {typography.body-sm} 叠加。
• 用于 "Great PS4 & PS5 games" 列表和 PS5 游戏列表网格。

feature-card——浅色画布营销卡片

• 容器：背景 {colors.canvas-light}，padding {spacing.xl}（32px），圆角 {rounded.md}。
• 用于 "PlayStation Store" 首屏卡片和类似特性面板，带有小产品图标、标题、正文和 CTA。

hero-band-blue——PlayStation Blue 全幅带

• 背景 {colors.primary}，文字 {colors.on-primary} 在 {typography.display-md}，padding 96px 48px，圆角 {rounded.none}。
• Marathon 发布 CTA 条和页脚表面使用此带。该带的定义性意义在于"这是页面的动作时刻"。

hero-band-dark——全幅深色首屏

• 背景 {colors.canvas-dark}（可选渐变末端在 {colors.surface-dark-elevated}），文字 {colors.on-dark} 在 {typography.display-xl}，padding 96px 48px，圆角 {rounded.none}。
• 首页首屏、游戏详情页首屏和 "ON PLAYSTATION" 周年纪念带。

hero-band-light——全幅白色首屏

• 背景 {colors.canvas-light}，文字 {colors.ink} 在 {typography.display-xl}，padding 96px 48px，圆角 {rounded.none}。
• 主机展示带（"Discover all PS5 consoles and accessories"）和支持页顶部。

ps-plus-banner——PlayStation Plus 等级横幅

• 背景 {colors.surface-dark-elevated}，顶部以 {colors.ps-plus-gold-start} → {colors.ps-plus-gold-end} 金色渐变作为横向点缀条，文字 {colors.on-dark} 在 {typography.heading-xl}，padding 48px 32px，圆角 {rounded.md}。
• 首页上的 "Discover PlayStation Plus" 全宽横幅。

carousel-paddle——圆形轮播控件

• 背景 rgba(255,255,255,0.16)，图标 {colors.on-dark}，圆角 {rounded.full}，尺寸 48px。
• 锚定在游戏 tile 轮播的左/右边缘。

pagination-dot + pagination-dot-active

• 8px 圆形，圆角 {rounded.full}。默认填充 {colors.ash-dark}；激活填充 {colors.on-dark}。
• 游戏 tile 列表下方的轮播位置指示器。

行内

badge-info——小型信息标签

• 背景 {colors.primary}，文字 {colors.on-primary} 在 {typography.caption-sm}，padding 4px 10px，圆角 {rounded.full}。
• 游戏 tile 上叠加的 "New"、"Pre-order"、"Coming Soon" 标签。

link-inline——正文段落锚链接

• 浅色画布上 {colors.link-light} 文字 / 深色画布上 {colors.link-dark}，默认无下划线。支持文章段落内的行内正文链接。

导航

primary-nav

• 背景 {colors.canvas-dark}，文字 {colors.on-dark}，高约 48px，字号 {typography.body-strong}，圆角 {rounded.none}。
• 布局（桌面）：最左侧 PlayStation P 标志，居中导航行（"Games · PS5 · PS4 · PS VR2 · Subscriptions · Hardware · Mobile · News · Shop · Support"），右侧簇（搜索图标 + 语言 + 购物车图标 + 用户头像圆形）。

sub-nav——次级导航条

• 背景 {colors.canvas-dark}，文字 {colors.on-dark} 在 {typography.caption-md}，高约 40px，圆角 {rounded.none}。
• 直接位于 PS5 游戏 / 单个游戏 / PS Plus 页面的主导航下方，带有 section 专属锚链接。

顶部导航（移动端）

• 左侧汉堡菜单图标，居中 P 标志，右侧搜索 + 购物车图标。主导航折叠为从左侧滑入的全屏深色抽屉。

页脚

footer-section

• 背景 {colors.primary}（PlayStation Blue），文字 {colors.on-primary} 在 {typography.caption-md}，padding {spacing.xxl}（48px）纵向。
• 布局：左上方大字 PlayStation 字标，多列链接网格（语言选择、商店链接、账户、支持、社交），底部行带条款 / 隐私细则的 {typography.caption-sm}。
• 页脚的蓝色表面是系统中"我们讲完了——回到品牌"的锚点。

支持页专属

support-row——支持文章列表行

• 背景 {colors.canvas-light}，文字 {colors.ink} 在 {typography.body-md}，padding 16px 0，底部带 1px {colors.hairline-light} 分隔线。
• 用于支持页上的 FAQ / 类别列表行，右侧边缘有小 chevron-right 图标。

推荐与避免

推荐

• 将 {colors.primary}（PlayStation Blue）保留给主 CTA 和页脚表面。蓝色带是珍贵的——每页最多一个全幅蓝色带。
• 将 {colors.commerce}（橙）保留给商店/购买/预购 CTA。它从不出现在营销 chrome 或首屏胶囊上。
• PlayStation SST 在 weight 300 用于展示标题（54 / 44 / 35 / 28 / 22）。细体是品牌之声。
• 内容 section 以 {spacing.section}（96px）节奏堆叠，下一个色带的表面色接管页面的边到边——色带之间无装饰分隔。
• 所有 CTA 胶囊使用 {rounded.full}（9999px），所有产品卡片使用 {rounded.md}（8px）。除输入框外，这两个圆角就是整个形状系统。
• 在深色或浅色带内成对使用全幅游戏主视觉和主机渲染图；让图像占据色带垂直高度的 60-90%。
• 仅对 PlayStation Plus 等级横幅使用 {component.ps-plus-banner} 与金色渐变——绝不用金色装饰其他组件。

避免

• 不要在静息卡片上引入投影。系统在画布上是扁平的；卡片仅在按下时抬起。
• 不要用其他蓝色替换 {colors.primary}。品牌蓝是精确的——默认 #0070d1，按下 #0064b7。
• 不要在营销/首屏 CTA 上使用 {colors.commerce}（橙）。它专门保留给商店动作。
• 不要引入无衬线正文字体、斜体或 monospace 样式。PlayStation SST 承载每一个文字角色。
• 不要柔化胶囊几何。CTA 始终是 {rounded.full}——没有中等圆角按钮。
• 不要在任何非 PS Plus 横幅的东西上使用金色 PS Plus 渐变。它是等级专属品牌资产。
• 不要在 chrome 上使用渐变。唯一允许的渐变是金色 PS Plus 点缀和 "ON PLAYSTATION" 带的柔和自上而下变暗。

响应式行为

断点

触控目标

所有交互元素均满足 WCAG AAA（≥ 44×44px）。{component.button-primary} 和 {component.button-commerce} 高 48px，水平 padding 28px（实际约 48×100px 可点击）。{component.text-input} 高 48px。{component.support-search-bar} 高 56px。{component.filter-pill} 高约 36–40px，padding 16px 通过内联 padding 扩展至 44px 可点击。{component.carousel-paddle} 为精确的 48×48 圆形。

折叠策略

• 主导航： 桌面水平簇 → 768px 时平板汉堡抽屉。右侧簇图标（搜索、购物车、账户）在每个断点都保持可见。
• 子导航： 桌面水平锚点行 → 平板水平滚动 → 移动端 select 下拉。
• 游戏 tile 轮播： 4 列 → 3 列 → 2 列，在 1024 和 768px；轮播拨片在每个桌面断点保持可见，移动端隐藏以支持触摸滑动。
• 首屏带： 在每个断点都保持全幅；仅内部内容栏从 2 列（文字左 + 图像右）回流到单列（文字上方图像）。
• 主机展示： 桌面 5 列缩略图条 → 平板 3 列 + 横向滚动 → 移动端 1 列带拨片。
• 支持页： 桌面 30/70 分割（侧边栏 + 正文） → 平板侧边栏提升为顶部折叠面板 → 移动端完全折叠为手风琴。
• Section padding： {spacing.section}（96px）桌面 → 64px 平板 → 48px 移动端。
• 首屏标题： {typography.display-xl}（54px）桌面，沿断点阶梯缩放至 44px / 32px / 28px。

图像行为

• 首屏图像（主机渲染图、游戏主视觉）使用移动端的 art-direction 裁剪，使中心主体在色带折叠为单列时保持居中。
• 游戏 tile 封面美术在每个断点保持 16:9 比例；只改变列数。
• 主机展示缩略图在断点间保持其自然长宽比（约 1:1 产品渲染图）。
• 所有非关键图像在用户滚动进入下一个章节时延迟加载。

迭代指南

1. 一次专注于一个组件。提取其 YAML 条目并验证每个属性都能解析。
2. 直接引用组件名和 token（{colors.primary}、{component.button-primary-pressed}、{rounded.full}）——不要转述。
3. 编辑后运行 npx @google/design.md lint DESIGN.md——broken-ref、contrast-ratio 和 orphaned-tokens 警告会自动标记问题。
4. 添加新变体作为单独的组件条目（-pressed、-disabled）——不要将它们埋在正文里。
5. 默认正文为 {typography.body-md}（18px / 400 / 1.5）；仅将 {typography.display-xl} 用于页面顶部首屏标题；将 {typography.body-strong} 用于主导航链接。
6. 让 {colors.primary} 在每个视口都稀缺——每页最多一个全幅 PlayStation Blue 带。
7. 引入新组件时，问自己它是否能用现有的胶囊 + 8px 圆角卡片 + 全幅带词汇表达，再添加新 token。系统的强项在于几乎从不需要新 token。

已知缺口

• 未捕获移动端截图——响应式行为综合了 PlayStation 已知的移动端模式（汉堡抽屉、单列色带回流、首屏缩小），依据是桌面证据和断点阶梯。
• hover 状态 按系统策略未记录。
• 登录 / 认证 chrome（登录模态、账户仪表板、个人资料页）不在捕获页面内。
• PlayStation Store 的店内浏览表面（PDP / 购物车 / 结账）不在捕获集中——它们使用更密集的数据表格布局，本文档未描述。
• 游戏页专属主题——/marathon/ 页面使用 {colors.marathon-yellow} 作为章节点缀。其他游戏页可能引入它们自己的每标题品牌色，超出文档系统。
• 表单验证状态（成功 / 错误行内消息）在已捕获的表面上不存在，仅有 {colors.warning} 颜色 token。