OpenDesign 中的 PlayStation 设计系统：三面通道布局、SST 300 静默权威排版与 1.2× 青色 hover 签名完全解析

• AI 应用
• 人工智能
• AI 技能
• 设计系统
• 媒体生成

本文以仓库内 DESIGN-tr.md（及英文原版 DESIGN.md）为核心骨架，结合 tokens.css、components.html、design-tokens.json 等落地文件，系统还原 PlayStation 设计系统的完整规范。它是 OpenDesign 设计系统目录（design-systems/）中"媒体与消费"品类的代表性包，专为编码 Agent 生成 PlayStation 风格界面提供可复制的设计契约：读懂本文后，你可以直接按规范生成 hero、按钮、卡片、表单与整页布局，并能用仓库中的 token 绑定与组件 fixture 做逐项验证。

1. 设计系统全景：三面通道与"静默权威"

PlayStation.com 的视觉组织方式在文档中被概括为"一个垂直交替的三面通道"（three-surface channel layout）：

• 近黑 masthead 与 hero：#000000纯黑承托顶栏、hero 背景与产品展示区；
• 纸白编辑面板：#ffffff的主体内容画布，承载大量图片与 3D 产品渲染（PS5 主机、游戏封面、DualSense 手柄）；
• 深钴蓝页脚：以 PlayStation 蓝锚定整页体验的收束。

三种表面交替出现、从不混融。设计意图是让硬件产品本身承担情感表达，而界面 chrome（导航、边框、按钮）保持克制。

文档强调的两个标志性特征：

1. 静默权威排版（quiet authority）：Sony 定制字体 SST 在 22–54px 的视觉标题区间统一使用weight 300（Light），让大标题呈现出接近奢侈品腕表广告的低语质感——与 The Verge 的 Manuka 大字号、Wired 的报纸密度形成对照。
2. 青色 hover 签名（cyan hover-scale）：每个主按钮的 hover 都是同一套动作——底色切换为电光青#1eaedb、出现 2px 白色边框、背后展开 2px PlayStation 蓝外环、整个按钮放大 1.2×。文档称之为一页内重复数百次的"开机"微动画。

仓库内的落地文件把这两点写成了可执行契约：components.html 的 hero 区文案直接称该 fixture 为 "a console powering on"，而 tokens.css 头部注释明确编码了三条品牌决策：Console Black 为品牌画布、PlayStation Blue 为不可动摇的锚点、PlayStation Cyan 只存在于--accent-hover（"cyan 永不在静止状态出现"被直接写进 token 层）。

2. 色彩体系：角色划分与 token 映射

2.1 主色（品牌锚点）

2.2 次级与强调色

2.3 表面与背景色

2.4 中性色与文本色

2.5 语义与交易色

2.6 渐变系统：只有两个

• 浅色分区渐变：#ffffff → #f5f7fa，几乎不可感知的面板托举；
• 深色分区渐变：#121314 → #000000，给 hero 面板轻微 vignette 而不引入色偏。

两个渐变只作为分区背景，组件内部一律禁止：没有渐变按钮、渐变文字、发光光晕。品牌是蓝——不是蓝紫、不是蓝青。

源码佐证：在 tokens.css 中，上述色值被精确映射为--accent: #0070cc、--accent-hover: #1eaedb、--accent-active: #0068bd、--surface-warm: #f5f7fa、--danger: #c81b3a等 token；注释明确写出 "PlayStation Cyan lives exclusively in --accent-hover — never as a resting background"。此外，--success（#16a34a）与--warn（#eab308）继承 schema 默认值，因为 PlayStation 把暖色预算保留给 Commerce Orange，而非语义绿/黄——这与文档"禁止引入橙色之外的暖色"的规则互相印证。完整的 56 个 token 及其分层（A1-identity / A2 / B-slot / A1-structure）可在 design-tokens.json 中核对。

3. 字体排印：SST 300 的层级纪律

3.1 字体家族

• SST / Playstation SST（Sony 专有，由 Toshi Omagari 与 Akira Kobayashi 设计），回退链：Arial、Helvetica；主页覆盖 300 / 500 / 600 / 700 四个字重；
• SST 压缩变体（回退helvetica、arial）：少数对宽度敏感的 UI 模块；
• Arial：个别以系统 sans 渲染的按钮变体的兜底。

在 tokens.css 中字体链被绑定为--font-display: "SST", "Playstation SST", Arial, Helvetica, sans-serif，正文与展示共用同一家族（--font-body相同），确保全站 100% 无衬线。

3.2 层级完整表（继承自原文档，可直接套用）

3.3 排印原则

• 大字号 300 字重就是声音：PlayStation 是唯一用细体展示 hero 标题的主流主机品牌，克制本身就是人格；
• UI 层字重跳升：18px 以下为可读性切换到 500–700。300（展示）→ 400（正文）→ 500（说明）→ 700（按钮）就是层级；
• 字距几乎不可见：多在 0.1–0.45px 之间；54px hero 上的-0.1px只够让标题"显得被设计过"；
• 两种 SST 大小写形态：SST 与 Playstation SST 功能同族、度量略异（小字号更紧），可互换使用；
• 不用全大写：kicker 与标签保持标题式/句子式大小写——又一次"静默权威"；
• 全站无衬线：不存在任何印刷声部对照。

源码佐证：components.html 的.btn采用font-weight: 500; letter-spacing: 0.4px、h1/h2/h3统一font-weight: 300且h1为--text-4xl（54px）、h2为--text-2xl（35px）、h3为--text-lg（22px），与上表完全对齐；.eyebrow特意注释 "No ALL-CAPS — sentence case eyebrow"，将"禁全大写"原则直接写进组件。

4. 组件样式规范

4.1 按钮五兄弟

主按钮——PlayStation 蓝 pill

• 底色#0070cc，文字#ffffff（SST 18px / 500 / 0.4px 字距），静止无边框；
• 圆角999px（全 pill），内边距约12px 24px；
• Hover 签名动作：底色切为#1eaedb→ 出现 2px#ffffff边框 →0 0 0 2px #0070cc外环 →transform: scale(1.2)；
• Active：opacity: 0.6；Focus：同 hover 但外环变为 focus 阴影rgb(0, 114, 206) 0 0 0 2px；
• 过渡：背景 / transform / 阴影上约180ms ease。

次按钮——深底白描边底色#ffffff、文字#0172ce、边框2px outset #000000（现代 CSS 中罕见的真outset边框）、圆角通常999px或36px、内边距16px 20px；hover/focus 遵循同一签名。

交易橙按钮底色#d53b00、文字#ffffff（SST 18px / 700 / 0.45px 字距）、圆角999px，仅限 PS Store / 购买 / 订阅 Plus CTA；active 变#aa2f00；hover 同样走青色反色规则（不是橙色专属 hover）。

透明幽灵按钮透明底、文字#1f1f1f、边框1px solid #dedede、内边距0 10px；hover 同样 cyan 填充 + 白字 + 2px 白边 +scale(1.2)；active 文字转#0072ce、opacity 0.6。

图标圆形按钮照片上为rgba(0,0,0,0.2)、浅色面为#ffffff、圆角100%，用于轮播箭头与分享按钮；hover 变#e5e5e5。

迷你 CTA（卡片内）：SST 14px / 700 / 0.324px，内边距约8px 16px，圆角999px，用于游戏卡片内"立即购买 / 加入购物车"。

源码佐证：components.html 的.btn用border: 2px solid transparent预留给 hover 边框，避免触发布局位移；.btn-primary:hover恰好实现"cyan 填充 + 白边 +box-shadow: 0 0 0 2px var(--accent)+transform: scale(1.2)"四件套；.panel-light .btn-secondary在纸白面板上自动反转为"透明底 + 蓝描边"的 outline 形态——对应 DESIGN.md 中"白底蓝色描边"的另一变体。

4.2 卡片与容器

4.3 输入与表单

• 默认：#ffffff底、1px solid #cccccc边、3px 圆角（全系统最紧——输入是 PlayStation 唯一真正"紧凑"的地方）、SST 16px#1f1f1f文字、rgba(0,0,0,0.6)占位符；
• Focus：box-shadow: 0 0 0 2px #0070cc蓝色外环——不改边框色，让环说话；
• 错误：边框与文字转#c81b3a，下方同色行内错误文本；
• 过渡：边框与阴影约 180ms ease。

4.4 导航

• 顶栏：黑色全出血条带，左侧白 logo，中部 SST 14–16px / 500 分类链接，右侧小号"Sign In" CTA；
• 导航链接 hover：#ffffff → #1883fd，无下划线；
• 激活分区：#0070cc的 2px 细下划线；
• 移动端：收进汉堡抽屉，链接 16px 间距纵向堆叠、20px 横向内边距；
• 粘性行为：滚动时钉在顶部，进入浅色区域也不反色——全程黑底。

4.5 图片处理

• 宽高比：hero 视频/照片 16:9、主机渲染 1:1、游戏封面 3:4、生活方式图 4:3；
• 圆角按语境取12px/13px/24px；
• 全出血仅限 masthead hero 与页脚促销条带；
• 加载策略：折叠线以下全部loading="lazy"，masthead hero 用eager。

4.6 游戏商店 pill（特色组件）

白底、黑字（SST 14px / 500）、内边距14px 18px、圆角9999px——紧贴游戏封面的中性平台标签（"PS5"、"PS4"、"PSVR2"），深底上白字强对比。

5. 布局原则

5.1 间距系统

• 基础单位 8px；刻度：1、2、3、4.5、5、8、9、10、12、14、15、16、18、20、21px；
• 分区内边距：主面板间 48–96px 纵向，hero→内容过渡取大端；
• 卡片内边距：20–32px，特性 hero 卡可到 48px；
• 行内间距：标题与导语 8–12px，导语与 CTA 12–16px；
• 微刻度：1/2/3/4.5/5/9/10/12 用于 pill 内边距、说明间距与边框偏移——不用于编辑节奏。

对应 token：tokens.css 中--space-1(4px) 到--space-12(48px)，以及--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 48px——注释点名对应 DESIGN.md 的折叠策略。

5.2 网格与容器

• 最大宽度约1920px（dembrandt 扫描检测到最高 2120px 断点）；容器上限通常1280–1920px；
• 12 列响应式网格，按层级解析为 3/4/6 列游戏瓷砖行；hero 区通常占满 12 列，特性瓷砖落在6+3+3或4+4+4；
• 外内边距：移动 16px → 平板 48px → 桌面 64–96px；
• 沟槽：列间 16–24px，瓷砖簇内更紧（8–12px）。

落地值见 tokens.css：--container-max: 1600px、--container-gutter-desktop: 64px/ tablet 32px / phone 16px。

5.3 留白哲学

PlayStation 把留白当作奢侈品牌的橱窗灯光——一种高级感信号。模块间纵向呼吸空间明显多于其他大型零售站；白色编辑面板往往只容纳"一个标题 + 一张图 + 一个 CTA"，形成每个产品拥有独立房间的"画廊节奏"（gallery pace），而不是在缩略图网格中互相竞争。

5.4 圆角刻度：11 个离散值

文档特别强调：这是目录中任何站点最丰富的圆角系统之一——PlayStation 刻意按层级使用不同圆角（utility 用 3px、media 用 12px、feature 用 24px、CTA 用 999px）。tokens.css 将这 11 值压缩到 schema 主干上：--radius-sm: 6px、--radius-md: 12px、--radius-lg: 24px、--radius-pill: 999px，输入框的 3px 在组件层单独覆盖。

6. 深度与层级：耳语或呐喊

深度哲学是"分层但克制"：常规状态阴影不透明度只落在 0.06–0.16，hero 直接跳到 0.8——没有 0.2/0.3/0.4 中间地带。页面大部分近乎平面，但 hero 卡需要悬浮时真的会"浮起来"。层级要么耳语、要么呐喊，从不嘟囔。

装饰性深度仅限：两个分区渐变、2px 蓝/青 focus-hover 环；除两个渐变外没有任何辉光、模糊或氛围特效。token 层以--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)、--elev-raised: rgba(0,0,0,0.08) 0 5px 9px 0、--focus-ring: 0 0 0 2px #0070cc固化这一阶梯。

7. 该做与不该做（Do's and Don'ts）

该做：

• 用 PlayStation 蓝#0070cc作为主 CTA 底色与页脚锚点；
• 22px 及以上的每个展示标题都用 SST weight 300；
• 每个主按钮都施加完整 hover 签名：cyan 填充 + 2px 白边 + 2px 蓝外环 +scale(1.2)；
• 主按钮与交易按钮用全 pill（999px）圆角；
• 把 Cyan#1eaedb仅保留给 hover / focus / active——绝不作静止背景；
• 把交易橙#d53b00仅用于 PS Store / 购买 CTA 与价格强调；
• 深色 hero 面板与白色内容面板交替、以深蓝页脚收尾——三面通道就是页面节奏；
• 卡片压在产品照片上时使用戏剧性rgba(0,0,0,0.8)hero 投影；
• 顶栏在任何滚动位置都保持黑色，不在浅色面板上反色。

不该做：

• 不要把展示标题加粗——22–54px 的 700 字重会让 PlayStation 读起来"像另一家游戏零售商"；
• 不要用全大写标签或 kicker；
• 不要在两个已声明的分区渐变之外使用渐变按钮、文字或背景；
• 不要在交易橙之外引入暖色：没有红色 CTA、黄色高亮、绿色成功 pill；
• 不要在按钮或媒体上用直角——系统有 11 个圆角，挑一个，但永远不是 0；
• 不要省略主按钮的scale(1.2)hover——这是品牌交互签名；
• 不要用衬线字体；
• 不要让 cyan#1eaedb以静止文字或背景色出现——它只存在于运动中；
• 不要设计互相争抢注意力的面板——留白节奏给每个模块自己的"画廊房间"。

8. 响应式行为

8.1 断点表

dembrandt 扫描在 320–2120px 间检测到30 个断点——异常宽的响应式范围。PlayStation 特别为1920–2120px 大屏语境调优：PS5 用户常通过主机浏览器或手机投屏在电视上浏览。多数零售站 1440px 就停止调优，PlayStation 一路调优到 4K。

8.2 触控目标

• 主 pill 按钮约 48–56px 高（SST 18px 文字 + 12–16px 垂直内边距），宽松满足 WCAG AAA；
• 桌面导航链接约 32–40px 高；移动抽屉内补足 48px+；
• 图标圆形按钮 40–48px，适合触摸。

8.3 折叠策略

• 导航：完整 → 紧凑 → 汉堡抽屉；logo 钉左、CTA 钉右；
• 网格：6 列 → 4 → 3 → 2 → 1；游戏瓷砖重新流动而不裁切封面；
• 间距：96px → 64px → 48px → 32px → 24px 随视口收窄；
• 字体：SST hero 54px → 44px → 35px → 28px → 22px，300 细体在所有尺寸保留；
• hero 摄影：艺术指导切换——桌面宽幅 16:9，移动端用产品居中的 4:3 或 1:1。

8.4 图片行为

响应式栅格（srcset+ 带艺术指导的<picture>），断点间保持宽高比；4K 就绪——1920px+ 提供高密度图避免电视放大；折叠线下全部loading="lazy"，hero 带预加载提示的eager。

9. Agent 提示指南：把规范变成生成指令

9.1 快速颜色参考

• 主 CTA：PlayStation Blue（#0070cc）
• Hover / Focus 强调：PlayStation Cyan（#1eaedb）
• 背景（浅色面）：Paper White（#ffffff）
• 背景（深色面）：Console Black（#000000）
• 白底标题：Display Ink（#000000）
• 白底正文：Deep Charcoal（#1f1f1f）
• 黑底正文：Inverse White（#ffffff）
• 交易 / 购买强调：Commerce Orange（#d53b00）
• 页脚锚点：PlayStation Blue（#0070cc）

9.2 示例组件提示（原文五条，可直接复制给 Agent）

1. "创建一个主 CTA 按钮：#0070ccPlayStation 蓝填充，白色文字 SST 18px / 500 / 0.4px 字距，999px 圆角，12px × 24px 内边距。hover 时背景切为#1eaedbPlayStation Cyan，出现 2px#ffffff边框，box-shadow展开 2px#0070cc外环，整个按钮 1.2× 缩放——全程 180ms ease 过渡。"
2. "在#000000Console Black 画布上设计 hero 面板：54px SST weight 300 标题、#ffffff文字、-0.1px 字距、1.25 行高；下方放一个带标准 PlayStation hover 处理的主 CTA。任何地方不要全大写标签。"
3. "构建游戏封面瓷砖：3:4 宽高比、12px 圆角、羽毛级rgba(0,0,0,0.08) 0 5px 9px 0投影；下方 14px SST 700 标题、12px SST 500 平台标签，以及 PlayStation 蓝的迷你 14px / 700 / 0.324px 主 CTA。"
4. "为 PlayStation Store 购买创建交易 pill 按钮：#d53b00交易橙填充，#ffffff文字 SST 18px / 700 / 0.45px 字距，999px 圆角，12px × 28px 内边距。active 变#aa2f00。hover 遵循标准青色反色 + 1.2× 缩放。"
5. "在两个深色 hero 区之间设计白色内容面板：#ffffff背景叠加#ffffff → #f5f7fa浅色分区渐变，24px 圆角，48px 内边距，羽毛级rgba(0,0,0,0.06) 0 5px 9px 0提升，35px SST 300 标题、18px 正文段落和单个主 CTA。"

9.3 迭代审查清单

1. 审查展示字重：22px 以上每个标题应为 SST 300；hero 级出现 500/700 即丢失 PlayStation 声音；
2. 审查 hover 处理：每个主按钮必须 1.2× 缩放且四件套齐全（cyan 填充 + 白边 + 蓝环），缺一即破坏交互签名；
3. 审查圆角：每个容器与按钮必须落在 2/3/6/12/13/19/20/24/36/48/999px 或 100%；直角破坏声音；
4. 审查色彩蔓延：chrome 中只允许出现蓝#0070cc、Cyan#1eaedb、橙#d53b00及已声明的灰黑白，出现其他色相即修正；
5. 审查表面交替：页面应呈"深 hero → 白内容 → 深 hero → 白内容 → 蓝页脚"；相邻同表面面板要插入过渡；
6. 审查大小写：仅句子式/标题式；任何全大写标签、按钮、kicker 都要转换；
7. 审查阴影权重：不透明度必须落在 0.06 / 0.08 / 0.16 / 0.8，中间值修正到最近声明的档位；
8. 审查留白：两个模块感觉"互相竞争"时，加 48–96px 纵向呼吸空间——画廊节奏不可谈判。

10. 仓库落地：从规范到可验证的包

该设计系统在 OpenDesign 仓库中以标准包结构落地（见 design-systems/playstation/manifest.json），属 "bundled" 类型（来源为 OpenDesign 精选打包 fixture，USAGE.md 明确要求不得声称存在原始上游抓取证据）。包内文件分工如下：

• 规范主体：DESIGN.md（英文原版）与其多语言翻译（含本主题的 DESIGN-tr.md 及 DESIGN-zh.md 等）承载全部视觉意图、约束与反模式；
• Token 绑定：tokens.css 是把规范编码为 CSS 变量的唯一事实源，tailwind-v4.css 通过@import "./tokens.css"派生 Tailwind v4@theme映射（--color-accent、--text-4xl、--radius-pill、--duration-fast等），文件头注明"以 tokens.css 为事实源"；
• 组件 fixture：components.html 是完整可渲染的参考实现（hero + features + form 三个 section），components.manifest.json 给出机器可读的组件清单：63 个选择器、28 个类、25 个元素、8 个组件分组（buttons / inputs / cards / badges / links / keyboard / icons / typography / layout），并核对了 token 引用与未使用声明；
• 审计证据：design-tokens.json 报告 56 个 token 全部有源、评分 100（"excellent"），source/ 目录存有 evidence.md、tokens.source.json 与 token-contract.report.json 作为 fixture 回填的审计凭据；
• 视觉预览：preview/colors.html、preview/typography.html、preview/spacing.html 提供颜色、排版、间距的快速目检页面。

使用顺序（依 USAGE.md）：先读 USAGE 理解包契约 → 读 DESIGN.md 理解视觉意图与反模式 → 将tokens.css粘贴进第一个产物的<style>块再写组件 CSS → 用components.manifest.json作紧凑组件清单，涉及精确选择器或状态时查components.html→ 需要目检时打开 preview 页面。两条硬约束值得注意：保持 schema token 名称原样以保证跨品牌切换可靠；避免在复制的:roottoken 块之外使用裸 hex 值。

11. 总结

PlayStation 设计系统的全部精髓可以压缩为一句话：用 SST 300 的细体标题和近乎平坦的表面制造安静，再用 1.2× 青色开机 hover 提供唯一的爆发点。三面通道定节奏、11 值圆角分层级、0.06→0.8 的无中间档阴影阶梯定深度、8px 基础单位的画廊式留白定呼吸。无论你是要复刻一版 PlayStation 风格落地页，还是训练/审查 Agent 产出符合该品牌的界面，都可以把本文各节作为可直接引用的规范条目，并在 components.html 与 tokens.css 中找到逐像素的实现证据。

• AI 应用
• 人工智能
• AI 技能
• 设计系统
• 媒体生成