admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
368 lines
47 KiB
Markdown
368 lines
47 KiB
Markdown
# 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 не подлежит обсуждению.
|