# Дизайн-система, вдохновлённая Nike

> Category: E-Commerce и ритейл
> Спортивный ритейл. Монохромный интерфейс, массивная строчная типографика, фотографии в полный экран.

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

Nike.com — это кинетический торговый собор: сайт, который переносит взрывную энергию спорта в цифровой опыт покупок. Дизайн основан на принципе радикальной простоты: всё сводится к чёрному, белому и серому, чтобы спортивная фотография и цвет продукта главенствовали без конкурентов. Результат — это скорее не сайт, а спортивное издание, свёрстанное с точностью журнала класса люкс. Каждый пиксель либо продаёт товар, либо ведёт к нему.

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

Типографическая система — вторая половина визуальной идентичности Nike. Массивные заголовки в верхнем регистре, набранные Nike Futura ND — кастомным конденсированным вариантом Futura с невозможно плотным межстрочным интервалом (0.90) — пробивают героические изображения как типографический удар. Ниже рабочая лошадка Helvetica Now обслуживает всё: от навигации до описаний продуктов — с точностью швейцарской школы. Это разделение между выразительным дисплейным шрифтом и функциональным основным отражает двойственность бренда Nike: вдохновение встречается с исполнением.

**Ключевые характеристики:**
- Монохроматический интерфейс (чёрный/белый/серый), в котором единственным источником цвета является продуктовая фотография
- Массивная дисплейная типографика в верхнем регистре (96px, межстрочный интервал 0.90), пробивающая героические изображения
- Фотографии в полный экран без скруглений — изображение заполняет каждый доступный край
- Кнопки-пилюли (радиус 30px) как основной интерактивный элемент
- Сетка с шагом 8px с атлетической дисциплиной — каждое значение кратно системе
- Торговая архитектура, организованная по категориям, с крупными навигационными карточками с изображениями
- Модель глубины без теней и минимальными рамками — различие поверхностей только через оттенки серого

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

### Основные

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

### Поверхности и фоны

- **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)

### Нейтральные цвета и текст

- **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`): Активная/сфокусированная рамка, совпадает с основным текстом

### Семантические и акцентные цвета

- **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. Правила типографики

### Семейство шрифтов

**Дисплейный:** Nike Futura ND (кастомный конденсированный вариант Futura, эксклюзивный для Nike)
- Запасные варианты: Helvetica Now Text Medium, Helvetica, Arial
- Используется исключительно для крупных дисплейных заголовков в верхнем регистре
- Характерный плотный межстрочный интервал (0.90) и трансформация в верхний регистр

**Заголовочный:** Helvetica Now Display Medium
- Запасные варианты: Helvetica, Arial
- Используется для заголовков разделов и названий продуктов размером 24–32px

**Body Medium:** Helvetica Now Text Medium (насыщенность 500)
- Запасные варианты: Helvetica, Arial
- Используется для ссылок, кнопок, подписей, выделенного основного текста

**Body:** Helvetica Now Text (насыщенность 400)
- Запасные варианты: Helvetica, Arial
- Используется для стандартного основного текста, описаний, метаданных

**Arabic:** Neue Frutiger Arabic — локаль-специфичная альтернатива

### Иерархия

| Роль | Размер | Насыщенность | Межстрочный интервал | Межбуквенный интервал | Примечания |
|------|--------|--------------|----------------------|-----------------------|------------|
| Display | 96px | 500 | 0.90 | — | Nike Futura ND, верхний регистр, героические заголовки |
| 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 с сокрушительным межстрочным интервалом 0.90 — создан так, чтобы выглядеть как табло на стадионе: массивное, конденсированное, в верхнем регистре, невозможно игнорировать. Оно превращает заголовки в боевые кличи. Ниже дисплейного уровня Helvetica Now обеспечивает клинический контрапункт: швейцарская точность читаемости с щедрым межстрочным интервалом 1.75 для комфортного просмотра продуктов. Насыщенность 500 (Medium) преобладает во всём основном тексте, придавая прозе Nike лёгкую уверенность без тяжести bold — каждое предложение читается как уверенная рекомендация, а не как призыв.

## 4. Стили компонентов

### Кнопки

**Основная**
- Фон: Nike Black (`#111111`)
- Текст: White (`#FFFFFF`), 16px/500, Helvetica Now Text Medium
- Рамка: отсутствует
- Скругление: полностью скруглённая пилюля (30px)
- Отступы: ~12px 24px
- Hover: фон меняется на Grey-500 (`#707072`), цвет текста при hover
- Active: эффект пульсации scale(0) с opacity 0.5
- Focus: кольцо box-shadow 2px в `rgba(39, 93, 197, 1)`
- Переход: background 200ms ease

**Основная на тёмном фоне**
- Фон: White (`#FFFFFF`)
- Текст: Black (`#111111`)
- Hover: фон меняется на Grey-300 (`#CACACB`)

**Вторичная (контурная)**
- Фон: прозрачный
- Текст: Nike Black (`#111111`)
- Рамка: 1.5px solid `#CACACB` (grey-300)
- Скругление: 30px
- Hover: рамка темнеет до `#707072`, фон до grey-200

**Отключённая**
- Фон: Grey-200 (`#E5E5E5`)
- Текст: Grey-400 (`#9E9EA0`)
- Курсор: not-allowed

**Иконочная кнопка**
- Фон: Grey-100 (`#F5F5F5`)
- Форма: радиус 30px (или 50% для круговой)
- Отступы: 6px
- Hover: фон Grey-500

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

- Фон: White (`#FFFFFF`) — в большинстве случаев видимой границы карточки нет
- Скругление: 0px для карточек с изображением продукта (изображение от края до края), 20px для интерактивных контейнеров
- Тень: отсутствует — Nike не использует тени для карточек
- Hover: для карточек продуктов нет эффекта подъёма; подчёркивание на текстовых ссылках внутри карточек
- Карточки продуктов: изображение сверху (без скругления), текстовые метаданные снизу с отступом 12px
- Карточки категорий: фотография в полный экран с текстом поверх тёмного градиента
- Переход: opacity 200ms ease для смены изображения при hover

### Поля ввода и формы

- Фон: Grey-100 (`#F5F5F5`)
- Рамка: 1px solid `#CACACB` при наличии, или без рамки для поиска
- Скругление: 24px (поля поиска), 8px (поля форм)
- Шрифт: Helvetica Now Text, 16px
- Focus: рамка меняется на `#111111` (border-active), кольцо фокуса 2px в `rgba(39, 93, 197, 1)`
- Ошибка: рамка `#D30005` (критическое состояние)
- Плейсхолдер: Grey-500 (`#707072`)
- Переход: border-color 200ms ease

### Навигация

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

### Обработка изображений

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

### Промо-баннеры

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

## 5. Принципы вёрстки

### Система отступов

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

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

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

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

### Философия пространства

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

### Шкала скруглений

| Значение | Контекст |
|----------|---------|
| 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), ограничиваясь основным и вторичным вариантами
- Использовать полноэкранную фотографию от края до края для героических секций — никаких скруглений на изображениях
- Позволять продуктовой фотографии быть единственным источником цветовой яркости; держать UI монохроматическим
- Использовать Nike Futura ND в верхнем регистре ТОЛЬКО для дисплейных заголовков (96px+)
- Сохранять плотные зазоры сетки продуктов (4-12px) для ощущения плотности и изобилия
- Использовать Grey-100 (#F5F5F5) для фонов всех полей ввода и плейсхолдеров
- Резервировать цвет исключительно для семантических значений (красный=ошибка, зелёный=успех, синий=ссылка)
- Использовать насыщенность 500 (Medium) для всех интерактивных текстовых элементов

### Не делать

- Не добавлять тени к карточкам — модель высоты у Nike полностью плоская
- Не использовать скругления на изображениях продуктов — скруглённые углы только у UI-элементов
- Не вводить цвета бренда помимо шкалы серого для UI-элементов
- Не использовать Nike Futura ND ниже 24px — это исключительно дисплейный шрифт
- Не добавлять эффекты подъёма при hover — карточки Nike не анимируются при наведении
- Не использовать обычную насыщенность (400) для кнопок или ссылок — всегда использовать 500
- Не размещать цветные фоны за UI-элементами — цвет зарезервирован для продуктовых контекстов
- Не использовать более двух уровней текстовой иерархии на карточке (заголовок + тело)
- Не добавлять декоративные разделители — вставная линия 1px является единственным паттерном разделителя
- Не смягчать контраст — дизайн Nike намеренно доводит чёрный-на-белом до максимума

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

### Контрольные точки

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

### Сенсорные цели

- Минимальная сенсорная цель: 44x44px (WCAG AAA)
- Иконки мобильной навигации: сенсорная область 48x48px
- Карточки продуктов: вся поверхность кликабельна
- Пилюли фильтров: минимальная высота 36px с отступом 12px

### Стратегия схлопывания

- **Навигация**: полные ссылки категорий → меню-гамбургер ниже 960px; иконки поиска, избранного, корзины остаются видимыми
- **Сетки продуктов**: 3 колонки → 2 при 960px → 1 при 640px
- **Героические секции**: дисплейный текст масштабируется от 96px → 64px → 48px; героические изображения остаются полноэкранными на всех размерах
- **Карточки категорий**: 3 колонки → 2 → 1 при сохранении изображений в полный экран
- **Отступы секций**: 80px → 48px → 32px → 24px по мере сужения viewport
- **Промо-баннер**: текст переносится или усекается, тёмный фон сохраняется

### Поведение изображений

- Адаптивные изображения через Nike CDN (`c.static-nike.com`) с параметрами ширины
- Изображения продуктов: srcset с несколькими разрешениями (w_320, w_640, w_960, w_1920)
- Героические изображения: полный экран на всех контрольных точках, соотношение сторон меняется (16:9 на десктопе → 4:3 на мобильном)
- Ленивая загрузка: нативный атрибут loading="lazy", плейсхолдер grey-100 во время загрузки
- Арт-дирекшн: кадрирование героических изображений меняется между десктопной и мобильной композицией

## 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`)

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

- «Создай героическую секцию продукта с полноэкранной фотографией от края до края, без скруглений, с тёмным градиентным наложением для текста и массивным заголовком 96px/500 в верхнем регистре в стиле Nike Futura с межстрочным интервалом 0.90 и кнопкой-пилюлей Nike Black (#111111) с радиусом 30px»
- «Разработай сетку карточек продуктов в 3 колонки с квадратными изображениями (без скруглений), зазором 4px между карточками, названием продукта в 16px/500 Nike Black (#111111), ценой в 14px/500 и вторичным текстом в Grey-500 (#707072)»
- «Создай прилипающую белую навигационную панель с логотипом по левому краю, ссылками категорий по центру в 16px/500 (#111111) с цветом hover #707072 и поиском по правому краю (радиус 24px, фон #F5F5F5), иконками избранного и корзины»
- «Создай промо-баннерную полосу с фоном #111111, белым центрированным текстом 12px/500 и вертикальным отступом 8px — на всю ширину, без скруглений»
- «Разработай вторичную контурную кнопку с прозрачным фоном, рамкой 1.5px #CACACB, радиусом пилюли 30px, текстом 16px/500 #111111, с рамкой, темнеющей до #707072 при hover»

### Руководство по итерации

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