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

# Design System Inspired by Nike

> Category: Електронна комерція та роздрібна торгівля
> Спортивний роздріб. Монохромний інтерфейс, масивний uppercase-шрифт, фотографії на весь екран.

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

Nike.com — це кінетичний собор роздрібної торгівлі: сайт, що транслює вибухову енергію спорту в цифровий досвід покупок. Дизайн будується на принципі радикальної простоти: все зведено до чорного, білого та сірого, щоб спортивна фотографія та кольори продукту панували без жодної конкуренції. Результат нагадує не стільки вебсайт, скільки спортивне видання, оформлене з точністю розкішного журналу. Кожен піксель або продає товар, або веде до нього.

«Podium CDS» (внутрішня Core Design System Nike) встановлює агресивно монохроматичну основу. Інтерфейс розчиняється в тексті кольору `#111111` та білих поверхнях, дозволяючи героїчній фотографії — потіючим атлетам, кросівкам у повітрі, енергії стадіону — нести весь емоційний заряд. Коли колір з'являється в інтерфейсі, він майже виключно функціональний: червоний для помилок, синій для посилань, зелений для успіху. Сам продукт — це і є колір. Така стриманість створює візуальний парадокс: найколоритніші сторінки в інтернеті виглядають найбільш мінімалістичними, бо вся яскравість виходить із товару, а не з інтерфейсу.

Типографічна система — друга половина візуальної ідентичності Nike. Масивні uppercase-заголовки на Nike Futura ND — власному конденсованому варіанті Futura з неймовірно щільним міжрядковим інтервалом (0.90) — прорізають героїчні зображення, наче типографічна ударна хвиля. Нижче робоча сім'я Helvetica Now обробляє все — від навігації до описів продуктів — зі швейцарською точністю. Цей поділ між виразним дисплейним шрифтом і функціональним текстовим відображає дуальність бренду Nike: натхнення зустрічає виконання.

**Key Characteristics:**
- Монохроматичний інтерфейс (чорний/білий/сірий), де єдиним джерелом кольору слугує фотографія продуктів
- Масивна uppercase-дисплейна типографіка (96px, line-height 0.90), що пробиває героїчні зображення
- Фотографії на весь екран без border radius — зображення заповнюють кожен доступний край
- Кнопки у формі «пігулки» (30px radius) як основний інтерактивний елемент
- Сітка відступів 8px з атлетичною дисципліною — кожен розмір прив'язаний до системи
- Архітектура шопінгу, побудована на категоріях, з великими навігаційними картками-зображеннями
- Модель глибини без тіней і з мінімумом рамок — диференціація поверхонь лише через відтінки сірого

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

### Primary

- **Nike Black** (`#111111`): Основа — основний текст, фони кнопок, текст навігації, оверлеї на героїчних зображеннях. Навмисно не чистий чорний (#000000), що створює трохи м'якший досвід читання
- **Nike White** (`#FFFFFF`): Основний фон сторінки, текст кнопок на темному фоні, поверхні карток, фон навігаційної панелі

### Surface & Background

- **Snow** (`#FAFAFA`): Найсвітліша поверхня, майже біла з тонкою диференціацією (--podium-cds-color-grey-50)
- **Light Gray** (`#F5F5F5`): Вторинний фон, заповнення поля пошуку, плейсхолдер зображень, скелетон завантаження (--podium-cds-color-grey-100)
- **Hover Gray** (`#E5E5E5`): Фон стану hover, заповнення відключеної кнопки (--podium-cds-color-grey-200)
- **Dark Surface** (`#28282A`): Основний фон у темних/інвертованих секціях (--podium-cds-color-grey-800)
- **Deep Charcoal** (`#1F1F21`): Інвертований основний фон, найтемніша поверхня, що не є чорною (--podium-cds-color-grey-900)
- **Dark Hover** (`#39393B`): Стан hover на темних фонах (--podium-cds-color-grey-700)

### Neutrals & Text

- **Primary Text** (`#111111`): Основний текст, заголовки, посилання навігації (--podium-cds-color-text-primary)
- **Secondary Text** (`#707072`): Описовий текст, метадані, мітки часу, підписи цін (--podium-cds-color-text-secondary)
- **Disabled Text** (`#9E9EA0`): Неактивні елементи, недоступні опції (--podium-cds-color-text-disabled)
- **Disabled Inverse** (`#4B4B4D`): Відключений текст на темних фонах (--podium-cds-color-text-disabled-inverse)
- **Border Primary** (`#707072`): Стандартний колір рамки, що збігається з вторинним текстом
- **Border Secondary** (`#CACACB`): Тонкі рамки, рамки полів введення, лінії розділювачів (--podium-cds-color-grey-300)
- **Border Disabled** (`#CACACB`): Неактивний стан рамки
- **Border Active** (`#111111`): Активна/сфокусована рамка, що збігається з основним текстом

### Semantic & Accent

- **Nike Red** (`#D30005`): Критичні помилки, значки розпродажу, термінові сповіщення (--podium-cds-color-red-600)
- **Bright Red** (`#EE0005`): Red-500, трохи яскравіший червоний для акцентів
- **Nike Orange Badge** (`#D33918`): Текст значків, рекламні виноски (--podium-cds-color-text-badge)
- **Orange Flash** (`#FF5000`): Виразний помаранчевий акцент (--podium-cds-color-orange-400)
- **Success Green** (`#007D48`): Підтвердження, наявність, позитивні стани (--podium-cds-color-green-600)
- **Success Inverse** (`#1EAA52`): Успіх на темних фонах (--podium-cds-color-green-500)
- **Link Blue** (`#1151FF`): Текстові посилання, інформаційні виділення (--podium-cds-color-blue-500)
- **Info Inverse** (`#1190FF`): Посилання на темних фонах (--podium-cds-color-blue-400)
- **Warning Yellow** (`#FEDF35`): Фони попереджень, банери для привернення уваги (--podium-cds-color-yellow-200)
- **Focus Ring** (`rgba(39, 93, 197, 1)`): Кільце фокусу для навігації з клавіатури

### Розширений кольоровий спектр (Podium CDS)

Кожна кольорова шкала йде від 50 до 900 для виразного використання в кампаніях і на сторінках продуктів:

- **Red**: `#FFE5E5` → `#EE0005` → `#530300`
- **Orange**: `#FFE2D6` → `#FF5000` → `#3E1009`
- **Yellow**: `#FEF087` → `#FCA600` → `#99470A`
- **Green**: `#DFFFB9` → `#1EAA52` → `#003C2A`
- **Teal**: `#D4FFFB` → `#008E98` → `#043441`
- **Blue**: `#D6EEFF` → `#1151FF` → `#020664`
- **Purple**: `#E4E1FC` → `#6E0FF6` → `#1C0060`
- **Pink**: `#FFE1F3` → `#ED1AA0` → `#4C012D`

### Система градієнтів

Nike уникає градієнтів в інтерфейсі. Коли градієнти з'являються, вони фотографічні — застосовуються до фонів героїчних зображень продуктів (наприклад, червоний кросівок на градієнті від червоного до глибшого червоного). Сама дизайн-система використовує лише суцільні кольори.

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

### Font Family

**Display:** Nike Futura ND (власний конденсований варіант Futura, ексклюзивний для Nike)
- Fallbacks: Helvetica Now Text Medium, Helvetica, Arial
- Використовується виключно для великих uppercase-дисплейних заголовків
- Характерно щільний line-height (0.90) та uppercase-трансформація

**Heading:** Helvetica Now Display Medium
- Fallbacks: Helvetica, Arial
- Використовується для заголовків секцій і назв продуктів розміром 24–32px

**Body Medium:** Helvetica Now Text Medium (weight 500)
- Fallbacks: Helvetica, Arial
- Використовується для посилань, кнопок, підписів, виділеного основного тексту

**Body:** Helvetica Now Text (weight 400)
- Fallbacks: Helvetica, Arial
- Використовується для стандартного основного тексту, описів, метаданих

**Arabic:** Neue Frutiger Arabic — локальна альтернатива

### Ієрархія

| Роль | Розмір | Weight | Line Height | Letter Spacing | Примітки |
|------|--------|--------|-------------|----------------|----------|
| Display | 96px | 500 | 0.90 | — | Nike Futura ND, uppercase, героїчні заголовки |
| Heading 1 | 32px | 500 | 1.20 | — | Helvetica Now Display Medium, заголовки секцій |
| Heading 2 | 24px | 500 | 1.20 | — | Helvetica Now Display Medium, підсекції |
| Heading 3 | 16px | 500 | 1.50 | — | Helvetica Now Text Medium, заголовки карток |
| Body | 16px | 400 | 1.75 | — | Helvetica Now Text, описи продуктів |
| Body Medium | 16px | 500 | 1.75 | — | Helvetica Now Text Medium, виділений текст |
| Link | 16px | 500 | 1.75 | — | Helvetica Now Text Medium, навігаційні посилання |
| Link Small | 14px | 500 | 1.86 | — | Helvetica Now Text Medium, посилання у футері/утилітарні |
| Button | 16px | 500 | 1.50 | — | Helvetica Now Text Medium, текст CTA |
| Button Small | 14px | 500 | 1.50 | — | Helvetica Now Text Medium, вторинні кнопки |
| Caption | 14px | 500 | 1.50 | — | Helvetica Now Text Medium, підписи цін |
| Small | 12px | 500 | 1.50 | — | Helvetica Now Text Medium, мітки часу |
| Tiny | 12px | 400 | 1.50 | — | Helvetica Now Text, юридичний текст |

### Принципи

Типографіка Nike — це дослідження напруги. Дисплейний рівень — Nike Futura ND розміром 96px з вражаючим line-height 0.90 — спроектований так, щоб нагадувати стадіонне табло: масивний, конденсований, uppercase, неможливо ігнорувати. Він перетворює заголовки на бойові клики. Нижче Helvetica Now слугує клінічним контрапунктом: швейцарська точність читабельності зі щедрим line-height 1.75 для зручного перегляду продуктів. Weight 500 (Medium) домінує у всьому основному тексті, надаючи прозі Nike легкої наполегливості без важкості bold — кожне речення читається як впевнена рекомендація, а не крик.

## 4. Стилізація компонентів

### Кнопки

**Primary**
- Background: Nike Black (`#111111`)
- Текст: White (`#FFFFFF`), 16px/500, Helvetica Now Text Medium
- Border: none
- Border radius: повністю округла пігулка (30px)
- Padding: ~12px 24px
- Hover: фон переходить до Grey-500 (`#707072`), колір тексту при hover
- Active: ефект ripple з scale(0) та opacity 0.5
- Focus: 2px box-shadow ring у `rgba(39, 93, 197, 1)`
- Transition: background 200ms ease

**Primary on Dark**
- Background: White (`#FFFFFF`)
- Текст: Black (`#111111`)
- Hover: фон переходить до Grey-300 (`#CACACB`)

**Secondary (Outlined)**
- Background: transparent
- Текст: Nike Black (`#111111`)
- Border: 1.5px solid `#CACACB` (grey-300)
- Border radius: 30px
- Hover: рамка темнішає до `#707072`, фон до grey-200

**Disabled**
- Background: Grey-200 (`#E5E5E5`)
- Текст: Grey-400 (`#9E9EA0`)
- Cursor: not-allowed

**Icon Button**
- Background: Grey-100 (`#F5F5F5`)
- Форма: radius 30px (або 50% для кругової)
- Padding: 6px
- Hover: фон Grey-500

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

- Background: White (`#FFFFFF`) — у більшості випадків без видимої межі картки
- Border radius: 0px для карток із зображеннями продуктів (зображення від краю до краю), 20px для інтерактивних контейнерів
- Shadow: none — Nike не використовує жодних тіней під картками
- Hover: без ефекту підйому на картках продуктів; підкреслення на текстових посиланнях у картках
- Картки продуктів: зображення зверху (без radius), текстові метадані знизу з проміжком 12px
- Картки категорій: фотографія на весь екран із текстовим оверлеєм на темному градієнті
- Transition: opacity 200ms ease для заміни зображення при hover

### Поля введення та форми

- Background: Grey-100 (`#F5F5F5`)
- Border: 1px solid `#CACACB` при відображенні, або без рамки у пошуку
- Border radius: 24px (поля пошуку), 8px (поля форм)
- Font: Helvetica Now Text, 16px
- Focus: рамка переходить до `#111111` (border-active), 2px кільце фокусу у `rgba(39, 93, 197, 1)`
- Error: рамка `#D30005` (критичний)
- Placeholder: Grey-500 (`#707072`)
- Transition: border-color 200ms ease

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

- Background: White (`#FFFFFF`), sticky
- Висота: ~60px на десктопі
- Ліворуч: логотип Nike Swoosh (SVG 24x24px)
- По центру: посилання категорій (New & Featured, Men, Women, Kids, Sale) у 16px/500 Helvetica Now Text Medium
- Праворуч: пошук (поле введення з радіусом 24px), іконки вибраного та кошика
- Hover: колір тексту переходить до Grey-500 (`#707072`)
- Мобільна версія: hamburger-меню, оверлей на весь екран
- Верхній банер: панель рекламного повідомлення з темним фоном (#111111) і білим текстом

### Обробка зображень

- Героїчні зображення: на весь екран, без border radius, від краю до краю
- Сітка продуктів: квадратне співвідношення (1:1) або 4:3, без border radius
- Картки категорій: 16:9 або 4:3, на весь екран із текстовим оверлеєм
- Плейсхолдер зображення: суцільний фон Grey-100 (`#F5F5F5`)
- Lazy loading: нативний loading="lazy", скелетон використовує фон #F5F5F5
- Hover продукту: заміна на вторинне зображення (вид спереду → вид збоку)

### Рекламні банери

- Темний (`#111111`) фон на всю ширину з білим текстом
- Мінімальний padding (8-12px по вертикалі)
- Текст по центру, 12px/500 Helvetica Now Text Medium
- Використовуються для просування доставки, переваг учасників, анонсів розпродажів

## 5. Принципи компонування

### Система відступів

Базова одиниця: 4px (основна сітка кратна 8px)

| Token | Значення | Використання |
|-------|----------|--------------|
| space-1 | 4px | Щільні проміжки для іконок, inline-відступи |
| space-2 | 8px | Базова одиниця, проміжки між іконкою та кнопкою |
| space-3 | 12px | Внутрішній padding картки, щільні відступи |
| space-4 | 16px | Стандартний padding, відступи навігації |
| space-5 | 20px | Проміжки між картками продуктів |
| space-6 | 24px | Внутрішній padding секцій, проміжки сітки |
| space-7 | 32px | Розділювачі секцій |
| space-8 | 48px | Великий padding секцій |
| space-9 | 64px | Padding героїчних секцій |
| space-10 | 80px | Великі відступи між секціями |

### Сітка та контейнер

- Максимальна ширина контейнера: 1920px
- Стандартна ширина контейнера: ~1440px з горизонтальним padding
- Сітка продуктів: 3 колонки на десктопі, 2 колонки на планшеті, 1 колонка на мобільному
- Сітка категорій: 3 колонки із зображеннями на весь екран
- Проміжок сітки: 4-12px між картками продуктів (навмисно щільно)
- Горизонтальний padding: 48px на десктопі, 24px на планшеті, 16px на мобільному

### Філософія whitespace

Стратегія використання whitespace у Nike навмисно агресивна — не в розкішному, «дихаючому» стилі fashion-бренду, а у стислому, високощільному вигляді, що заповнює кожен піксель або контентом, або навмисною відсутністю. Сітки продуктів використовують мінімальні проміжки (4-12px), щоб створити відчуття достатку та вибору. Розривники між секціями щедрі (48-80px), щоб розділяти різні контексти шопінгу. Загальний ефект — магазин, що відчувається наповненим товаром, але залишається зручним для навігації, наче добре організований спортивний супермаркет.

### Шкала border radius

| Значення | Контекст |
|----------|---------|
| 0px | Зображення продуктів, героїчна фотографія (гострі краї) |
| 8px | Поля форм (не пошукові) |
| 18px | Дрібні інтерактивні елементи |
| 20px | Контейнери, картки з UI-контентом |
| 24px | Поля пошуку, середні пігулки |
| 30px | Кнопки, теги, фільтри (повна пігулка) |
| 50% | Кругові іконки-кнопки, плейсхолдери аватарів |

## 6. Глибина та рівні

| Рівень | Обробка | Використання |
|--------|---------|--------------|
| Flat | Без тіні, без рамки | Стан за замовчуванням для всього |
| Divider | `0px -1px 0px 0px #E5E5E5 inset` | Тонка вставна лінія між секціями |
| Focus | `0 0 0 2px rgba(39, 93, 197, 1)` | Кільце фокусу клавіатури |
| Overlay | Темний скрім поверх фотографії | Читабельність тексту на зображенні |

Філософія глибини Nike — радикально плоска. Тіней під картками немає, ефектів підйому при hover немає, плаваючих елементів немає. Глибина передається виключно через колір: темні секції відступають, світлі виходять вперед, зміни відтінків сірого сигналізують про зміни стану. Ця плоскість підкріплює атлетичний, безкомпромісний характер бренду: жодних візуальних прикрас, лише пряме спілкування. Єдина «тінь» у всій системі — це 1px вставний розділювач та обов'язкове з точки зору доступності кільце фокусу.

### Декоративна глибина

- **Оверлеї на героїчній фотографії**: Темні градієнтні скріми поверх фотографій на весь екран для читабельності тексту
- **Градієнти фонів продуктів**: Кольорові фони за героїчними знімками продуктів (наприклад, червоний кросівок на червоному градієнті)
- **Банерні смуги**: Суцільні темні (#111111) рекламні смуги у верхній частині сторінки

## 7. Що робити і чого уникати

### Що робити

- Використовувати Nike Black (#111111) для всього основного тексту — ніколи не чистий #000000
- Зберігати форму кнопок у вигляді пігулки (30px radius) із обмеженням до варіантів primary/secondary
- Використовувати фотографію від краю до краю для героїчних секцій — без border radius на зображеннях
- Дозволяти фотографії продуктів бути єдиним джерелом кольорової яскравості; зберігати UI монохроматичним
- Використовувати uppercase Nike Futura ND ЛИШЕ для дисплейних заголовків (від 96px)
- Зберігати мінімальні проміжки в сітці продуктів (4-12px) для щільного відчуття достатку
- Використовувати Grey-100 (#F5F5F5) для всіх фонів полів введення та плейсхолдерів
- Залишати колір виключно для семантичних значень (червоний=помилка, зелений=успіх, синій=посилання)
- Використовувати weight 500 (Medium) для всіх інтерактивних текстових елементів

### Чого уникати

- Не додавати тіні до карток — модель глибини Nike повністю плоска
- Не використовувати border radius на зображеннях продуктів — заокруглені кути лише для UI-елементів
- Не вводити фірмові кольори за межами шкали сірого для UI-елементів
- Не використовувати Nike Futura ND нижче 24px — це виключно дисплейний шрифт
- Не додавати ефекти підйому при hover — картки Nike не анімуються при наведенні
- Не використовувати regular weight (400) для кнопок або посилань — завжди weight 500
- Не розміщувати кольорові фони за UI-елементами — колір зарезервований для контексту продуктів
- Не використовувати більше двох рівнів текстової ієрархії на одній картці (заголовок + основний текст)
- Не додавати декоративні розділювачі — 1px вставна лінія є єдиним шаблоном розділювача
- Не пом'якшувати контраст — дизайн Nike навмисно доводить чорне на білому до максимуму

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

### Breakpoints

| Назва | Ширина | Ключові зміни |
|-------|--------|---------------|
| Mobile | <640px | Одна колонка, hamburger-навігація, дисплейний текст зменшується, щільний padding 16px |
| Small Tablet | 640-768px | Починається сітка з 2 колонок, навігація залишається згорнутою |
| Tablet | 768-960px | Сітки з 2 колонок, картки категорій масштабуються, горизонтальний padding 24px |
| Small Desktop | 960-1024px | Навігація розгортається в повну горизонтальну, сітка продуктів на 3 колонки |
| Desktop | 1024-1440px | Повне компонування, розгорнута навігація, сітки на 3 колонки, padding 48px |
| Large Desktop | >1440px | Контейнер з max-width по центру, збільшені відступи, героїчні зображення на весь екран |

### Touch targets

- Мінімальна область дотику: 44x44px (WCAG AAA)
- Іконки мобільної навігації: область дотику 48x48px
- Картки продуктів: вся поверхня доступна для дотику
- Пігулки фільтрів: мінімальна висота 36px із padding 12px

### Стратегія колапсу

- **Навігація**: Повні посилання категорій → hamburger-меню нижче 960px; іконки пошуку, вибраного та кошика залишаються видимими
- **Сітки продуктів**: 3 кол. → 2 кол. при 960px → 1 кол. при 640px
- **Героїчні секції**: Дисплейний текст масштабується від 96px → 64px → 48px; героїчні зображення залишаються на весь екран на всіх розмірах
- **Картки категорій**: 3 кол. → 2 кол. → 1 кол. зі збереженням зображень на весь екран
- **Padding секцій**: 80px → 48px → 32px → 24px у міру звуження viewport
- **Рекламний банер**: текст переноситься або усікається, темний фон зберігається

### Поведінка зображень

- Responsive images через Nike CDN (`c.static-nike.com`) з параметрами ширини
- Зображення продуктів: srcset з кількома роздільними здатностями (w_320, w_640, w_960, w_1920)
- Героїчні зображення: на весь екран на всіх breakpoints, співвідношення сторін змінюється (16:9 десктоп → 4:3 мобільний)
- Lazy loading: нативний loading="lazy", плейсхолдер grey-100 під час завантаження
- Art direction: кадрування героїчних зображень змінюється між десктопною та мобільною компоновками

## 9. Посібник з промптів для агента

### Швидкий довідник кольорів

- Основний CTA: Nike Black (`#111111`)
- Фон: White (`#FFFFFF`)
- Вторинна поверхня: Light Gray (`#F5F5F5`)
- Текст заголовків: Nike Black (`#111111`)
- Основний текст / hover: Secondary Text (`#707072`)
- Рамка: Border Secondary (`#CACACB`)
- Помилка: Nike Red (`#D30005`)
- Посилання: Link Blue (`#1151FF`)

### Приклади промптів для компонентів

- "Створи героїчну секцію продукту з фотографією на весь екран від краю до краю, без border radius, темним градієнтним оверлеєм для тексту, масивним uppercase заголовком 96px/500 у стилі Nike Futura з line-height 0.90 та кнопкою-пігулкою Nike Black (#111111) (30px radius)"
- "Спроектуй сітку карток продуктів на 3 колонки з квадратними зображеннями (без border radius), проміжком 4px між картками, назвою продукту в 16px/500 Nike Black (#111111), ціною в 14px/500 та вторинним текстом у Grey-500 (#707072)"
- "Побудуй sticky білу навігаційну панель з логотипом ліворуч, посиланнями категорій по центру у 16px/500 (#111111) з кольором hover #707072 та пошуком праворуч (radius 24px, фон #F5F5F5), іконками вибраного та кошика"
- "Створи рекламну банерну смугу з фоном #111111, білим центрованим текстом 12px/500 та вертикальним padding 8px — на всю ширину, без border radius"
- "Спроектуй вторинну outlined-кнопку з прозорим фоном, рамкою 1.5px #CACACB, pill-радіусом 30px, текстом 16px/500 #111111, рамка темнішає до #707072 при hover"

### Посібник з ітерацій

Під час доопрацювання існуючих екранів, згенерованих із цією дизайн-системою:
1. Зосереджуйся на ОДНОМУ компоненті за раз
2. Посилайся на конкретні назви кольорів і hex-коди з цього документа
3. Пам'ятай: фотографія продукту — це і є колір; UI залишається монохроматичним
4. Використовуй шкалу сірого для змін стану: #F5F5F5 → #E5E5E5 → #CACACB → #707072
5. Якщо щось в інтерфейсі видається занадто барвистим — швидше за все, так і є: Nike зберігає UI у відтінках сірого
6. Дисплейний шрифт (Nike Futura) ЗАВЖДИ має бути uppercase і ніколи не менше 24px
7. Основний шрифт (Helvetica Now) для інтерактивних елементів майже завжди має бути weight 500