workbuddy_skills/open-design/design-systems/playstation/DESIGN-zh-tw.md

# 受 PlayStation 啟發的設計系統

> Category: 媒體與消費性電子
> 遊戲主機零售。三層介面通道版面、靜謐權威的展示字體、青色懸停縮放效果。

## 1. 視覺主題與氛圍

PlayStation.com 的氣質，像是一個恰好兼售娛樂商品的高階消費電子品牌行銷部門。頁面以**交替介面的垂直通道**為骨架：近黑色的標題列與主視覺區、中段一系列紙白色的編輯版塊，以及壓住整體視覺的深鈷藍色頁尾。在這些介面之間，網站大量倚賴攝影與 3D 產品渲染——PS5 主機、遊戲封面、DualSense 控制器——讓硬體本身承擔情感重量，而裝飾性元素則保持克制。

字體上最具辨識度的手法是**大尺寸的 SST Light（字重 300）**。索尼專屬的 SST 字族從 22px 至 54px 均採用字重 300，賦予展示標題一種低語般的優雅質感，更接近高端腕錶廣告，而非遊戲商店。這種「靜謐權威」與 The Verge 的 Manuka 大喊或 Wired 的雜誌密度截然相反——PlayStation 希望字體退讓，讓產品站到前台。內文與介面元素採用 500–700 字重，但*展示*語調始終輕盈而沉靜。

唯一打破克制的是**互動設計**。每個主要按鈕都有同一個懸停動效：填色切換為電藍色青 `#1eaedb`、出現 2px 白色外框、外圍浮現 2px PlayStation 藍外環，整個按鈕**放大至 1.2×**。色彩爆發、外框、外環與縮放提升的組合，是索尼在主流品牌中獨一無二的標誌動效——一個小型「開機」動畫，在單一頁面上重複出現數百次。

**核心特徵：**
- 三層介面通道版面：近黑色主視覺、紙白色內容區、鈷藍色頁尾——交替出現，從不混融
- 22–54px 的 SST 字重 300 作為展示字體——「靜謐權威」的標題，讓產品攝影主導視覺
- PlayStation Blue `#0070cc` 作為品牌錨點色；青色 `#1eaedb` 專用於懸停/焦點狀態
- 每個互動元素在懸停時放大 1.2×——PlayStation 獨有的「開機」縮放標誌
- 全膠囊按鈕，圓角半徑 999px；卡片圖片採用 12–24px 圓角矩形
- 商業橙 `#d53b00` 專用於 PlayStation Store 購買類行動呼籲
- 最高支援 2120px 的寬螢幕斷點——網站可延伸至 4K 電視瀏覽情境

## 2. 色彩調色盤與角色定義

### 主色（品牌錨點）
- **PlayStation Blue**（`#0070cc`）：品牌錨點色。用於主要頁尾、內聯連結、深色介面上的主要按鈕填色，以及所有「官方」標識。視為不可更動的基準——這是品牌在消費者記憶中最強烈的顏色連結。
- **Console Black**（`#000000`）：純黑色，用於標題列、主視覺背景及產品展示區。PlayStation 以黑色烘托硬體的方式，猶如博物館以黑色框設雕塑。

### 次要色與強調色
- **PlayStation Cyan**（`#1eaedb`）：互動色。**僅**應用於按鈕與連結的懸停、焦點及啟用狀態。絕不作為預設背景或靜止狀態的文字顏色。懸停時搭配 2px `#ffffff` 外框及 2px `#0070cc` 外環，以呈現完整的標誌性效果。
- **Link Hover Blue**（`#1883fd`）：用於內聯文字連結懸停的較亮變體。與青色不同——這是連結顏色，青色是按鈕顏色。
- **Dark Link Blue**（`#0068bd`）：淺色介面上靜止狀態的連結色——比品牌藍稍微飽和的近親色。

### 介面與背景色
- **Paper White**（`#ffffff`）：標題列與頁尾之間編輯版塊的主要內容畫布。
- **Ice Mist**（`#f5f7fa`）：淺色區段漸層的大氣末端色。在特定版塊後方低調使用，使其從純白背景中微微浮起。
- **Divider Tint**（`#f3f3f3`）：內容列之間靜謐的水平分隔線色。
- **Masthead Black**（`#000000`）：頂部導覽列與主視覺畫布——專屬於以產品為主的區域。
- **Shadow Black**（`#121314`）：當版塊需要大氣深度時，深色區段漸層的起始錨點色。
- **Filter Mist**（`rgba(245, 247, 250, 0.3)`）：用於黏性篩選列後方的半透明背景——網站上唯一的「玻璃擬態」時刻。

### 中性色與文字色
- **Display Ink**（`#000000`）：白色介面上的主要展示標題色。
- **Deep Charcoal**（`#1f1f1f`）：內文標題與靜止連結色——比純黑略柔，以減少大段文字的視覺壓迫感。
- **Body Gray**（`#6b6b6b`）：次要內文與後設資料。
- **Mute Gray**（`#cccccc`）：第三層標籤、禁用狀態。
- **Placeholder Ink**（`rgba(0, 0, 0, 0.6)`）：表單佔位文字——60% 黑色，非獨立灰色值。
- **Inverse White**（`#ffffff`）：深色與藍色介面上的主要文字色。
- **Dark-Link Blue**（`#53b1ff`）：深色/黑色介面上靜止狀態的連結色——PlayStation Blue 的較亮空中變體，確保在黑色背景上的可讀性。

### 語義色與商業色
- **Commerce Orange**（`#d53b00`）：專用於 PlayStation Store 購買狀態行動呼籲、價格標示及「特價」標籤。網站上唯一的暖色——需謹慎使用，且絕不出現在商業情境以外。
- **Commerce Orange Active**（`#aa2f00`）：商業按鈕的按下/啟用狀態。
- **Warning Red**（`#c81b3a`）：表單錯誤與破壞性操作警告。
- **Shadow Wash 80**（`rgba(0, 0, 0, 0.8)`）：產品攝影上主視覺文字背後的強烈遮罩。
- **Shadow Wash 16**（`rgba(0, 0, 0, 0.16)`）：卡片的低重量陰影環。
- **Shadow Wash 08**（`rgba(0, 0, 0, 0.08)`）：羽量卡片陰影——幾乎不可見，但能將白色面板從白色背景中分離。
- **Shadow Wash 06**（`rgba(0, 0, 0, 0.06)`）：系統中最輕的陰影。

### 漸層系統
PlayStation 使用**兩種區段漸層**，此外別無其他：
- **淺色區段漸層**：從 `#ffffff` → `#f5f7fa`——幾乎無法察覺的過渡，讓版塊從畫布上輕輕浮起。
- **深色區段漸層**：從 `#121314` → `#000000`——短暫的垂直過渡，為主視覺版塊增添細微的暗角效果，且不引入任何色相偏移。

兩種漸層**僅作為區段背景使用**，絕不用於元件內部。沒有漸層按鈕、漸層文字或光暈效果。品牌色是藍色——不是藍到紫、不是藍到青的漸層。

## 3. 字體排版規則

### 字型家族
- **SST** / **Playstation SST**（索尼，專有字型）——備用字型：`Arial`、`Helvetica`。索尼的全球專屬字型，由 Toshi Omagari 與 Akira Kobayashi 設計。涵蓋首頁使用的 300 / 500 / 600 / 700 字重。**300 字重在 22–54px** 是 PlayStation 的字體排版標誌。
- **SST（壓縮／替代版）**——備用字型：`helvetica`、`arial`。在少數需要節省寬度的介面模組中使用的緊縮變體。
- **Arial**——用於極少數以系統無串線體渲染的按鈕變體的通用備用字型。

### 層級結構

| 角色 | 字型 | 尺寸 | 字重 | 行高 | 字距 | 備注 |
|---|---|---|---|---|---|---|
| 主視覺展示（XL） | SST | 54px / 3.38rem | 300 | 1.25 | -0.1px | 頁面最大的 SST 時刻——靜謐字重的奢華標題 |
| 主視覺展示（L） | SST | 44px / 2.75rem | 300 | 1.25 | 0.1px | 次要主視覺標題 |
| 大型展示 | SST | 35px / 2.20rem | 300 | 1.25 | — | 特色版塊標題 |
| 中型展示 | SST | 28px / 1.75rem | 300 | 1.25 | 0.1px | 區段標題 |
| 緊湊展示 | SST | 22px / 1.38rem | 300 | 1.25 | 0.1px | 模組標題——仍維持輕盈字重 300 |
| Playstation SST 副標 | Playstation SST | 22.5px / 1.41rem | 400 | 1.30 | — | 促銷副標題 |
| 介面小標題 | SST | 18px / 1.13rem | 600 | 1.00 | — | 緊湊介面標題 |
| 按鈕 / CTA | SST | 18px / 1.13rem | 500 | 1.25 | 0.4px | 主要按鈕標籤 |
| 按鈕 / 強調版 | SST | 18px / 1.13rem | 700 | 1.25 | 0.45px | 高強調行動呼籲（購買、訂閱） |
| 按鈕襯線版 | SST | 18px / 1.13rem | 600 | 1.50 | — | 次要按鈕標籤 |
| 內文寬鬆版 | SST | 18px / 1.13rem | 400 | 1.50 | 0.1px | 標準閱讀內文 |
| 連結內文 | SST | 18px / 1.13rem | 400 | 1.50 | — | 內聯連結文字 |
| 緊湊按鈕 | SST | 14px / 0.88rem | 700 | 1.25 | 0.324px | 卡片內的迷你行動呼籲 |
| 通用說明文字 | SST | 14px / 0.88rem | 500 | 1.50 | — | 圖說、標籤文字 |
| 說明文字內文 | SST | 14px / 0.88rem | 400 | 1.50 | — | 標準後設資料 |
| Playstation 粗體說明 | Playstation SST | 14px / 0.88rem | 700 | 1.40 | — | 強調說明文字 |
| Playstation 中等說明 | Playstation SST | 14px / 0.88rem | 600 | 1.40 | — | 半粗說明文字 |
| Playstation 按鈕 | Playstation SST | 14.4px / 0.90rem | 700 | 1.00 | 0.144px | 緊湊行高的介面按鈕 |
| Playstation 標籤頁 | Playstation SST | 14px / 0.88rem | 400 | 1.10 | 0.14px | 標籤頁/膠囊標籤文字 |
| Playstation 緊湊說明 | Playstation SST | 12.8px / 0.80rem | 400 | 1.10 | — | 最小介面說明文字 |
| 微型說明 | SST | 12px / 0.75rem | 500 | 1.50 | — | 頁尾微型文字、法律聲明 |
| 緊湊粗體說明 | SST | 12.06px / 0.75rem | 700 | 1.50 | — | 強調微型文字 |

### 原則
- **大尺寸字重 300 即是語調。** PlayStation 是唯一一個在主視覺標題使用輕字重展示的主流主機品牌。請抵抗將展示字體「升級」至 500 或 700 的衝動——輕盈正是個性所在。
- **介面層的字重跳躍。** 18px 以下，系統切換至 500–700 以確保可讀性。從 300（展示）→ 400（內文）→ 500（說明）→ 700（按鈕）的字重漸層即是視覺層級。
- **字距幾乎微不可察。** 多數數值在 0.1–0.45px 之間，或正或略負。54px 主視覺的 `-0.1px` 讓展示字體稍微收緊，讀起來有「經過設計」的感覺，卻不會成為突出的排版宣言。
- **兩種 SST 大小寫系統。**「SST」與「Playstation SST」在功能上是同一字族，度量指標略有不同（Playstation SST 在小尺寸下更緊湊）。在索尼內部授權以外的使用場景中，可視為可互換。
- **無全大寫。** 不同於 The Verge 或 Wired，PlayStation 極少使用全大寫標籤。提要行與標籤維持首字母大寫或句首大寫——又一個「靜謐權威」的表現。
- **全站無襯線字體。** 整個系統均為無串線體，不存在印刷語調的對位元素。

## 4. 元件樣式

### 按鈕

**主要按鈕——PlayStation Blue 膠囊**
- 背景：`#0070cc`（PlayStation Blue）
- 文字：`#ffffff`，SST 18px / 500 / 0.4px 字距
- 外框：靜止時無
- 圓角半徑：`999px`——完整膠囊形
- 內距：約 `12px 24px`（依尺寸類別調整）
- 外框線：靜止時 `rgb(255, 255, 255) none 0px`
- **懸停（標誌動效）**：
  - 背景填色切換為 `#1eaedb`（PlayStation Cyan）
  - 文字維持 `#ffffff`
  - 出現 2px `#ffffff` 外框
  - 2px `#0070cc` 外環陰影浮現（`0 0 0 2px #0070cc`）
  - `transform: scale(1.2)`——按鈕實際放大 20%
- 啟用：`opacity: 0.6`——快速變暗以示按下
- 焦點：與懸停相同，但外環改為 `rgb(0, 114, 206) 0px 0px 0px 2px` 焦點陰影
- 過渡：約 180ms ease，作用於背景、transform 及陰影

**次要按鈕——深色背景上的白色外框**
- 背景：`#ffffff`
- 文字：`#0172ce`（PlayStation Blue 變體）
- 外框：`2px outset #000000`——真實的 `outset` 外框，在現代 CSS 中極為罕見
- 圓角半徑：不一（通常為 `999px` 或 `36px`）
- 內距：`16px 20px`
- 懸停：同標誌性青色填色 + scale(1.2) + 外環效果
- 焦點：同外環效果

**商業橙按鈕**
- 背景：`#d53b00`（Commerce Orange）
- 文字：`#ffffff`，SST 18px / 700 / 0.45px 字距
- 圓角半徑：`999px`——膠囊形
- 僅用於 PS Store／購買／訂閱 Plus 行動呼籲
- 啟用：背景加深至 `#aa2f00`
- 懸停：遵循青色反轉規則，與其他所有按鈕相同（非橙色專屬懸停）

**透明幽靈按鈕**
- 背景：透明
- 文字：`#1f1f1f`（Deep Charcoal）
- 外框：`1px solid #dedede`
- 內距：`0 10px`（緊湊，針對導覽列優化）
- 懸停：青色填色、白色文字、2px 白色外框、scale(1.2)
- 啟用：文字切換至 `#0072ce`，opacity 0.6

**圖示圓形按鈕**
- 背景：攝影圖片上為 `rgba(0, 0, 0, 0.2)`；淺色介面上為 `#ffffff`
- 圓角半徑：`100%`——正圓形
- 用於輪播上一張/下一張箭頭與分享按鈕
- 懸停：淡化至 `var(--color-role-backgrounds-primary-link-hover)`（淺色下約為 `#e5e5e5`）

**卡片內迷你行動呼籲**
- SST 14px / 700 / 0.324px 字距
- 內距約 8px 16px
- 圓角半徑：`999px`
- 用於遊戲卡片內的「立即購買」/「加入購物車」迷你行動呼籲

### 卡片與容器

**主視覺卡片（遊戲特色）**
- 背景：攝影/渲染圖——通常以黑色為基底
- 圓角半徑：特色卡片為 `24px` 或 `19px`
- 內距：32–48px
- 陰影：`rgba(0, 0, 0, 0.8) 0px 5px 9px 0px`——僅在卡片疊加於主視覺攝影時使用的強烈投影
- 懸停：細微縮放變換，主要行動呼籲出現青色外框

**遊戲封面磚**
- 背景：遊戲封面圖，無內距
- 圓角半徑：`12px` 或 `13px`（圖片）/`19px`（卡片框架）
- 陰影：`rgba(0, 0, 0, 0.08) 0px 5px 9px 0px`——羽量陰影
- 懸停：卡片主要行動呼籲亮起青色，卡片本身可能縮放至 1.02×
- 過渡：200ms ease 作用於 transform

**內容版塊（白色）**
- 背景：`#ffffff` 或淺色區段漸層 `#ffffff → #f5f7fa`
- 外框：通常無；以間距與細微陰影與相鄰元素區隔
- 圓角半徑：依版塊層級在 `12px`–`24px` 之間
- 陰影：`rgba(0, 0, 0, 0.06) 0px 5px 9px 0px`——系統中最輕的陰影

**深色背景上的深色卡片**
- 背景：攝影圖上的 `rgba(0, 0, 0, 0.2)`
- 圓角半徑：緊湊型為 `6px`，特色型為 `24px`
- 用於主視覺影片上的「新聞資料包」或「數據區塊」嵌入

### 輸入框與表單
- **預設**：`#ffffff` 背景，`1px solid #cccccc` 外框，`3px` 圓角半徑（比系統其他元素更緊湊——輸入框是 PlayStation 刻意呈現「功能性介面」感覺的唯一之處），`#1f1f1f` 顏色的 SST 16px 文字，佔位文字 `rgba(0, 0, 0, 0.6)`。
- **焦點**：通過 `box-shadow: 0 0 0 2px #0070cc` 產生 2px `#0070cc` 焦點環，外框顏色不變——由焦點環負責所有工作。
- **錯誤**：外框與文字切換至 `#c81b3a`（Warning Red），同色錯誤文字顯示於下方。
- **過渡**：約 180ms ease 作用於外框與陰影。

### 導覽列

- **頂部導覽列**：黑色（`#000000`）全出血條帶，左對齊白色 PlayStation 標誌，SST 14–16px / 500 居中分類連結，右對齊小型「登入」行動呼籲。
- **導覽連結懸停**：顏色從 `#ffffff` 過渡至 `#1883fd`（Link Hover Blue），無底線。
- **啟用區段**：以 `#0070cc` 的細微 2px 底線標示。
- **行動裝置**：導覽列收合為漢堡選單抽屜。抽屜內，連結垂直排列，間距 16px，水平內距 20px。
- **黏性行為**：導覽列在捲動時固定於頂部；進入淺色介面區域時**不反轉**——全程維持黑色背景。

### 圖片處理

- **長寬比**：16:9 主視覺影片/攝影，1:1 主機渲染，3:4 遊戲封面，4:3 生活風格圖片。
- **圓角**：依卡片情境圓化至 `12px`、`13px` 或 `24px`。遊戲封面為 `6–12px`，主視覺圖片為 `24px`。
- **全出血**：僅限頁首主視覺與頁尾促銷橫幅。其餘圖片均置於有內距的內容欄中。
- **陰影**：主視覺上的強烈 `rgba(0, 0, 0, 0.8) 0 5px 9px 0` 投影，格狀磚上的羽量 `rgba(0, 0, 0, 0.06) 0 5px 9px 0`。
- **懸停**：圖片保持靜止，卡片框架與主要行動呼籲響應。
- **懶載入**：摺疊線以下所有圖片使用 `loading="lazy"`，頁首主視覺使用 `eager`。

### 遊戲商店膠囊標籤（特色元件）
- 背景：`#ffffff`
- 文字：`#000000`，SST 14px / 500
- 內距：`14px 18px`
- 圓角半徑：`9999px`——完整膠囊形
- 置於遊戲封面旁的中性膠囊標籤，用於標示平台（「PS5」、「PS4」、「PSVR2」）。深色背景上的白色對比。

## 5. 版面配置原則

### 間距系統
- **基礎單位**：8px。
- **刻度**：1、2、3、4.5、5、8、9、10、12、14、15、16、18、20、21px。
- **區段內距**：主要版塊之間垂直方向 48–96px。主視覺至內容的過渡使用較大的數值。
- **卡片內距**：20–32px。特色主視覺卡片可擴展至 48px。
- **內聯間距**：標題與副標之間 8–12px，副標與行動呼籲之間 12–16px。
- **微刻度**：1/2/3/4.5/5/9/10/12 等值用於膠囊內距、說明文字間距及外框偏移——非用於編輯節奏。

### 網格與容器
- **最大寬度**：約 1920px（dembrandt 偵測到最高 2120px 的斷點）。容器上限依版塊在 `1280–1920px` 之間。
- **欄位模式**：12 欄響應式網格，依層級解析為 3/4/6 欄遊戲磚排列。主視覺區通常跨越 12 欄；特色磚採用 6+3+3 或 4+4+4 配置。
- **外側內距**：行動裝置 16px → 平板 48px → 桌面 64–96px。
- **欄位間距**：欄與欄之間 16–24px，磚群內部更緊湊（8–12px）。

### 留白哲學
PlayStation 對待留白的方式，如同奢侈品牌對待店內燈光——視為頂級信號。各模組之間的垂直呼吸空間，明顯多於任何其他主流零售網站；白色編輯版塊通常僅容納一個標題＋一張圖片＋一個行動呼籲，且以主視覺尺寸的內距呈現。效果如同「畫廊節奏」——每件產品擁有自己的展間，而非在縮圖格子中相互競爭。

### 圓角半徑刻度
- **2px**——Cookie 橫幅按鈕與小型管理介面
- **3px**——表單輸入框、標籤面板（比其他元素更緊湊——刻意傳遞「功能性介面」的視覺暗示）
- **6px**——緊湊按鈕與內聯圖片
- **12px**——標準遊戲封面圖與內容圖片
- **13px**——特定圖片包裝容器（比 12px 多 1px，用於巢狀結構）
- **19px**——特色卡片
- **20px**——內聯標籤 span
- **24px**——主視覺卡片、主要特色框架
- **36px**——全膠囊導覽列與次要按鈕變體
- **48px**——大型特色按鈕
- **999px / 100%**——完整膠囊主要按鈕與圓形圖示按鈕

共十一個不同的圓角值——本目錄中圓角系統最豐富的網站之一。這個範圍的存在，是因為 PlayStation 刻意對不同*層級*使用不同圓角：3px 用於功能性元素，12px 用於媒體，24px 用於特色區塊，999px 用於行動呼籲。

## 6. 深度與層次

| 層級 | 效果 | 使用場景 |
|---|---|---|
| 0 | 無陰影 | `#ffffff` 上的預設內容 |
| 1 | `rgba(0, 0, 0, 0.06) 0 5px 9px 0` | 編輯版塊的羽量浮起 |
| 2 | `rgba(0, 0, 0, 0.08) 0 5px 9px 0` | 標準格狀磚陰影 |
| 3 | `rgba(0, 0, 0, 0.16) 0 5px 9px 0` | 強調卡片（懸停或啟用） |
| 4 | `rgba(0, 0, 0, 0.8) 0 5px 9px 0` | 主視覺疊加陰影——攝影圖上的強烈投影 |
| 5 | `0 0 0 2px #0070cc`（焦點環） | 主要按鈕焦點狀態 |
| 6 | `0 0 0 2px #000000`（懸停環） | 次要按鈕懸停環 |
| 7 | 區段漸層 `#121314 → #000000` | 深色主視覺版塊的大氣深度 |

PlayStation 的深度哲學是**分層但克制的**。陰影刻度在正常狀態下從 0.06 到 0.16，然後在主視覺投影時跳至 0.8——不存在 0.2、0.3、0.4 的中間地帶。效果是頁面大部分幾乎是平的，但當主視覺卡片需要漂浮於攝影圖之上時，它會真實地*漂浮*。深度要麼輕聲細語，要麼大聲宣告，從不喃喃自語。

### 裝飾性深度
- **區段漸層**（深色與淺色，如上所述）——僅作為區段背景使用
- **焦點/懸停環**為 2px，依狀態始終為藍色或青色
- **區段過渡之外，無光暈、模糊或大氣效果**
- **無漸層按鈕或漸層文字**——視覺系統在區段過渡以外均為純色色塊

## 7. 應做與不應做

### 應做
- **應**使用 PlayStation Blue（`#0070cc`）作為主要行動呼籲填色與頁尾錨點色，這是品牌的錨點色。
- **應**對所有 22px 及以上的展示標題使用 SST 字重 300。輕盈字重的標題即是語調本身。
- **應**對每個主要按鈕應用完整懸停標誌：青色填色＋2px 白色外框＋2px 藍色外環＋`scale(1.2)`。
- **應**對主要按鈕與商業按鈕使用完整膠囊圓角（`999px`）。
- **應**將 PlayStation Cyan（`#1eaedb`）專用於懸停、焦點和啟用狀態——絕不作為靜止背景。
- **應**僅在 PlayStation Store／購買行動呼籲與價格標示上使用 Commerce Orange（`#d53b00`）。
- **應**以深色主視覺版塊與白色內容版塊交替出現，並以深藍色頁尾收尾——三層介面通道版面即是頁面節奏。
- **應**在卡片疊加於產品攝影時使用強烈的 `rgba(0, 0, 0, 0.8)` 主視覺投影。
- **應**在所有捲動位置保持頂部導覽列為黑色——它不會在淺色版塊上反轉為白色。

### 不應做
- **不應**將展示標題加粗。22–54px 的字重 300 是 PlayStation 的語調。700 字重的展示字體讀起來像「又一家遊戲零售商」。
- **不應**使用全大寫標籤或提要行。PlayStation 極少使用大寫——這是一個靜謐權威的品牌，不是危險標語。
- **不應**在兩種既定區段漸層以外使用漸層按鈕、漸層文字或漸層背景。
- **不應**在 Commerce Orange 以外引入暖色。不使用紅色行動呼籲、黃色高亮或綠色成功標籤。
- **不應**在按鈕或媒體上使用直角。系統有十一種圓角——選一個，但絕不使用 `0`。
- **不應**省略主要按鈕的 `scale(1.2)` 懸停動效。縮放提升是品牌互動標誌。
- **不應**使用襯線字體。系統百分之百使用 SST 無串線體。
- **不應**讓青色 `#1eaedb` 以靜止狀態作為文字或背景色出現。它只存在於動態之中。
- **不應**設計相互競爭的版塊。PlayStation 的留白節奏為每個模組提供專屬的「展示空間」。

## 8. 響應式行為

### 斷點

| 名稱 | 寬度 | 主要變化 |
|---|---|---|
| 小型行動裝置 | <400px | 單欄，導覽列收合為漢堡，SST 主視覺縮至約 28px |
| 行動裝置 | 400–599px | 單欄，磚塊全寬堆疊，內距擴展至 16px |
| 大型行動裝置 | 600–767px | 仍為單欄，但特定模組提供 2 欄磚塊選項 |
| 平板縱向 | 768–1023px | 2 欄遊戲網格，導覽列仍為緊縮版 |
| 平板橫向 | 1024–1279px | 3–4 欄網格，恢復完整導覽列 |
| 桌面 | 1280–1599px | 完整編輯網格，最大主視覺展示尺寸（44–54px） |
| 大型桌面 | 1600–1919px | 容器上限 1600px，外側邊距擴展 |
| 4K/大螢幕 | ≥1920px | 容器擴展至最大 1920px，主視覺內容放大以配合電視觀看距離 |
| 超寬螢幕 | ≥2120px | 極端斷點——頁面保持錨定，外側邊距吸收多餘寬度 |

dembrandt 掃描偵測到 320px 至 2120px 之間共 30 個斷點——響應式範圍異常寬廣。PlayStation 特別針對**大螢幕情境**（1920–2120px）進行調整，因為 PS5 用戶經常透過主機瀏覽器或手機投放至電視在電視上瀏覽網站。多數零售網站的調整停在 1440px；PlayStation 一路調整至 4K。

### 觸控目標
- 主要膠囊按鈕高度約 48–56px（SST 18px 文字＋約 12–16px 垂直內距）——完全符合 WCAG AAA 標準。
- 桌面導覽連結較小（約 32–40px 高）；在行動裝置的抽屜內，觸控目標擴展至 48px 以上。
- 圓形圖示按鈕為 40–48px——觸控友善。

### 收合策略
- **導覽列**：隨視窗縮小，從完整導覽→緊縮版→漢堡抽屜。標誌固定於左側；行動呼籲固定於右側。
- **網格**：6 欄→4 欄→3 欄→2 欄→1 欄。遊戲磚卡片重排時不裁切封面圖。
- **間距**：隨視窗縮小，區段內距從 96px→64px→48px→32px→24px 收緊。
- **字體**：SST 主視覺從 54px→44px→35px→28px→22px 縮小。輕字重 300 在每個尺寸下均保留。
- **主視覺攝影**：藝術指導切換——桌面使用寬幅 16:9 裁切，行動裝置使用 4:3 或 1:1 裁切，產品置中。

### 圖片行為
- 響應式點陣圖（`srcset` ＋藝術指導 `<picture>`），長寬比依斷點保留。
- 4K 就緒：網站在 1920px 以上提供高密度圖片，避免電視瀏覽時放大失真。
- 摺疊線以下所有圖片使用 `loading="lazy"`；主視覺使用 `eager` 並附帶預載提示。

## 9. Agent 提示指南

### 快速色彩參照
- **主要行動呼籲**：「PlayStation Blue（`#0070cc`）」
- **懸停/焦點強調色**：「PlayStation Cyan（`#1eaedb`）」
- **背景（白色介面）**：「Paper White（`#ffffff`）」
- **背景（深色介面）**：「Console Black（`#000000`）」
- **白色背景上的標題文字**：「Display Ink（`#000000`）」
- **白色背景上的內文文字**：「Deep Charcoal（`#1f1f1f`）」
- **黑色背景上的內文文字**：「Inverse White（`#ffffff`）」
- **商業/購買強調色**：「Commerce Orange（`#d53b00`）」
- **頁尾錨點色**：「PlayStation Blue（`#0070cc`）」

### 元件提示範例
1. *「建立一個主要行動呼籲按鈕：`#0070cc` PlayStation Blue 填色、白色文字使用 SST 18px / 500 / 0.4px 字距、999px 圓角半徑、12px × 24px 內距。懸停時，背景在 180ms ease 過渡中切換至 `#1eaedb` PlayStation Cyan、出現 2px `#ffffff` 外框、通過 box-shadow 浮現 2px `#0070cc` 外環，整個按鈕放大 1.2×。」*
2. *「在 `#000000` Console Black 畫布上設計一個主視覺版塊：54px SST 字重 300 標題使用 `#ffffff` 顏色，字距 -0.1px，行高 1.25。下方放置一個使用標準 PlayStation 懸停效果的主要行動呼籲。任何地方都不使用全大寫標籤。」*
3. *「建立一個遊戲封面磚：3:4 長寬比圖片，12px 圓角半徑，羽量 `rgba(0, 0, 0, 0.08) 0 5px 9px 0` 投影，下方 14px SST 700 標題、12px SST 500 平台標籤，以及 PlayStation Blue 的迷你主要行動呼籲，採用 14px / 700 / 0.324px 字距。」*
4. *「為 PlayStation Store 購買建立一個商業膠囊按鈕：`#d53b00` Commerce Orange 填色、`#ffffff` 文字使用 SST 18px / 700 / 0.45px 字距、999px 圓角半徑、12px × 28px 內距。啟用狀態加深至 `#aa2f00`。懸停遵循標準青色反轉與 1.2× 縮放規則。」*
5. *「在深色主視覺區段之間設計一個白色內容版塊：`#ffffff` 背景配合細微的 `#ffffff → #f5f7fa` 淺色區段漸層、24px 圓角半徑、48px 內距、羽量 `rgba(0, 0, 0, 0.06) 0 5px 9px 0` 陰影、35px SST 300 標題、18px 內文段落，以及一個主要行動呼籲。」*

### 迭代指南
在精修以此設計系統生成的現有畫面時：
1. **稽核展示字重。** 22px 及以上的所有標題應為 SST 字重 300。若在主視覺尺寸看到字重 500 或 700，代表已失去 PlayStation 的語調。
2. **稽核懸停效果。** 每個主要按鈕在懸停時必須以青色填色＋白色外框＋藍色外環的組合放大 1.2×。遺漏其中任何一項，互動標誌即告破功。
3. **稽核圓角。** 每個容器與按鈕應落在 2、3、6、12、13、19、20、24、36、48 或 999px / 100% 上。直角會破壞語調。
4. **稽核色彩蔓延。** 介面中應只出現 PlayStation Blue（`#0070cc`）、Cyan（`#1eaedb`）、Commerce Orange（`#d53b00`）以及既定的灰色/黑色/白色。若看到任何其他色相，予以修正。
5. **稽核介面交替。** 頁面應以深色主視覺→白色內容→深色主視覺→白色內容→藍色頁尾交替排列。若相鄰的兩個版塊介面相同，插入一個過渡版塊。
6. **稽核大小寫。** 僅限句首大寫與首字母大寫。不使用全大寫標籤、按鈕或提要行。若看到全大寫，予以轉換。
7. **稽核陰影重量。** 陰影不透明度應落在 0.06 / 0.08 / 0.16 / 0.8——不存在中間值。若看到 0.1、0.2、0.3、0.5 的投影，修正至最近的既定層級。
8. **稽核留白。** 若兩個模組感覺「相互競爭」（爭奪視覺注意力），增加 48–96px 的垂直呼吸空間。PlayStation 的畫廊節奏節奏不可妥協。