admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
299 lines
34 KiB
Markdown
299 lines
34 KiB
Markdown
# Дизайн-система, вдохновлённая 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 с белыми вторичными элементами для сбалансированных макетов с двойным действием
|