# Дизайн-система натхненна PlayStation

> Category: Медіа та споживачі
> Ритейл для ігрових консолей. Триповерхневий канальний макет, дисплейна типографіка «тихого авторитету», ціановий hover-ефект масштабування.

## 1. Візуальна тема та атмосфера

PlayStation.com поводиться як маркетинговий підрозділ преміального бренду споживчої електроніки, що водночас займається продажем розваг. Сторінка організована як **вертикальний канал із поверхнями, що чергуються**: майже чорна шапка та хіро-зона, послідовність кремово-білих редакційних панелей у середині та темно-кобальтово-синя підвальна секція, яка закріплює весь досвід. Між цими поверхнями сайт активно використовує фотографії та 3D-рендери продуктів — консоль PS5, обкладинки ігор, контролери DualSense — дозволяючи «заліза» виконувати емоційну роботу, поки все навколо залишається стриманим.

Фірмовий типографічний прийом — **SST Light (жирність 300) у великих розмірах**. Фірмова гарнітура Sony SST використовується від 22px до 54px із жирністю 300, надаючи заголовкам пошептану, вишукану якість, ближчу до реклами розкішних годинників, аніж до ігрового магазину. Цей «тихий авторитет» є повною протилежністю кричущого Manuka від The Verge чи щільності кіоску Wired — PlayStation хоче, щоб типографіка відступала, а продукт вів. Основний текст і UI спираються на жирності 500–700, але дисплейний голос стабільно тонкий і спокійний.

Одне місце, де стриманість порушується, — це **взаємодія**. Кожна первинна кнопка має однаковий hover-ефект: заливка змінюється на електричний ціановий `#1eaedb`, з'являється 2px біла рамка, ззовні розквітає 2px кільце PlayStation-синього кольору, і вся кнопка **масштабується на 1.2×**. Це поєднання кольорового акценту, рамки, кільця та збільшення є фірмовим прийомом, унікальним для Sony серед великих брендів, — мініатюрна анімація «увімкнення», що повторюється сотні разів на одній сторінці.

**Ключові характеристики:**
- Триповерхневий канальний макет: майже чорне хіро, кремово-біла секція контенту, кобальтово-синій підвал — чергуються, ніколи не змішуються
- SST жирністю 300 від 22 до 54px для дисплею — заголовки «тихого авторитету», що поступаються місцем предметній фотографії
- PlayStation Blue `#0070cc` як якірний колір бренду; ціановий `#1eaedb` зарезервований виключно для станів hover/focus
- Кожен інтерактивний елемент масштабується на 1.2× при наведенні — фірмовий «ліфт увімкнення», унікальний для PlayStation
- Кнопки-пілюлі з повним радіусом 999px; обкладинки карток у прямокутниках з заокругленням 12–24px
- Commerce-помаранчевий `#d53b00` використовується виключно для CTA PlayStation Store / стану купівлі
- Широке охоплення брейкпоінтів до 2120px — сайт масштабується аж до контексту перегляду на 4K-телевізорах

## 2. Кольорова палітра та ролі

### Первинні (якір бренду)
- **PlayStation Blue** (`#0070cc`): Якірний колір бренду. Використовується на основному підвалі, вбудованих посиланнях, заливці первинних кнопок на темних поверхнях та кожному «офіційному» маркері. Вважайте його непорушним — це колір, з яким бренд найбільше асоціюється в пам'яті споживачів.
- **Console Black** (`#000000`): Чистий чорний для шапки, тла хіро-зони та зон презентації продуктів. PlayStation використовує чорний для обрамлення «заліза» так само, як музей використовує чорний для обрамлення скульптури.

### Вторинні та акцентні
- **PlayStation Cyan** (`#1eaedb`): Колір взаємодії. Застосовується ЛИШЕ до станів hover, focus та active кнопок і посилань. Ніколи не з'являється як тло у стані спокою чи колір тексту в спокої. У поєднанні з рамкою 2px `#ffffff` і зовнішнім кільцем 2px `#0070cc` при наведенні дає повне фірмове оформлення.
- **Link Hover Blue** (`#1883fd`): Яскравіший варіант, що використовується при наведенні на вбудовані текстові посилання. Відрізняється від Cyan — це колір посилань, Cyan — колір кнопок.
- **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)`): Напівпрозоре тло за закріпленими панелями фільтрів — єдиний момент «glassmorphism» на сайті.

### Нейтральні та текстові
- **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`): Зарезервовано для CTA стану купівлі в 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** (Sony, власницький) — резерв: `Arial`, `Helvetica`. Фірмова глобальна гарнітура Sony, розроблена Тоші Омагарі та Акірою Кобаяші. Охоплює жирності 300 / 500 / 600 / 700 на головній сторінці. Жирність **300 від 22 до 54px** є типографічною підписом PlayStation.
- **SST (condensed / alternate)** — резерв: `helvetica`, `arial`. Стиснутий варіант, що використовується в кількох UI-модулях там, де ширина має значення.
- **Arial** — службовий резерв для рідкісного варіанту кнопки, що рендериться в системному гротеску.

### Ієрархія

| Роль | Шрифт | Розмір | Жирність | Висота рядка | Міжлітерний інтервал | Примітки |
|---|---|---|---|---|---|---|
| Hero Display (XL) | SST | 54px / 3.38rem | 300 | 1.25 | -0.1px | Найбільший момент SST на сторінці — розкішний заголовок легкої жирності |
| Hero Display (L) | SST | 44px / 2.75rem | 300 | 1.25 | 0.1px | Вторинні заголовки хіро |
| Large Display | SST | 35px / 2.20rem | 300 | 1.25 | — | Заголовки фіче-панелей |
| Mid Display | SST | 28px / 1.75rem | 300 | 1.25 | 0.1px | Заголовки секцій |
| Compact Display | SST | 22px / 1.38rem | 300 | 1.25 | 0.1px | Назви модулів — все ще легка жирність 300 |
| Playstation SST Sub | Playstation SST | 22.5px / 1.41rem | 400 | 1.30 | — | Промоційний підзаголовок |
| UI Heading Small | SST | 18px / 1.13rem | 600 | 1.00 | — | Щільні UI-заголовки |
| Button / CTA | SST | 18px / 1.13rem | 500 | 1.25 | 0.4px | Мітка первинної кнопки |
| Button / Emphasized | SST | 18px / 1.13rem | 700 | 1.25 | 0.45px | CTA з підвищеним акцентом (купити, підписатися) |
| Button Serif | SST | 18px / 1.13rem | 600 | 1.50 | — | Мітка вторинної кнопки |
| Body Relaxed | SST | 18px / 1.13rem | 400 | 1.50 | 0.1px | Стандартний основний текст для читання |
| Link Body | SST | 18px / 1.13rem | 400 | 1.50 | — | Текст вбудованого посилання |
| Compact Button | SST | 14px / 0.88rem | 700 | 1.25 | 0.324px | Міні-CTA в картках |
| Utility Caption | SST | 14px / 0.88rem | 500 | 1.50 | — | Підписи, мітки тегів |
| Caption Body | SST | 14px / 0.88rem | 400 | 1.50 | — | Стандартні метадані |
| Playstation Caption Bold | Playstation SST | 14px / 0.88rem | 700 | 1.40 | — | Акцентований підпис |
| Playstation Caption Mid | Playstation SST | 14px / 0.88rem | 600 | 1.40 | — | Напівжирний підпис |
| Playstation Button | Playstation SST | 14.4px / 0.90rem | 700 | 1.00 | 0.144px | UI-кнопка з щільним міжрядковим |
| Playstation Tab | Playstation SST | 14px / 0.88rem | 400 | 1.10 | 0.14px | Мітка вкладки/пілюлі |
| Playstation Compact Caption | Playstation SST | 12.8px / 0.80rem | 400 | 1.10 | — | Найменший UI-підпис |
| Micro Caption | SST | 12px / 0.75rem | 500 | 1.50 | — | Мікрокопі підвалу, юридичний текст |
| Compact Caption Bold | SST | 12.06px / 0.75rem | 700 | 1.50 | — | Акцентований мікротекст |

### Принципи
- **Жирність 300 у великих розмірах — це голос.** PlayStation — єдиний великий бренд консолей, що використовує легку жирність для хіро-заголовків. Не піддавайтеся спокусі «покращити» дисплейну типографіку до 500 або 700 — тихість і є особистістю.
- **Стрибки жирності на UI-рівні.** Нижче 18px система переходить до 500–700 для читабельності. Градієнт жирності від 300 (дисплей) → 400 (основний текст) → 500 (підписи) → 700 (кнопки) — це ієрархія.
- **Міжлітерний інтервал — ледь помітний.** Більшість значень — від 0.1 до 0.45px, позитивні або злегка від'ємні. `-0.1px` на 54px хіро злегка ущільнює дисплейну типографіку рівно настільки, щоб читалося як «спроектовано», не стаючи типографічним твердженням.
- **Два регістри SST.** «SST» та «Playstation SST» функціонально є одним сімейством з дещо різними метриками (Playstation SST щільніший у малих розмірах). Вважайте їх взаємозамінними для цілей поза внутрішнім ліцензуванням Sony.
- **Без капітелі.** На відміну від 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` в стані спокою
- **Hover (фірмовий прийом)**:
  - Тло змінюється на `#1eaedb` (PlayStation Cyan)
  - Текст залишається `#ffffff`
  - З'являється рамка 2px `#ffffff`
  - Розквітає зовнішнє кільце-тінь 2px `#0070cc` (`0 0 0 2px #0070cc`)
  - `transform: scale(1.2)` — кнопка реально збільшується на 20%
- Active: `opacity: 0.6` — швидке затемнення для сигналу натискання
- Focus: Те саме, що hover, але кільце перетворюється на тінь focus `rgb(0, 114, 206) 0px 0px 0px 2px`
- Transition: ~180ms ease на тлі, трансформації та тіні

**Вторинна — Біла обведення на темному**
- Тло: `#ffffff`
- Текст: `#0172ce` (варіант PlayStation Blue)
- Рамка: `2px outset #000000` — справжня `outset`-рамка, що вкрай рідко зустрічається в сучасному CSS
- Радіус: варіюється (часто `999px` або `36px`)
- Відступи: `16px 20px`
- Hover: те саме фірмове ціанове заповнення + scale(1.2) + обробка кільця
- Focus: те саме оброблення кільця

**Commerce Orange**
- Тло: `#d53b00` (Commerce Orange)
- Текст: `#ffffff`, SST 18px / 700 / 0.45px трекінг
- Радіус рамки: `999px` — пілюля
- Використовується лише на CTA PS Store / Купити / Підписатися Plus
- Active: тло темніє до `#aa2f00`
- Hover: слідує правилу ціанового інверту, як усі інші кнопки (НЕ hover, специфічний для помаранчевого)

**Прозорий Ghost**
- Тло: прозоре
- Текст: `#1f1f1f` (Deep Charcoal)
- Рамка: `1px solid #dedede`
- Відступи: `0 10px` (щільний, оптимізований для навігації)
- Hover: ціанове заповнення, білий текст, рамка 2px біла, scale(1.2)
- Active: текст переходить в `#0072ce`, opacity 0.6

**Коло іконки**
- Тло: `rgba(0, 0, 0, 0.2)` на фотографії; `#ffffff` на світлих поверхнях
- Радіус рамки: `100%` — ідеальне коло
- Використовується для стрілок карусельного перегляду та кнопок поширення
- Hover: освітлюється до `var(--color-role-backgrounds-primary-link-hover)` (приблизно `#e5e5e5` на світлому)

**Міні CTA (всередині картки)**
- SST 14px / 700 / 0.324px трекінг
- Відступи ~8px 16px
- Радіус: `999px`
- Використовується всередині карток ігор для міні-CTA «Купити зараз» / «Додати до кошика»

### Картки та контейнери

**Картка хіро (фіче гри)**
- Тло: фотографія/рендер — зазвичай чорний якір
- Радіус рамки: `24px` або `19px` для фіче-карток
- Відступи: внутрішній 32–48px
- Тінь: `rgba(0, 0, 0, 0.8) 0px 5px 9px 0px` — драматична відкидна тінь, що використовується лише коли картка перекриває хіро-фотографію
- Hover: тонка трансформація масштабування, ціановий контур з'являється на первинному CTA

**Тайл обкладинки гри**
- Тло: обкладинка гри, без відступів
- Радіус рамки: `12px` або `13px` (зображення) / `19px` (рамка картки)
- Тінь: `rgba(0, 0, 0, 0.08) 0px 5px 9px 0px` — пухнаста висота
- Hover: основний CTA картки засвічується ціановим, сама картка може масштабуватися на 1.02×
- Transition: 200ms ease на трансформації

**Панель контенту (біла)**
- Тло: `#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 дійсно стає компактним), текст SST 16px у `#1f1f1f`, заповнювач `rgba(0, 0, 0, 0.6)`.
- **Focus**: кільце focus 2px `#0070cc` через `box-shadow: 0 0 0 2px #0070cc`. Колір рамки не змінюється — кільце виконує роботу.
- **Помилка**: рамка та текст переходять на `#c81b3a` (Warning Red), рядковий текст помилки нижче в тому ж червоному.
- **Transition**: ~180ms ease на рамці та тіні.

### Навігація

- **Верхня навігація**: чорна (`#000000`) смуга на всю ширину з логотипом PlayStation (білим) зліва, категоріальними посиланнями SST 14–16px / 500 по центру та невеликим CTA «Увійти» справа.
- **Hover на навігаційному посиланні**: колір переходить з `#ffffff` до `#1883fd` (Link Hover Blue), без підкреслення.
- **Активна секція**: позначена тонким підкресленням 2px у `#0070cc`.
- **Мобільний**: навігація згортається у висувну шухляду з гамбургером. Всередині шухляди посилання розташовуються вертикально з відступами 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` на тайлах сітки.
- **Hover**: зображення залишається статичним, рамка картки та первинний CTA реагують.
- **Ліниве завантаження**: `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 між анонсом і CTA.
- **Мікрошкала**: значення 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 ставиться до білого простору так само, як розкішний бренд ставиться до освітлення в магазині — як до преміального сигналу. Між модулями помітно більше вертикального простору для дихання, ніж на будь-якому іншому великому роздрібному сайті, а білі редакційні панелі часто містять лише один заголовок + одне зображення + один CTA на відступах хіро-масштабу. Ефект — «галерейний темп», де кожен продукт отримує власний простір, а не конкурує в сітці мініатюр.

### Шкала радіусу рамки
- **2px** — кнопки банера з куками та невеликий адміністративний UI
- **3px** — введення форм, панелі вкладок (щільніші за все інше — навмисний сигнал «функціонального UI»)
- **6px** — компактні кнопки та вбудовані зображення
- **12px** — стандартні зображення обкладинок ігор та зображення контенту
- **13px** — певні обгортки фігур (зміщення на 1px від 12px для вкладення)
- **19px** — фіче-картки
- **20px** — вбудовані теги-проміжки
- **24px** — картки хіро, основні рамки фіч
- **36px** — повні пілюлі навігації та варіанти вторинних кнопок
- **48px** — великі фіче-кнопки
- **999px / 100%** — повні пілюлі первинних кнопок та кругові кнопки іконок

Одинадцять окремих значень радіуса — одна з найбагатших систем радіусів серед будь-яких сайтів у цьому каталозі. Діапазон існує тому, що PlayStation навмисно використовує різні радіуси для різних *ієрархій*: 3px для утилітарності, 12px для медіа, 24px для фіч, 999px для CTA.

## 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` | Акцентована картка (hover або active) |
| 4 | `rgba(0, 0, 0, 0.8) 0 5px 9px 0` | Тінь хіро-оверлею — драматична відкидна тінь поверх фотографії |
| 5 | `0 0 0 2px #0070cc` (кільце focus) | Стан focus первинної кнопки |
| 6 | `0 0 0 2px #000000` (кільце hover) | Кільце hover вторинної кнопки |
| 7 | Секційний градієнт `#121314 → #000000` | Атмосферна глибина на темних хіро-панелях |

Філософія глибини PlayStation — **пошарова, але стримана**. Шкала тіней варіюється від 0.06 до 0.16 для нормальних станів, потім стрибає до 0.8 для хіро-відкидних — немає середнього діапазону 0.2, 0.3, 0.4. Ефект полягає в тому, що більша частина сторінки знаходиться майже пласко, але коли картці хіро потрібно зависнути над фотографією, вона реально *зависає*. Висота або шепоче, або кричить, але ніколи не бурмоче.

### Декоративна глибина
- **Секційні градієнти** (темний та світлий, обидва описані вище) — використовуються лише як тла секцій
- **Кільця focus/hover** на 2px, завжди синій або ціановий залежно від стану
- **Без свічень, розмиттів або атмосферних ефектів** поза двома секційними градієнтами
- **Без градієнтних кнопок або тексту** — візуальна система всюди є суцільними кольоровими блоками, крім переходів між секціями

## 7. Що робити і чого не робити

### Робити
- **Робіть** використовуйте PlayStation Blue (`#0070cc`) як основну заливку CTA та якір підвалу. Це якірний колір бренду.
- **Робіть** використовуйте SST жирністю 300 для кожного дисплейного заголовку від 22px і вище. Заголовок легкої жирності — це голос.
- **Робіть** застосовуйте повний фірмовий hover до кожної первинної кнопки: ціанова заливка + рамка біла 2px + зовнішнє синє кільце 2px + `scale(1.2)`.
- **Робіть** використовуйте повний радіус пілюлі (`999px`) на первинних та торгових кнопках.
- **Робіть** резервуйте PlayStation Cyan (`#1eaedb`) виключно для станів hover, focus та active — ніколи як тло в стані спокою.
- **Робіть** використовуйте Commerce Orange (`#d53b00`) лише на CTA PlayStation Store / купівлі та виносках цін.
- **Робіть** чергуйте темні хіро-панелі з білими панелями контенту та закріплюйте темно-синім підвалом — триповерхневий канальний макет є ритмом сторінки.
- **Робіть** використовуйте драматичні хіро-відкидні тіні `rgba(0, 0, 0, 0.8)`, коли картка перекриває предметну фотографію.
- **Робіть** тримайте верхню навігацію чорною на кожній позиції прокрутки — вона не інвертується на білий над світлими панелями.

### Не робити
- **Не робіть** жирними дисплейними заголовками. Жирність 300 від 22 до 54px — це голос PlayStation. Дисплейна типографіка жирністю 700 читається як «черговий ігровий роздрібний продавець».
- **Не робіть** мітки та кікери ВЕЛИКИМИ ЛІТЕРАМИ. PlayStation рідко використовує верхній регістр — це бренд «тихого авторитету», а не застережливої стрічки.
- **Не робіть** градієнтні кнопки, текст або тла поза двома оголошеними секційними градієнтами.
- **Не робіть** введення теплих кольорів поза Commerce Orange. Без червоних CTA, без жовтих виносок, без зелених пілюль успіху.
- **Не робіть** квадратні кути на кнопках або медіа. Система має одинадцять радіусів — оберіть один, але ніколи `0`.
- **Не пропускайте** hover-ефект `scale(1.2)` на первинних кнопках. Масштабування з підняттям — фірмовий підпис взаємодії бренду.
- **Не робіть** засічний шрифт. Система на 100% — SST гротеск.
- **Не дозволяйте** ціановому `#1eaedb` з'являтися як текстовий або фоновий колір у стані спокою. Він існує лише в русі.
- **Не проектуйте** панелі, що борються за увагу. Ритм білого простору PlayStation надає кожному модулю власну «галерейну кімнату».

## 8. Адаптивна поведінка

### Брейкпоінти

| Назва | Ширина | Ключові зміни |
|---|---|---|
| Small Mobile | <400px | Одна колонка, навігація згортається в гамбургер, хіро SST масштабується до ~28px |
| Mobile | 400–599px | Одна колонка, тайли складаються на всю ширину, відступи відкриваються до 16px |
| Large Mobile | 600–767px | Все ще одна колонка, але опція 2-колонних тайлів у деяких модулях |
| Tablet Portrait | 768–1023px | 2-колонна сітка ігор, навігація ще стиснута |
| Tablet Landscape | 1024–1279px | Сітка 3–4 колонки, повна навігація відновлена |
| Desktop | 1280–1599px | Повна редакційна сітка, максимальний масштаб дисплею хіро (44–54px) |
| Large Desktop | 1600–1919px | Контейнер обмежується 1600px, поля розширюються |
| 4K / Big-Screen | ≥1920px | Контейнер розширюється до максимум 1920px, хіро-контент масштабується для перегляду з відстані телевізора |
| Ultra-Wide | ≥2120px | Екстремальний брейкпоінт — сторінка залишається закріпленою, зовнішні поля поглинають додаткову ширину |

Розвідка dembrandt виявила 30 брейкпоінтів між 320px та 2120px — незвично широкий адаптивний діапазон. PlayStation налаштовує конкретно для **контекстів великих екранів** (1920–2120px), оскільки власники PS5 часто переглядають сайт на телевізорах через браузер консолі або через трансляцію з телефону на телевізор. Більшість роздрібних сайтів зупиняє налаштування на 1440px; PlayStation продовжує налаштування через 4K.

### Цільові розміри для дотику
- Первинні кнопки-пілюлі мають висоту ~48–56px (текст SST 18px + ~12–16px вертикального відступу) — комфортно відповідає WCAG AAA.
- Навігаційні посилання менші (~32–40px заввишки) на десктопі; на мобільному вони відступаються до 48px+ всередині шухляди.
- Кругові кнопки іконок — 40–48px — зручні для дотику.

### Стратегія згортання
- **Навігація**: повна навігація → стиснута → висувна шухляда з гамбургером при звуженні вьюпорту. Логотип залишається закріпленим ліворуч; CTA залишається закріпленим праворуч.
- **Сітка**: 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. Посібник із промптів для агентів

### Швидкий довідник кольорів
- **Первинний 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 / купівлі**: «Commerce Orange (`#d53b00`)»
- **Якір підвалу**: «PlayStation Blue (`#0070cc`)»

### Приклади промптів для компонентів
1. *«Створіть первинну CTA-кнопку із заливкою PlayStation Blue `#0070cc`, білим текстом SST 18px / 500 / 0.4px трекінг, радіусом рамки 999px, відступами 12px × 24px. При наведенні тло переходить до `#1eaedb` PlayStation Cyan, з'являється рамка 2px `#ffffff`, розквітає зовнішнє кільце 2px `#0070cc` через box-shadow, і вся кнопка масштабується на 1.2× — все у 180ms ease-переходах.»*
2. *«Спроектуйте хіро-панель на полотні Console Black `#000000` із заголовком 54px SST жирністю 300 у `#ffffff` із -0.1px міжлітерного інтервалу та висотою рядка 1.25. Розмістіть один первинний CTA нижче зі стандартною PlayStation hover-обробкою. Жодних ВЕЛИКОЛІТЕРНИХ міток.»*
3. *«Побудуйте тайл обкладинки гри: зображення зі співвідношенням 3:4 і радіусом 12px, пухнаста відкидна тінь `rgba(0, 0, 0, 0.08) 0 5px 9px 0`, назва SST 14px 700 нижче, тег платформи SST 12px 500, та міні-CTA 14px / 700 / 0.324px трекінг у PlayStation Blue.»*
4. *«Створіть торгову кнопку-пілюлю для покупки в PlayStation Store: заливка Commerce Orange `#d53b00`, текст `#ffffff` SST 18px / 700 / 0.45px трекінг, радіус 999px, відступи 12px × 28px. Активний стан темніє до `#aa2f00`. Hover слідує стандартному ціановому інверту з масштабуванням 1.2×.»*
5. *«Спроектуйте білу панель контенту між темними хіро-секціями: тло `#ffffff` із тонким градієнтом світлої секції `#ffffff → #f5f7fa`, радіус рамки 24px, внутрішній відступ 48px, пухнаста висота `rgba(0, 0, 0, 0.06) 0 5px 9px 0`, заголовок SST 300 35px, абзац основного тексту 18px та один первинний CTA.»*

### Посібник з ітерацій
При уточненні існуючих екранів, створених із цією дизайн-системою:
1. **Перевірте жирність дисплею.** Кожен заголовок від 22px і вище має бути SST жирністю 300. Якщо ви бачите жирність 500 або 700 у хіро-масштабі, ви втратили голос PlayStation.
2. **Перевірте hover-обробку.** Кожна первинна кнопка повинна масштабуватися на 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 є обов'язковим.