Дизайн-система, вдохновлённая 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.

Иерархия

Принципы

• Жирные заголовки, средний текст: Заголовки 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. Глубина и поднятие

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

Точки разрыва

Цели касания

• Все кнопки-таблетки: минимальная высота 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 с белыми вторичными элементами для сбалансированных макетов с двойным действием