workbuddy_skills/open-design/design-systems/uber/DESIGN-ru.md

Дизайн-система, вдохновлённая 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 с белыми вторичными элементами для сбалансированных макетов с двойным действием