# Design System Inspired by PlayStation

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

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

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

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

Единственное место, где сдержанность нарушается, — **взаимодействие**. Каждая основная кнопка выполняет одно и то же движение при наведении: заливка сменяется электрическим cyan `#1eaedb`, появляется белая рамка 2px, за ней расцветает внешнее кольцо PlayStation-blue 2px, и вся кнопка **масштабируется на 1.2×**. Сочетание цветового всплеска, рамки, кольца и подъёма — фирменный приём Sony, уникальный среди крупных брендов: миниатюрная анимация «включения», которую сайт повторяет сотни раз на одной странице.

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

## 2. Цветовая палитра и роли

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

### Вторичный и акцентный
- **PlayStation Cyan** (`#1eaedb`): Цвет взаимодействия. Применяется ТОЛЬКО к состояниям hover, focus и active кнопок и ссылок. Никогда не используется как фоновый цвет по умолчанию или цвет текста в состоянии покоя. При наведении сочетайте с рамкой `#ffffff` 2px и внешним кольцом `#0070cc` 2px для полного фирменного эффекта.
- **Link Hover Blue** (`#1883fd`): Более яркий вариант для hover-состояний встроенных текстовых ссылок. Отличается от 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)`): Полупрозрачный фон для прикреплённых фильтровых панелей — единственный момент «стекломорфизма» на сайте.

### Нейтральные цвета и текст
- **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` — короткая вертикальная заливка, придающая панелям героя лёгкое виньетирование без введения каких-либо цветовых сдвигов.

Оба градиента используются **только как фоны секций**, никогда внутри компонентов. Нет градиентных кнопок, нет градиентного текста, нет светящихся ореолов. Бренд — синий, не синий-в-пурпурный, не синий-в-cyan.

## 3. Правила типографики

### Семейство шрифтов
- **SST** / **Playstation SST** (Sony, проприетарный) — резервный: `Arial`, `Helvetica`. Фирменная глобальная гарнитура Sony, разработанная Тоши Омагари и Акирой Кобаяши. Охватывает веса 300 / 500 / 600 / 700 по всей главной странице. Вес **300 при 22–54px** — типографская подпись PlayStation.
- **SST (condensed / alternate)** — резервный: `helvetica`, `arial`. Сжатый вариант, используемый в ряде UI-модулей, где важна ширина.
- **Arial** — резервный вариант для редкого варианта кнопки, отрисованного системным sans.

### Иерархия

| Роль | Шрифт | Размер | Вес | Межстрочный интервал | Межбуквенный интервал | Примечания |
|---|---|---|---|---|---|---|
| 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 | — | Заголовки feature-панелей |
| 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 редко использует ЗАГЛАВНЫЕ метки. Маркеры и теги остаются в заглавном или строчном регистре — ещё один ход «тихого авторитета».
- **Нигде нет засечек.** Вся система — sans. Нет голоса печатного издания в противовес.

## 4. Оформление компонентов

### Кнопки

**Основная — PlayStation Blue Pill**
- Фон: `#0070cc` (PlayStation Blue)
- Текст: `#ffffff`, SST 18px / 500 / трекинг 0.4px
- Рамка: отсутствует в состоянии покоя
- Радиус скругления: `999px` — полная таблетка
- Отступ: ~`12px 24px` (варьируется в зависимости от размерного класса)
- Обводка: `rgb(255, 255, 255) none 0px` в состоянии покоя
- **Hover (фирменный приём)**:
  - Фон меняется на `#1eaedb` (PlayStation Cyan)
  - Текст остаётся `#ffffff`
  - Появляется рамка `#ffffff` 2px
  - Расцветает внешнее кольцо-тень `#0070cc` 2px (`0 0 0 2px #0070cc`)
  - `transform: scale(1.2)` — кнопка реально увеличивается на 20%
- Active: `opacity: 0.6` — быстрое затемнение для сигнала нажатия
- Focus: аналогично hover, но кольцо становится фокусной тенью `rgb(0, 114, 206) 0px 0px 0px 2px`
- Переход: ~180ms ease для фона, трансформации и тени

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

**Commerce Orange**
- Фон: `#d53b00` (Commerce Orange)
- Текст: `#ffffff`, SST 18px / 700 / трекинг 0.45px
- Радиус скругления: `999px` — таблетка
- Используется только в CTA PS Store / Buy / Subscribe Plus
- Active: фон темнеет до `#aa2f00`
- Hover: следует правилу cyan-инверсии как и все остальные кнопки (НЕ оранжевый hover)

**Transparent Ghost**
- Фон: прозрачный
- Текст: `#1f1f1f` (Deep Charcoal)
- Рамка: `1px solid #dedede`
- Отступ: `0 10px` (плотный, оптимизирован для навигации)
- Hover: заливка cyan, белый текст, белая рамка 2px, scale(1.2)
- Active: текст меняется на `#0072ce`, opacity 0.6

**Icon Circle**
- Фон: `rgba(0, 0, 0, 0.2)` на фотографии; `#ffffff` на светлых поверхностях
- Радиус скругления: `100%` — идеальный круг
- Используется для стрелок предыдущей/следующей карусели и кнопок «поделиться»
- Hover: светлеет до `var(--color-role-backgrounds-primary-link-hover)` (приблизительно `#e5e5e5` на светлом)

**Mini CTA (в карточке)**
- SST 14px / 700 / трекинг 0.324px
- Отступ ~8px 16px
- Радиус: `999px`
- Используется внутри карточек игр для мини-CTA «Купить сейчас» / «Добавить в корзину»

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

**Hero Card (главный игровой элемент)**
- Фон: фотография/рендер — обычно на чёрной основе
- Радиус скругления: `24px` или `19px` для feature-карточек
- Внутренний отступ: 32–48px
- Тень: `rgba(0, 0, 0, 0.8) 0px 5px 9px 0px` — эффектная тень, используемая только когда карточка перекрывает фотографию героя
- Hover: тонкая трансформация масштаба, на основном CTA появляется cyan-обводка

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

**Content Panel (White, белая контентная панель)**
- Фон: `#ffffff` или светлый градиент секции `#ffffff → #f5f7fa`
- Рамка: как правило, отсутствует; отделяется от соседей отступами и тонкими тенями
- Радиус: `12px`–`24px` в зависимости от иерархии панели
- Тень: `rgba(0, 0, 0, 0.06) 0px 5px 9px 0px` — самая лёгкая в системе

**Тёмная карточка на тёмном фоне**
- Фон: `rgba(0, 0, 0, 0.2)` поверх фотографии
- Радиус скругления: `6px` (компактный) или `24px` (feature)
- Используется для вставок «пресс-кит» или «блок статистики» поверх видео героя

### Поля ввода и формы
- **По умолчанию**: фон `#ffffff`, рамка `1px solid #cccccc`, радиус `3px` (плотнее, чем остальная система — поля ввода — единственное место, где PlayStation становится по-настоящему компактным), текст SST 16px в `#1f1f1f`, заполнитель `rgba(0, 0, 0, 0.6)`.
- **Focus**: кольцо фокуса `#0070cc` 2px через `box-shadow: 0 0 0 2px #0070cc`. Цвет рамки не меняется — работу выполняет кольцо.
- **Ошибка**: рамка и текст меняются на `#c81b3a` (Warning Red), встроенный текст ошибки ниже в том же красном.
- **Переход**: ~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 для lifestyle-фотографии.
- **Углы**: скруглены до `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` для героя шапки.

### Game Store Pill (отличительный элемент)
- Фон: `#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 внутри. Feature-карточки героя могут расширяться до 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 колонок; featured-тайлы располагаются в конфигурациях 6+3+3 или 4+4+4.
- **Внешние отступы**: 16px мобильные → 48px планшет → 64–96px десктоп.
- **Гаттеры**: 16–24px между колонками, плотнее (8–12px) внутри кластеров тайлов.

### Философия пространства
PlayStation обращается с пустым пространством как люксовый бренд с освещением магазина — как с премиальным сигналом. Вертикального «дыхания» между модулями заметно больше, чем на любом другом крупном ритейл-сайте, а белые редакционные панели часто содержат лишь один заголовок + одно изображение + один CTA с отступами героя. Эффект — «темп галереи», где каждый продукт получает свою комнату, а не конкурирует в сетке миниатюр.

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

Одиннадцать дискретных значений радиуса — одна из самых богатых систем радиуса среди всех сайтов в этом каталоге. Диапазон существует потому, что PlayStation намеренно использует разные радиусы для разных *иерархий*: 3px для утилит, 12px для медиа, 24px для feature, 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` (кольцо фокуса) | Состояние фокуса основной кнопки |
| 6 | `0 0 0 2px #000000` (кольцо hover) | Кольцо hover вторичной кнопки |
| 7 | Градиент секции `#121314 → #000000` | Атмосферная глубина на тёмных панелях героя |

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

### Декоративная глубина
- **Градиенты секций** (тёмный и светлый, оба описаны выше) — используются только как фоны секций
- **Кольца focus/hover** шириной 2px, всегда синие или cyan в зависимости от состояния
- **Никаких свечений, размытий или атмосферных эффектов** помимо двух градиентов секций
- **Никаких градиентных кнопок или текста** — визуальная система — это сплошные цветовые блоки везде, кроме переходов между секциями

## 7. Что делать и чего не делать

### Делать
- **Делайте** использовать PlayStation Blue (`#0070cc`) как основную заливку CTA и якорь футера. Это якорный цвет бренда.
- **Делайте** использовать SST вес 300 для каждого дисплейного заголовка 22px и выше. Заголовок с лёгким весом — это голос бренда.
- **Делайте** применять полный фирменный hover к каждой основной кнопке: заливка cyan + белая рамка 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 sans.
- **Не допускайте** появления cyan `#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 max, контент героя масштабируется под расстояние просмотра с телевизора |
| 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 сохраняется при каждом размере.
- **Фотография героя**: смена art-direction — десктоп использует широкие кадры 16:9, мобильный — кадры 4:3 или 1:1 с продуктом по центру.

### Поведение изображений
- Адаптивный растр (`srcset` + `<picture>` с art-direction), соотношения сторон сохраняются на каждом брейкпоинте.
- Готовность к 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. При наведении фон переходит в PlayStation Cyan `#1eaedb`, появляется рамка `#ffffff` 2px, через box-shadow расцветает внешнее кольцо `#0070cc` 2px, и вся кнопка масштабируется на 1.2× — всё в переходе ease 180ms.»*
2. *«Спроектируй панель героя на холсте Console Black `#000000` с заголовком SST вес 300 54px в `#ffffff` с межбуквенным интервалом -0.1px и межстрочным 1.25. Помести ниже один основной CTA со стандартным hover-эффектом PlayStation. Нигде не используй заглавные буквы.»*
3. *«Создай тайл обложки игры: изображение соотношением 3:4 с радиусом 12px, сверхлёгкая тень `rgba(0, 0, 0, 0.08) 0 5px 9px 0`, ниже название SST 700 14px, тег платформы SST 500 12px и мини-CTA основной цвет PlayStation Blue SST 14px / 700 / трекинг 0.324px.»*
4. *«Создай коммерческую кнопку-таблетку для покупки в PlayStation Store: заливка Commerce Orange `#d53b00`, текст `#ffffff` SST 18px / 700 / трекинг 0.45px, радиус 999px, отступы 12px × 28px. Активное состояние темнеет до `#aa2f00`. Hover следует стандартной cyan-инверсии с масштабированием 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× при наведении с комбинацией заливки cyan + белая рамка + синее кольцо. Пропустите любой из этих четырёх элементов — и фирменная подпись взаимодействия разрушена.
3. **Проверьте углы.** Каждый контейнер и кнопка должны иметь 2, 3, 6, 12, 13, 19, 20, 24, 36, 48 или 999px / 100%. Прямые углы разрушают голос.
4. **Проверьте цветовое разнообразие.** В chrome должны присутствовать только 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 не подлежит обсуждению.