# Дизайн-система за мотивами 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 із компактними, інформаційно насиченими розкладками
- Виразна фотографія як повноформатний фон для hero-секцій
- Чорний футер, що якорить сторінку в темному середовищі з високим контрастом

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

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

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

### Текст та контент
- **Body Gray** (`#4b4b4b`): Вторинний текст і посилання в футері — справжній середній сірий без теплого чи холодного відтінку.
- **Muted Gray** (`#afafaf`): Третинний текст, знецінені посилання в футері та placeholder-контент.

### Рамки та розділення
- **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 — компактно і пружно, призначено для сканування, а не читання.
- **Функціональна типографіка**: Жодних декоративних прийомів. Ніякого letter-spacing, text-transform чи орнаментального розміру. Кожен текстовий елемент слугує прямій комунікаційній меті.
- **Два шрифти, суворі ролі**: UberMove — виключно для заголовків. UberMoveText — виключно для основного тексту, кнопок, посилань і UI. Межа ніколи не порушується.

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

### Кнопки

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

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

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

**Плаваюча кнопка дії**
- Фон: Pure White (`#ffffff`)
- Текст: Uber Black (`#000000`)
- Padding: 14px
- Радіус: 999px (повна пілюля)
- Тінь: `rgba(0,0,0,0.16) 0px 2px 8px 0px`
- Transform: `translateY(2px)` — невеликий зсув
- Наведення: фон змінюється на `#f3f3f3`
- Елементи керування картою, кнопка прокрутки вгору, плаваючі CTA

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

### Поля введення та форми
- Текст: Uber Black (`#000000`)
- Фон: Pure White (`#ffffff`)
- Рамка: 1px solid Black (`#000000`) — єдине місце, де видимі рамки помітно присутні
- Радіус: 8px
- Padding: стандартні комфортні відступи
- Фокус: без спеціального витягнутого стану — спирається на стандартне кільце фокусу браузера

### Навігація
- Фіксована верхня навігація з білим фоном
- Логотип: wordmark/іконка Uber розміром 24x24px у чорному кольорі
- Посилання: UberMoveText розміром 14–18px, насиченість 500, в Uber Black
- Навігаційні чіпи у формі пілюлі з фоном Chip Gray (`#efefef`) для категорійної навігації ("Ride", "Drive", "Business", "Uber Eats")
- Перемикач меню: кругла кнопка з border-radius 50%
- Мобільна версія: шаблон гамбургер-меню

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

### Характерні компоненти

**Навігація з категорійними пілюлями**
- Горизонтальний ряд кнопок у формі пілюлі для навігації верхнього рівня ("Ride", "Drive", "Business", "Uber Eats", "About")
- Кожна пілюля: фон Chip Gray, чорний текст, радіус 999px
- Активний стан позначається чорним фоном з білим текстом (інверсія)

**Hero з подвійною дією**
- Розділений hero: текст/CTA ліворуч, карта/ілюстрація праворуч
- Два поля введення поруч для місця відправлення/призначення
- Кнопка CTA "See prices" у чорній пілюлі

**Картки для планування заздалегідь**
- Картки, що просувають функції типу "Uber Reserve" і планування поїздок
- Насичені ілюстраціями з теплими, людиноцентричними зображеннями
- Чорні кнопки CTA з білим текстом внизу

## 5. Принципи розкладки

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

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

### Філософія білого простору
- **Ефективний, а не повітряний**: Білий простір Uber функціональний — достатньо для розділення, але ніколи не порожньо. Це відступи транзитної системи: компактні, чіткі, цілеспрямовані.
- **Насичені контентом картки**: Картки компактно пакують інформацію з мінімальними внутрішніми відступами, покладаючись на тінь і радіус для визначення меж.
- **Повітря між секціями**: Основні секції отримують щедрі вертикальні відступи, але всередині секцій елементи тісно згруповані.

### Шкала border-radius
- Гостра (0px): Жодних квадратних кутів в інтерактивних елементах
- Стандартна (8px): Контентні картки, поля введення, списки
- Комфортна (12px): Featured картки, більші контейнери, посилання-картки
- Повна пілюля (999px): Усі кнопки, чіпи, елементи навігації, пілюлі
- Коло (50%): Аватар-зображення, контейнери іконок, кругові елементи керування

## 6. Глибина та піднятість

| Рівень | Обробка | Застосування |
|--------|---------|-------------|
| Плаский (Level 0) | Без тіні, суцільний фон | Фон сторінки, вбудований контент, текстові секції |
| Тонкий (Level 1) | `rgba(0,0,0,0.12) 0px 4px 16px` | Стандартні контентні картки, функціональні блоки |
| Середній (Level 2) | `rgba(0,0,0,0.16) 0px 4px 16px` | Підняті картки, оверлей-елементи |
| Плаваючий (Level 3) | `rgba(0,0,0,0.16) 0px 2px 8px` + translateY(2px) | Плаваючі кнопки дії, елементи керування картою |
| Натиснутий (Level 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 для featured контейнерів
- Використовуйте UberMoveText насиченістю 500 для навігації та виразного тексту UI
- Поєднуйте чорні основні кнопки з білими вторинними для розкладок із подвійною дією

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

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

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

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

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

### Поведінка зображень
- Ілюстрації масштабуються пропорційно в своїх контейнерах
- Зображення hero підтримують пропорції, можуть обрізатися на менших екранах
- Секції з QR-кодами ховаються на мобільних (завантаження застосунку переходить до прямих посилань на магазини)
- Зображення на картках підтримують border-radius 8–12px за будь-яких розмірів

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

### Швидке посилання на кольори
- Основна кнопка: "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, padding 10px 12px."
- "Розробіть навігаційну панель із категоріями у вигляді горизонтальних кнопок-пілюль. Кожна пілюля: фон Chip Gray (#efefef), текст Uber Black (#000000), padding 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, padding 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 з білими вторинними для збалансованих розкладок із подвійною дією