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

> Category: Медиа и потребительский сектор
> Мобильная платформа. Смелый чёрно-белый стиль, плотная типографика, городская энергия.

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

Дизайн-язык Uber — это мастер-класс по уверенному минимализму: чёрно-белая вселенная, где каждый пиксель служит цели и ничто не украшает без права на существование. Весь опыт построен на резком дуализме: угольный чёрный (`#000000`) и чистый белый (`#ffffff`), практически без средних оттенков серого, разбавляющих сообщение. Это не стерильный минимализм стартапа, который ещё не завершил проектирование — это намеренная сдержанность настолько устоявшегося бренда, что он может себе позволить шептать.

Фирменный шрифт UberMove — это собственный геометрический гротеск с явно квадратным, инженерным характером. Заголовки в UberMove Bold при 52px несут вес рекламного щита — авторитетные, прямые, бескомпромиссные. Дополняющий шрифт UberMoveText обрабатывает основной текст и кнопки со слегка более мягким, удобочитаемым характером при среднем начертании (500). Вместе они создают типографическую систему, ощущающуюся как схема транспортной сети: чёткая, эффективная, созданная для быстрого просмотра.

По-настоящему отличает дизайн Uber использование фотографии и иллюстраций «во всю полосу» в паре с интерактивными элементами в форме таблетки (border-radius 999px). Навигационные чипы, CTA-кнопки и выборщики категорий — все используют эту форму капсулы, создавая тактильный, удобный для пальца язык интерфейса, безошибочно узнаваемый как Uber. Иллюстрации — тёплые, слегка стилизованные сцены с водителями, пассажирами и городскими пейзажами — привносят человечность в то, что иначе могло бы быть холодной монохромной системой. Сайт чередует белые разделы контента и полностью чёрный подвал, с карточными макетами, использующими максимально лёгкие тени (rgba(0,0,0,0.12-0.16)) для создания тонкой глубины без нарушения плоской эстетики.

**Ключевые характеристики:**
- Чисто чёрно-белая основа с практически отсутствующими средними оттенками серого в хроме интерфейса
- UberMove (заголовки) + UberMoveText (текст/UI) — семейство собственных геометрических гротесков
- Всё в форме таблетки: кнопки, чипы, элементы навигации — все используют border-radius 999px
- Тёплые, человечные иллюстрации контрастируют с суровым монохромным интерфейсом
- Карточный макет с шелестяще-мягкими тенями (непрозрачность 0,12-0,16)
- Сетка отступов 8px с компактными, информационно насыщенными макетами
- Смелая фотография интегрирована как фоновые изображения героев во всю полосу
- Чёрный подвал, якорящий страницу в тёмной, высококонтрастной среде

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

### Основные цвета
- **Uber Black** (`#000000`): Определяющий цвет бренда — используется для основных кнопок, заголовков, текста навигации и подвала. Не «почти чёрный» или «с оттенком», а истинный, бескомпромиссный чёрный.
- **Pure White** (`#ffffff`): Основной цвет поверхности и инвертированный текст. Используется для фонов страниц, поверхностей карточек и текста на чёрных элементах.

### Интерактивные состояния и состояния кнопок
- **Hover Gray** (`#e2e2e2`): Состояние наведения белой кнопки — чистый, прохладный светло-серый, обеспечивающий чёткую обратную связь без теплоты.
- **Hover Light** (`#f3f3f3`): Тонкое наведение для приподнятых белых кнопок — едва заметный серый для мягкой обратной связи при взаимодействии.
- **Chip Gray** (`#efefef`): Фон для вторичных/фильтрующих кнопок и навигационных чипов — нейтральный, ультра-светлый серый.

### Текст и контент
- **Body Gray** (`#4b4b4b`): Вторичный текст и ссылки подвала — истинный средний серый без тёплого или холодного смещения.
- **Muted Gray** (`#afafaf`): Третичный текст, приглушённые ссылки подвала и контент-заполнители.

### Рамки и разделение
- **Border Black** (`#000000`): Тонкие рамки 1px для структурного ограничения — используются экономно на разделителях и контейнерах форм.

### Тени и глубина
- **Shadow Light** (`rgba(0, 0, 0, 0.12)`): Стандартное поднятие карточки — лёгкий как перо подъём для контентных карточек.
- **Shadow Medium** (`rgba(0, 0, 0, 0.16)`): Немного более сильное поднятие для плавающих кнопок действий и оверлеев.
- **Button Press** (`rgba(0, 0, 0, 0.08)`): Встроенная тень для активных/нажатых состояний вторичных кнопок.

### Состояния ссылок
- **Default Link Blue** (`#0000ee`): Стандартный синий браузера для текстовых ссылок с подчёркиванием — используется в основном контенте.
- **Link White** (`#ffffff`): Ссылки на тёмных поверхностях — используется в подвале и тёмных секциях.
- **Link Black** (`#000000`): Ссылки на светлых поверхностях с декорированием подчёркиванием.

### Система градиентов
- Дизайн Uber **полностью без градиентов**. Дуализм чёрного/белого и плоские цветовые блоки создают всю визуальную иерархию. Нигде в системе не появляются градиенты — каждая поверхность является сплошным цветом, каждый переход — жёсткий край или тень.

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

### Семейство шрифтов
- **Заголовок/Display**: `UberMove`, с запасными вариантами: `UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif`
- **Текст/UI**: `UberMoveText`, с запасными вариантами: `system-ui, Helvetica Neue, Helvetica, Arial, sans-serif`

*Примечание: UberMove и UberMoveText являются собственными шрифтами. Для внешних реализаций используйте `system-ui` или Inter как ближайший доступный заменитель. Геометрический, квадратно-пропорциональный характер UberMove может быть приближён с помощью Inter или DM Sans.*

### Иерархия

| Роль | Шрифт | Размер | Начертание | Высота строки | Заметки |
|------|------|------|--------|-------------|-------|
| Display/Hero | UberMove | 52px (3,25rem) | 700 | 1,23 (плотный) | Максимальный эффект, присутствие рекламного щита |
| Заголовок раздела | UberMove | 36px (2,25rem) | 700 | 1,22 (плотный) | Якоря основных разделов |
| Название карточки | UberMove | 32px (2rem) | 700 | 1,25 (плотный) | Заголовки карточек и функций |
| Подзаголовок | UberMove | 24px (1,5rem) | 700 | 1,33 | Заголовки вторичных разделов |
| Мелкий заголовок | UberMove | 20px (1,25rem) | 700 | 1,40 | Компактные заголовки, названия списков |
| Навигация/UI крупный | UberMoveText | 18px (1,13rem) | 500 | 1,33 | Навигационные ссылки, выделенный текст UI |
| Текст/Кнопка | UberMoveText | 16px (1rem) | 400-500 | 1,25-1,50 | Стандартный основной текст, подписи кнопок |
| Подпись | UberMoveText | 14px (0,88rem) | 400-500 | 1,14-1,43 | Метаданные, описания, мелкие ссылки |
| Микро | UberMoveText | 12px (0,75rem) | 400 | 1,67 (свободный) | Мелкий шрифт, юридический текст |

### Принципы
- **Жирные заголовки, средний текст**: Заголовки UberMove исключительно начертания 700 (жирный) — каждый заголовок бьёт с силой рекламного щита. Основной и UI-текст UberMoveText использует 400-500, создавая чёткую визуальную иерархию через контраст начертаний.
- **Плотные высоты строк заголовков**: Все заголовки используют высоты строк между 1,22-1,40 — компактные и ударные, созданные для просмотра, а не чтения.
- **Функциональная типографика**: Нигде нет декоративной обработки текста. Никакого межбуквенного интервала, трансформации текста, декоративного масштабирования. Каждый текстовый элемент служит прямой цели коммуникации.
- **Два шрифта, строгие роли**: UberMove — исключительно для заголовков. UberMoveText — исключительно для текста, кнопок, ссылок и UI. Граница никогда не нарушается.

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

### Кнопки

**Основная чёрная (CTA)**
- Фон: Uber Black (`#000000`)
- Текст: Pure White (`#ffffff`)
- Отступ: 10px 12px
- Радиус: 999px (полная таблетка)
- Контур: нет
- Фокус: встроенное кольцо `rgb(255,255,255) 0px 0px 0px 2px`
- Основная кнопка действия — жирная, высококонтрастная, невозможно пропустить

**Вторичная белая**
- Фон: Pure White (`#ffffff`)
- Текст: Uber Black (`#000000`)
- Отступ: 10px 12px
- Радиус: 999px (полная таблетка)
- Наведение: фон меняется на Hover Gray (`#e2e2e2`)
- Фокус: фон меняется на Hover Gray, появляется встроенное кольцо
- Используется на тёмных поверхностях или как вторичное действие рядом с Основной чёрной

**Чип/Фильтр**
- Фон: Chip Gray (`#efefef`)
- Текст: Uber Black (`#000000`)
- Отступ: 14px 16px
- Радиус: 999px (полная таблетка)
- Активное: встроенная тень `rgba(0,0,0,0.08)`
- Навигационные чипы, выборщики категорий, переключатели фильтров

**Плавающее действие**
- Фон: Pure White (`#ffffff`)
- Текст: Uber Black (`#000000`)
- Отступ: 14px
- Радиус: 999px (полная таблетка)
- Тень: `rgba(0,0,0,0.16) 0px 2px 8px 0px`
- Трансформация: `translateY(2px)` лёгкое смещение
- Наведение: фон меняется на `#f3f3f3`
- Управление картой, прокрутка вверх, плавающие CTA

### Карточки и контейнеры
- Фон: Pure White (`#ffffff`) на белых страницах; нет чёткого разграничения фона карточек
- Рамка: по умолчанию отсутствует — карточки определяются тенью, а не обводкой
- Радиус: 8px для стандартных контентных карточек; 12px для избранных/продвигаемых карточек
- Тень: `rgba(0,0,0,0.12) 0px 4px 16px 0px` для стандартного подъёма
- Карточки насыщены контентом с минимальными внутренними отступами
- Карточки с изображением используют полноблидовые изображения с текстом поверх или ниже

### Поля ввода и формы
- Текст: Uber Black (`#000000`)
- Фон: Pure White (`#ffffff`)
- Рамка: 1px сплошной чёрный (`#000000`) — единственное место, где видимые рамки появляются заметно
- Радиус: 8px
- Отступ: стандартный комфортный интервал
- Фокус: нет извлечённого пользовательского состояния фокуса — полагается на стандартное кольцо фокуса браузера

### Навигация
- Прилипающая верхняя навигация с белым фоном
- Логотип: словарный знак/иконка Uber 24x24px чёрного цвета
- Ссылки: UberMoveText при 14-18px, начертание 500, цвет Uber Black
- Навигационные чипы в форме таблетки с фоном Chip Gray (`#efefef`) для навигации по категориям («Ехать», «Водить», «Бизнес», «Uber Eats»)
- Переключатель меню: круглая кнопка с border-radius 50%
- Мобильный: паттерн гамбургер-меню

### Обработка изображений
- Тёплые, нарисованные вручную иллюстрационные сцены (не фотографии для разделов функций)
- Стиль иллюстраций: слегка стилизованные люди, тёплая цветовая палитра в иллюстрациях, современное настроение
- Разделы Hero используют смелую фотографию или иллюстрацию как фон на всю ширину
- QR-коды для CTA загрузки приложения
- Все изображения используют стандартный border-radius 8px или 12px при размещении в карточках

### Отличительные компоненты

**Навигация категорий-таблеток**
- Горизонтальный ряд кнопок-таблеток для навигации верхнего уровня («Ехать», «Водить», «Бизнес», «Uber Eats», «О нас»)
- Каждая таблетка: фон Chip Gray, чёрный текст, радиус 999px
- Активное состояние обозначается чёрным фоном с белым текстом (инверсия)

**Hero с двойным действием**
- Разделённый hero: текст/CTA слева, карта/иллюстрация справа
- Два поля ввода рядом для отправной точки/пункта назначения
- CTA-кнопка «Посмотреть цены» в чёрной таблетке

**Карточки Plan-Ahead**
- Карточки, продвигающие функции типа «Uber Reserve» и планирование поездок
- Насыщенные иллюстрациями с тёплыми, человекоориентированными изображениями
- Чёрные CTA-кнопки с белым текстом внизу

## 5. Принципы макета

### Система отступов
- Базовая единица: 8px
- Шкала: 4px, 6px, 8px, 10px, 12px, 14px, 16px, 18px, 20px, 24px, 32px
- Отступ кнопки: 10px 12px (компактный) или 14px 16px (комфортный)
- Внутренний отступ карточки: примерно 24-32px
- Вертикальный интервал разделов: щедрый, но эффективный — примерно 64-96px между основными разделами

### Сетка и контейнер
- Максимальная ширина контейнера: примерно 1136px, по центру
- Hero: разделённый макет с текстом слева, визуальным справа
- Разделы функций: двухколонные сетки карточек или полноширинная одна колонка
- Подвал: многоколонная сетка ссылок на чёрном фоне
- Полноширинные разделы, распространяющиеся до краёв viewport

### Философия белого пространства
- **Эффективное, не воздушное**: Белое пространство Uber функционально — достаточно для разделения, никогда достаточно, чтобы казаться пустым. Это интервалы транспортной системы: компактные, чёткие, целеориентированные.
- **Насыщенные контентом карточки**: Карточки плотно упаковывают информацию с минимальными внутренними отступами, полагаясь на тень и радиус для определения границ.
- **Дыхательное пространство разделов**: Основные разделы получают щедрый вертикальный интервал, но внутри разделов элементы тесно сгруппированы.

### Шкала border-radius
- Острый (0px): Никаких прямых углов у интерактивных элементов
- Стандартный (8px): Контентные карточки, поля ввода, списочные поля
- Комфортный (12px): Избранные карточки, более крупные контейнеры, карточки-ссылки
- Полная таблетка (999px): Все кнопки, чипы, элементы навигации, таблетки
- Круг (50%): Аватар-изображения, контейнеры иконок, круговые элементы управления

## 6. Глубина и поднятие

| Уровень | Обработка | Использование |
|-------|-----------|-----|
| Плоский (Уровень 0) | Нет тени, сплошной фон | Фон страницы, встроенный контент, текстовые разделы |
| Тонкий (Уровень 1) | `rgba(0,0,0,0.12) 0px 4px 16px` | Стандартные контентные карточки, функциональные блоки |
| Средний (Уровень 2) | `rgba(0,0,0,0.16) 0px 4px 16px` | Приподнятые карточки, оверлейные элементы |
| Плавающий (Уровень 3) | `rgba(0,0,0,0.16) 0px 2px 8px` + translateY(2px) | Плавающие кнопки действий, элементы управления картой |
| Нажатый (Уровень 4) | `rgba(0,0,0,0.08) inset` (spread 999px) | Активные/нажатые состояния кнопок |
| Кольцо фокуса | `rgb(255,255,255) 0px 0px 0px 2px inset` | Индикаторы фокуса клавиатуры |

**Философия теней**: Uber использует тень исключительно как структурный инструмент, никогда декоративный. Тени всегда чёрные при очень низкой непрозрачности (0,08-0,16), создавая минимально необходимый подъём для разделения слоёв контента. Радиусы размытия умеренные (8-16px) — достаточно, чтобы казаться естественными, но никогда не драматическими. Нет цветных теней, нет стека наложенных теней, нет эффектов атмосферного свечения. Глубина передаётся больше через контраст чёрно-белых разделов, чем через поднятие тени.

## 7. Нужно и нельзя

### Нужно
- Использовать настоящий чёрный (`#000000`) и чистый белый (`#ffffff`) как основную палитру — резкий контраст И ЕСТЬ Uber
- Использовать border-radius 999px для всех кнопок, чипов и навигационных элементов в форме таблетки
- Хранить все заголовки в UberMove Bold (700) для воздействия на уровне рекламного щита
- Использовать шелестяще-мягкие тени (непрозрачность 0,12-0,16) для поднятия карточек — едва заметные
- Поддерживать компактный, информационно насыщенный стиль макета — Uber приоритизирует эффективность над воздушностью
- Использовать тёплые, человекоориентированные иллюстрации для смягчения монохромного интерфейса
- Применять радиус 8px для контентных карточек и 12px для избранных контейнеров
- Использовать UberMoveText начертания 500 для навигации и выделенного UI-текста
- Сочетать чёрные основные кнопки с белыми вторичными кнопками для макетов с двойным действием

### Нельзя
- Не вводить цвет в хром интерфейса — интерфейс Uber строго чёрный, белый и серый
- Не использовать радиус углов менее 999px на кнопках — форма полной таблетки является ключевым идентификационным элементом
- Не применять тяжёлые тени или тени с высокой непрозрачностью — глубина шелестяще-тонкая
- Не использовать шрифты с засечками нигде — типографика Uber исключительно геометрический гротеск
- Не создавать воздушные, просторные макеты с избыточным белым пространством — плотность Uber намеренна
- Не использовать градиенты или наложения цветов — каждая поверхность является плоским сплошным цветом
- Не смешивать UberMove в основной текст или UberMoveText в заголовки — иерархия строга
- Не использовать декоративные рамки — рамки функциональны (поля ввода, разделители) или полностью отсутствуют
- Не смягчять контраст чёрного/белого с нечистыми белыми или почти чёрными — дуализм намерен

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

### Точки разрыва
| Название | Ширина | Ключевые изменения |
|------|-------|-------------|
| Мобильный малый | 320px | Минимальный макет, одна колонка, стеклированные поля ввода, компактная типографика |
| Мобильный | 600px | Стандартный мобильный, стековый макет, навигация-гамбургер |
| Планшет малый | 768px | Начало двухколонных сеток, расширенные макеты карточек |
| Планшет | 1119px | Полный планшетный макет, бок о бок контент hero |
| Десктоп малый | 1120px | Активация десктопной сетки, горизонтальные таблетки навигации |
| Десктоп | 1136px | Полный десктопный макет, максимальная ширина контейнера, разделённый hero |

### Цели касания
- Все кнопки-таблетки: минимальная высота 44px (10-14px вертикального отступа + высота строки)
- Навигационные чипы: щедрый отступ 14px 16px для комфортного нажатия большим пальцем
- Круговые элементы управления (меню, закрыть): радиус 50% обеспечивает большие, лёгкие для нажатия цели
- Поверхности карточек служат целями касания всей зоны на мобильных устройствах

### Стратегия свёртывания
- **Навигация**: Горизонтальная навигация-таблетки свёртывается в гамбургер-меню с круговым переключателем
- **Hero**: Разделённый макет (текст + карта/визуальный) стекируется в одну колонку — текст сверху, визуальный снизу
- **Поля ввода**: Бок о бок поля отправной точки/назначения стекируются вертикально
- **Карточки функций**: Двухколонная сетка свёртывается в полноширинные стековые карточки
- **Заголовки**: Дисплей 52px масштабируется вниз через 36px, 32px, 24px, 20px
- **Подвал**: Многоколонная сетка ссылок свёртывается в аккордеон или стековую одну колонку
- **Таблетки категорий**: Горизонтальная прокрутка с переполнением на меньших экранах

### Поведение изображений
- Иллюстрации масштабируются пропорционально внутри своих контейнеров
- Изображения hero поддерживают соотношение сторон, могут обрезаться на меньших экранах
- Разделы с QR-кодами скрываются на мобильных устройствах (загрузка приложения переключается на прямые ссылки на магазины)
- Изображения карточек поддерживают border-radius 8-12px при всех размерах

## 9. Руководство по промптам для Agent

### Быстрый справочник цветов
- Основная кнопка: «Uber Black (#000000)»
- Фон страницы: «Pure White (#ffffff)»
- Текст кнопки (на чёрном): «Pure White (#ffffff)»
- Текст кнопки (на белом): «Uber Black (#000000)»
- Вторичный текст: «Body Gray (#4b4b4b)»
- Третичный текст: «Muted Gray (#afafaf)»
- Фон чипа: «Chip Gray (#efefef)»
- Состояние наведения: «Hover Gray (#e2e2e2)»
- Тень карточки: «rgba(0,0,0,0.12) 0px 4px 16px»
- Фон подвала: «Uber Black (#000000)»

### Примеры промптов для компонентов
- «Создать раздел hero на Pure White (#ffffff) с заголовком 52px UberMove Bold (700), высота строки 1,23. Использовать текст Uber Black (#000000). Добавить подзаголовок в Body Gray (#4b4b4b) 16px UberMoveText начертание 400 с высотой строки 1,50. Разместить CTA-кнопку-таблетку Uber Black (#000000) с текстом Pure White, радиус 999px, отступ 10px 12px.»
- «Создать панель навигации по категориям с горизонтальными кнопками-таблетками. Каждая таблетка: фон Chip Gray (#efefef), текст Uber Black (#000000), отступ 14px 16px, border-radius 999px. Активная таблетка инвертируется в фон Uber Black с текстом Pure White. Использовать UberMoveText 14px начертание 500.»
- «Построить карточку функции на Pure White (#ffffff) с border-radius 8px и тенью rgba(0,0,0,0.12) 0px 4px 16px. Заголовок в UberMove 24px начертание 700, описание в Body Gray (#4b4b4b) 16px UberMoveText. Добавить чёрную CTA-кнопку-таблетку внизу.»
- «Создать тёмный подвал на Uber Black (#000000) с текстом заголовка Pure White (#ffffff) в UberMove 20px начертание 700. Ссылки подвала в Muted Gray (#afafaf) 14px UberMoveText. Ссылки при наведении меняются на Pure White. Многоколонный сетчатый макет.»
- «Создать плавающую кнопку действия с фоном Pure White (#ffffff), радиус 999px, отступ 14px и тень rgba(0,0,0,0.16) 0px 2px 8px. Наведение меняет фон на #f3f3f3. Использовать для прокрутки вверх или элементов управления картой.»

### Руководство по итерации
1. Сосредоточьтесь на ОДНОМ компоненте за раз
2. Ссылайтесь на строгую палитру чёрного/белого — «использовать Uber Black (#000000)», не «сделать тёмным»
3. Всегда указывайте радиус 999px для кнопок и таблеток — это не подлежит обсуждению для идентичности Uber
4. Описывайте семейство шрифтов явно — «UberMove Bold для заголовка, UberMoveText Medium для метки»
5. Для теней используйте «шелестящую тень (rgba(0,0,0,0.12) 0px 4px 16px)» — никогда тяжёлые тени
6. Сохраняйте макеты компактными и насыщенными информацией — Uber эффективен, не воздушен
7. Иллюстрации должны быть тёплыми и человечными — описывайте «стилизованных людей в тёплых тонах», не абстрактные формы
8. Сочетайте чёрные CTA с белыми вторичными элементами для сбалансированных макетов с двойным действием