workbuddy_skills/open-design/design-systems/playstation/DESIGN-uk.md

Дизайн-система натхненна 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 є обов'язковим.