Rent Service
Дизайн-система
От токенов до экранов — что разработчик подключает как зависимость, а что собирает вручную. Каталог дизайн-компонентов, из которых собираются три продукта.
Три продукта на одной системе токенов —
специфика постамата определяет половину компонентов.
15 экранов: вход → карта → карточка → шаги оплаты → подтверждение присутствия (BLE) → ремень → фото возврата.
Material 3 · Material Symbols · светлая+тёмная
10 экранов: дашборд, фотоочередь (SLA ≤ 3 мин), карточка стеллажа, операционные инструменты для склада.
Radix · Tailwind · desktop-first · горячие клавиши
12 секций: hero, 5 шагов (включая ремень + фото), объяснение залога и его возврата, юридический блок, FAQ, подвал.
Next 15 · shadcn · lucide · только RU · 300ms FCP
Эти шесть фактов напрямую порождают ShelfMapView, ShelfStrapInstruction, GuidedPhotoOverlay, CrossReturnBanner, BleSignalIndicator и экраны M-04 / M-12. Без них система не работает физически.
Карта системы: от токенов до пользовательских сценариев.
Каждый уровень компонуется только из слоёв выше. Разработчик подключает токены и базовые элементы как библиотеку, составные компоненты и экраны собирает вручную.
6 цветовых шкал · ступени 1 / 3 / 9 / 11 / 12.
Фон · разделители · текст. Основа всех трёх тем.
Главные кнопки · активные состояния · акцент.
Залог: списан и возвращён. Смысловая шкала — всегда рядом глиф ↻ возврата. freeze-* — deprecated
Возврат успешно · полка свободна · фото OK · платёж подтверждён.
Лимит превышен · TTL скоро · фото нужно переснять.
Фото отклонено · возврат отменён · ремень не закреплён.
Смысловые роли: --bg: slate-1/warm · --fg: slate-12 · --brand: iris-9 · --deposit-return: return-9 · --success: jade-9 · --warn: amber-9 · --error: red-9. Return — единственная смысловая шкала, привязанная к бизнес-концепту (списание и возврат залога).
Inter + Onest + JetBrains Mono.
База 4 · шаг 8 · внутренние поля 16 / 24 · секции 48 / 64 / 96. Кратность контролируется линтером.
Поля ввода 10 · карточки 14 · модалки 16 · чипы 999px. Никаких произвольных «6px на глаз».
Анимация — 5 токенов длительности + 7 продуктовых UX-анимаций.
Кривая: cubic-bezier(0.2, 0, 0, 1) — одна кривая для всех состояний.
Reduced motion: всё > 80ms → 0ms. Заложено на уровне токена.
Применение: отклик на касание = instant · шторка = base · морфинг таймлайна = deliberate.
Вес 400 · размер 20/24/28px. Кастом: ↻ возврат залога (SVG 24×24) — единственный не-Material глиф, всегда цветом return.
Базовые элементы: Кнопка · Поле ввода · Бейдж · Иконка.
Размер: sm 32 · md 40 · lg 48. Состояние: покой / наведение / нажатие / неактивна. Кнопка с суммой — отдельный вариант с моноширинными цифрами.
Типы: текст · телефон · PIN · поиск. Плавающие подписи. Ошибка встроена, подсказка снизу. Минимум 44pt (mobile).
Вес 400, grade 0. По умолчанию 20px, акцент 24px, герой 28px. Цвет наследуется через currentColor.
Реализация: Flutter — 4 Widget-класса (RsButton, RsInput, RsBadge, RsIcon) · React — 4 shadcn-обёртки с тем же API. Одна библиотека Figma генерирует оба.
Контейнеры: как раскладываем содержимое.
Базовый блок содержимого. Радиус 14, внутренний отступ 20. Варианты: обычный / iris / freeze / jade.
Карточка стеллажа на карте: адрес, расстояние, N свободных полок.
Карточка оборудования: цена, залог (DepositChip), состояние.
3 состояния прилипания: peek 25% · half 50% · full 90%. Ручка для перетаскивания обязательна.
Модальное окно для критических действий: подтвердить отмену аренды, отклонить возврат. Только «да/нет» + пояснение.
Неблокирующее уведомление: «Полка зафиксирована», «Фото сохранено». Показ 3 с, закрываемо.
Плавающая кнопка — чат с поддержкой. Постоянно в нижнем правом углу на экранах M-04 / M-12 (высокая тревожность).
Левая панель 240px · свёрнутая 64px. 8 разделов: дашборд / очередь / стеллажи / аренды / пользователи / операции / отчёты / настройки.
Финансовые компоненты — ядро доверия к сервису.
Главное изменение: не «холд», а явное списание залога с понятным возвратом ↻.
Разделение «аренда» и «залог». Залог всегда с ↻, всегда цветом return. Возврат на карту 1–3 дня после возврата с фото.
+ фон return-3 (мягкий зелёный)
+ текст return-11
+ JetBrains Mono · tabular-nums
+ опц. срок «1–3 дня»
5 точек применения → следующий слайд.
Полная сумма к списанию всегда на кнопке (tabular nums). Залог отделён словом, чтобы пользователь видел: это не плата за услугу. Критерий S02 / S09.
На экране оплаты рядом с суммой:
Залог 3 000 ₽ (вернём)В карточке аренды:
Залог: списано · ожидает возвратаТаймлайн возврата залога:
Залог 3 000 ₽ возвращён4 компонента, которых нет ни в одной другой системе —
прямое следствие физики постамата.
Раскладки: 1×N (стандартная) · 2×N (широкая). 5 состояний полки. Переиспользование: M-04 / M-12 / M-11 / W-04.
Потяните язычок из пряжки — нет щелчка, просто ослабьте петлю.
Заведите язычок в пряжку, проденьте крючок в отверстие. Датчик пряжки → статус «ремень затянут».
Два режима: выдача (язычок выезжает) / возврат (защёлкивается). SVG-анимация на CSS, Lottie для тонких микро-движений. Критерий S11 / S12.
Бейдж + таймер TTL. Показывает N открытых стеллажей, убывает при приближении дедлайна. Появляется на M-08 / M-12.
Фото — единственное юридическое доказательство возврата. Без замков, без датчиков нагрузки. Критерий S13.
Без этих четырёх компонентов система не работает физически. Они закрепляют то, что в продукте нельзя заменить экраном «откройте дверцу».
Сквозные UX-компоненты — для всех трёх поверхностей.
Только подтверждение присутствия, никаких разблокировок — открывать нечего. 3 уровня сигнала: далеко > близко > рядом. Критерий S14.
QR для СБП. Опрос статуса каждые 2 с. При успехе — автозакрытие + toast.
Визуализация таймлайна для секции 5 лендинга «как возвращается залог». 3 шага, 1–3 дня после возврата.
ИП Иванов И.И.
ОГРН 1234567890123
ИНН 771234567890
+7 (800) 555-35-35
Обязательный блок 152-ФЗ / 54-ФЗ. Подвал лендинга, раздел «О сервисе» в мобильном.
- Обработка ПД (152-ФЗ) · обязательно
- Оферта аренды · обязательно
- Маркетинг · опц.
- Геолокация · опц.
4 раздельных чекбокса. Никаких объединённых согласий. Критерий T-03.
Плавающий чат на M-04 / M-12 / M-07 — экранах с высоким риском оттока.
Ответ ≤ 3 минут в рабочие часы.
Мобильное — из чего собрано.
| Код | Экран | Составные + базовые | Ключевой общий |
|---|---|---|---|
| M-01 | Вход · телефон | Input(телефон) · PrimaryCTA · GranularConsents · AboutService | Согласия |
| M-02 | Карта стеллажей | MapView · PostomatCard · BottomSheet(peek) · Поиск | PostomatCard |
| M-03 | Карточка стеллажа | BottomSheet(half) · EquipmentCard×N · PriceBreakdown · PrimaryCTA | PriceBreakdown |
| M-07 | Оплата · СБП | BottomSheet · PriceBreakdown · DepositChip · RadioGroup · PrimaryCTA(с залогом) · SupportFab | DepositChip |
| M-04 | Выдача · подойти к стеллажу | BleSignalIndicator · ShelfMapView · ShelfStrapInstruction(выдача) · PrimaryCTA(Подтвердить) · SupportFab | ShelfMap · Ремень |
| M-05 | Активная аренда | Таймер · PriceBreakdown · DepositChip · ExtendCTA · CancelDialog | DepositChip |
| M-08 | Выбор стеллажа возврата | MapView · PostomatCard(фильтр=свободные) · CrossReturnBanner | CrossReturn |
| M-12 | Возврат · закрепить + фото | CrossReturnBanner · ShelfMapView · ShelfStrapInstruction(возврат) · GuidedPhotoOverlay(4) · PrimaryCTA | ShelfMap · Ремень · Фото |
| M-11 | Успех возврата | SuccessIcon · DepositCycleViz(возврат залога) · mini-таймлайн · ReviewCTA | DepositCycle |
| M-13 | История аренд | Список · RentalCard · DepositChip · FilterChips | DepositChip |
| M-14 | Профиль / персональные данные | Вкладки · Input · GranularConsents · DocumentsList · AboutService | Согласия · О сервисе |
| M-15 | Поддержка | SupportChat · FAQList · CallButton | — |
ShelfMapView переиспользуется в 4 экранах (M-04 / M-11 / M-12 + превью на M-03) · DepositChip — в 6 экранах. Экономия на переиспользовании — главная причина, почему составные компоненты стоит выделять.
Админка — из чего собрано.
В админке нет «открыть удалённо» — открывать нечего.
| Код | Экран | Составные + базовые | Действия |
|---|---|---|---|
| W-01 | Вход · 2FA | Sidebar(свёрнут) · Input · TotpInput · PrimaryCTA | — |
| W-02 | Дашборд | Sidebar · KPICards · Chart · Table(недавние) | детализация |
| W-03 | Фотоочередь (SLA ≤ 3 мин) | Sidebar · DataTable · ImageViewer(4 фото) · SLATimer · горячие клавиши · StatusBadge | принять · отклонить · эскалировать |
| W-04 | Карточка стеллажа | Sidebar · ShelfMapView(вариант для админки) · LiveFeed · RentalList | отключить полку · включить полку · открыть удалённо |
| W-05 | Список аренд | Sidebar · DataTable · FilterBar · StatusBadge · DepositChip | просмотр · отмена |
| W-06 | Карточка аренды | Sidebar · Timeline · PriceBreakdown · DepositChip · PhotoSet · SupportThread | возврат · связь |
| W-07 | Список пользователей | Sidebar · DataTable · RiskBadge · SearchBar | бан · верификация |
| W-08 | Каталог оборудования | Sidebar · DataTable · PriceInput · AvailabilityToggle | редактировать · отключить |
| W-09 | Отчёты | Sidebar · DateRange · Chart · ExportCSV | экспорт |
| W-10 | Настройки · SLA / чек-листы | Sidebar · Form · Toggle · Input | сохранить |
Тот же компонент, что в мобильном — но с дополнительными действиями на полку: отключить (ремень неисправен / уборка / обслуживание), включить. Нет действия «открыть» — физически нет замка.
Самый важный экран админки. SLA ≤ 3 минут на приём/отклонение. Клавиатура: A/R/E. Эскалация → ML-разметка + менеджер.
Лендинг — из чего собрано.
| № | Секция | Составные + базовые | Примечание |
|---|---|---|---|
| L-01 | Hero | Заголовок · пара кнопок · реальное фото (стеллаж · открытые полки · ремни) — images.unsplash.com/photo-1530124566582-a618bc2615dc · TrustStrip(СБП · 54-ФЗ · РКН) | НЕ «12 000 аренд» |
| L-02 | Ценностные тезисы | FeatureGrid(3) · Icon · HeadlineS · body | 90 сек · близко · честно |
| L-03 | Каталог оборудования | CategoryTabs · EquipmentCard×N · DepositChip(залог) | DepositChip |
| L-04 | Как работает (5 шагов) | 5 шагов: найти → оплатить СБП (аренда + залог) → QR стеллажа → ремень → фото | актуальный сценарий |
| L-05 | Как возвращается залог | DepositCycleViz · таймлайн из 3 шагов (списали → возврат с фото → вернули) · ссылка на FAQ | ядро доверия |
| L-06 | Карта стеллажей | MapEmbed · PostomatList · часы работы | CrossReturnBanner |
| L-07 | Безопасность / фото | PhotoGrid(демо 4 ракурса) · пояснение · SLABadge | почему фото |
| L-08 | Отзывы | ReviewCard×N · Rating · VerifiedBadge | — |
| L-09 | Для юрлиц (B2B) | FeatureGrid · ContactForm | корпоративное |
| L-10 | FAQ | Аккордеон · поиск · TopicTabs | 9 страхов → 9 ответов |
| L-11 | Финальный призыв | Заголовок · строка загрузки (App Store · RuStore) · QR для десктопа | — |
| L-12 | Подвал · юридический | AboutService · ссылки · соцсети · уведомление о cookies | ОГРН / ИНН обязательно |
Hero и каталог — реальные фото с Unsplash (хот-линк, оптимизация q=70). Никаких стоковых «мобильного банкинга».
Возврат залога ↻ — не идея, а каталог из 5 точек применения.
- SVG-глиф ↻ кастомный 24×24, наследует currentColor
- Фон return-3 (мягкий зелёный, #D1FAE5)
- Текст return-11 (#047857) — высокий контраст
- JetBrains Mono · tabular-nums
- Опциональный срок «1–3 дня» — встроенный small
- ↻ на кнопке «Оплатить» — это про деньги в целом, не про залог
- ↻ у TTL-таймера или таймера аренды
- ↻ как декор героя или заставки
- ↻ в ошибках — путает «возврат» и «отказ»
- Старая снежинка ❄ — выводится как deprecated, метафора «холд» заменяется на «залог»
Применение только к залогу и его возврату. Никогда к: аренде, оплате, TTL, таймерам. Семантическая чистота.
Библиотека микрокопи — фраза → где.
Итого: 12 кнопок + 8 push + 6 статусов + 5 пустых/ошибок + 5 подсказок + 7 ремень/полки = 43 утверждённые фразы. Тон: честность > дружелюбие > краткость.
Шаблоны раскладок — скелеты, которые можно заполнить.
10 готовых раскладок · 5 мобильных · 3 админки · 3 лендинга. Заполняются данными через слоты. Использование: 37 экранов собираются из этих 10 шаблонов + составные компоненты.
4 универсальных состояния — одинаковые на всех поверхностях.
Иконка slate-11 · заголовок · короткое пояснение · одна кнопка «найти / добавить».
Пример: M-13 «Пока ни одной аренды»
Скелетон для списков · спиннер для действий < 2 с · прогресс для > 2 с. Никогда пустого экрана.
Пример: опрос СБП (спиннер freeze-9)
Иконка red-9 · что пошло не так (человеческим языком) · что сделать (повтор / поддержка) · никакого стек-трейса.
Пример: «Не получилось оплатить»
Иконка jade-9 · что произошло · что будет дальше · опциональный таймлайн (DepositCycleViz).
Пример: M-11 «Возврат принят · залог вернётся за 1–3 дня»
| Состояние | Иконка | Основной текст | Действие | Где |
|---|---|---|---|---|
| пусто | глиф slate-11, 40px | h2 + 1 строка пояснения | прозрачная кнопка | M-13, M-15, W-02 (нет данных) |
| загрузка | спиннер freeze-9 | короткая подпись (опц.) | — | все асинхронные действия |
| ошибка | red-9 ⚠ | человеческая причина | повтор · поддержка | СБП, BLE, сеть, ML |
| успех | jade-9 ✓ | что произошло | следующий шаг | M-11, W-03 приём, подтверждения |
Что разработчик получает — каталог.
HEX + смысловые имена
display → caption
4 → 96 · сетка 8-pt
80 / 120 / 180 / 240 / 400
4 / 8 / 12 / 16 / pill
виджеты Flutter + React
в т.ч. 3 специфичных для постамата
утверждены, проверен тон
15 мобильных + 10 админки + 12 лендинга
вкл. возврат в любой стеллаж
вкл. S11–S15: ремни · полки · BLE-присутствие · ML-фото
Дизайн-система согласована с фактической механикой проекта.
Открытые полки, ремни, подтверждение присутствия по BLE, фото как доказательство — вшиты в каждый компонент. Не надо додумывать при реализации.
docs/design-kit.md · docs/research/design/01–21 · docs/research/design/AUDIT-vs-project-presentation.md