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.

Иерархия

Принципы

• Вес 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. Глубина и возвышение

Философия глубины 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. Адаптивное поведение

Брейкпоинты

Сканирование 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 не подлежит обсуждению.