Дизайн-система, вдохновлённая 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 — локаль-специфичная альтернатива

Иерархия

Принципы

Типографика 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)

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

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

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

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

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

6. Глубина и высота

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

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

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

• Минимальная сенсорная цель: 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