v5 · Роадмап дизайн-системы

Библиотека компонентов

Полный набор «Лови» вживую: каждый компонент — из канонических токенов, со всеми состояниями, в обеих темах. Сниппеты — docs/07, анатомия — docs/09, реестр набора — docs/12.

9 групп 60+ демо 43 иконки Светлая / тёмная

Кнопки

Одна primary на экран. Высоты 32 / 36 / 48, радиус-капсула, иконка 16px слева. Hover — shadow-lift, нажатие — scale .95.

Смотреть все

cta-btn h36 · pad 0 16 · radius 999 · 12px/700 · gradient-brand + on-brand · hover: shadow-lift · active: scale .95 · disabled: opacity .5
ghost-btn h40 · border 1.5 line · 13px/700 · icon-btn 36×36 · surface · иконка 18 · count-badge 17px · gradient-brand · бордер card 2px

Чипы, статусы, бейджи

Только парные заливки: soft-pink→pink-dark, soft-tiffany→tiffany-text, soft-gold→gold-text, grey-soft→#999. Смешивать пары нельзя.

Хит продаж Открыто до 21:00 Премиум Закрыто

Хит Новинка −20% Эко 7 минут пешком

Сборка · Готов · Открыто Закрыто На модерации Приостановлен

stat-pill h28 · 12px/600 · soft-пара · badge-pill h20 · 10px/700 · фикс-подложка badge-* · filter-chip h36 · интерактив · active = gradient-brand + aria-pressed · lv-dot пульс 1.4s

Поля и контролы

Инпуты 44px, радиус 14px, фокус — ring-field. Поиск — капсула с ring-search. Ошибка — розовый бордер + подпись без вины (docs/11).

Название точки ТелефонПохоже, номер неполный — проверь последние цифры Роль Комментарий

Самовывоз Доставка

Уведомления о выплатах

search-bar h44 · капсула · focus: ring-search · f-field 14px · border 1.5 line · focus: pink + ring-field · error: подпись 11px · cbx 20px · check 12px stroke 3 · switch 42×24 · knob 20 · только transform · seg h30 · active: card + shadow-float · stepper h36 · val tabular-nums

Карточки

Радиус 16px, покой — shadow-soft, hover — shadow-lift + подъём 2px. Вся карточка кликабельна, бейдж — поверх медиа 8px/8px.

Заказы за неделю

128

▲ +12%к прошлой неделе

Средний чек

640 ₽

▼ −3%нужно внимание

btn-card radius 16 · cover 80 · tile-* 135° · hover: lift + translateY(−2px) · active: scale .97 · quick-btn 36 · gradient-brand · иконка 16 · promo-card soft-подложка · mini-капсула 20px · kpi v 19px/800 · tabular-nums · accent: kpi-soft + бордер pink .25

Списки и строки

Строка: иконка на soft-подложке 36px + заголовок + подпись + шеврон. Разделители строк — line-2, карточек — line, юр.блока — hairline.

--lv-line-2 · разделитель строк внутри карточки

--lv-hairline · тонкая линия (юр.блок, футеры)

row h~58 · разделитель line-2 · row-icon 36px radius 12 · chev 16px dim · district-row h56 · active: pink-бордер + soft-pink · danger — розовая пара, текст без вины

Обратная связь

Тост — инвертированная пара ink↔card, главная строка + подпись. Тексты — по матрице тона docs/11: без вины, глаголы, конкретика.

Загружаем витрину64%

Здесь пока пусто

Добавь первый товар — покажем его в корзине и напомним до конца акции.

toast ink↔card · radius 16 · shadow-toast · .d подпись toast-d · skeleton grey-soft · shimmer 1.4s · empty иконка 44 + заголовок 16/800 + перспектива + CTA · progress h6 · gradient-brand · sheet radius 24 · cubic-bezier(.32,.72,0,1) · закрытие: оверлей/Escape/действие

Контентные блоки

Готовые композиции из токенов: заголовок секции, плитки категорий, карта лояльности на gradient-ink, рейтинг, аватары, таймлайн, промокод, юр.блок.

Акции рядом Все

Карта лояльности

Кэшбэк до 15% в точках района

240 баллов ●Tiffany-статус

4.0 · 126 оценок

СМ

Сергей М.

Владелец · 3 точки

Помощник Лови

Ответит с 9:00 до 21:00

Заказ собран

Сегодня · 12:40

Курьер в пути

Прибудет около 13:20

Самовывоз

Пекарня «Колос» · до 21:00

section-head 16/800 + link-btn · tile radius 12 · иконка 26 · on-tile · glass-demo gradient-ink · chips white .1 · promo-code dashed line · градиентный текст · timeline hairline · done tiffany · now pink-пульс · legal hairline · dim 12px · без маркетинга

LOVII PAY

Профиль лояльности: карта LOVII PAY (flip по тапу, tilt и блики по курсору — на desktop), счёт, история операций, уровни PAY→PASS→VIP и привилегии. Канон 2026-09-12: у клиента ОДИН счёт — меняется только скин карты (PAY · PASS · VIP · BUSINESS). 1 балл = 1 ₽ · баллы не сгорают · вывод через СБП. Блики: пятно за курсором + живой свип-луч через карту при hover (v1.14.1).

Александра

+7 926 •••-45-67

LOVII PASS

Нажми — карта перевернётся Скопировать номер

Счёт и номер одни — переключи скин, чтобы посмотреть оформление

1 250 ₽₽

Баланс LOVII PAY · 1 балл = 1 ₽

323 ₽Кэшбек за месяц

14Покупки за месяц

3 400 ₽Выведено через СБП

Сегодня

Кэшбек · Пекарня «Слойка»

Слойка с вишней ×2

+38 ₽

Кофейня «Daily»

Капучино ×2 · оплата QR

−440 ₽

Оплата баллами · Цветы «Fresh»

Списано 250 баллов

−250 ₽

LOVII PAYLOVII PASSLOVII VIP

LOVII PASSпо подписке Лови

До уровня LOVII VIP — обороты ещё 181 600 ₽ (порог — 300 000 ₽ в месяц)

Статус представителя LOVIIВывод на карту 0% от 3 000 ₽Мерч ЛовиСпец-скидки у МСП

Мерч Лови

Эксклюзивные дропы для PASS и VIP

Закрытые мероприятия

Вечера района для своих

Спец-скидки у МСП

Свой процент у партнёров района

paycard скины: skin-pay графит/серебро · skin-pass ink/розовое свечение · skin-vip чёрное золото · skin-biz графит/тиффани — счёт и номер одни; pay-glare блик следит за курсором + pay-sweep живой свип-луч через карту при hover/tap (v1.14.1, off при reduce-motion) · flip .65s · tilt ±10° · номер 4-4-4-4 tabular, префикс 9643 · acct-card баланс 30/800 · h44 капсулы · tx-row иконка 36×36 soft-пара: in tiffany / buy pink / out gold · tier-levels кнопки-скины + tier-bar h6 gradient-gold · priv-card 168px в hscroll

Состояния

Единая сетка docs/09 §6 на одной кнопке и одном поле. Анимируются только transform и opacity; prefers-reduced-motion обязателен.

default · shadow-soft нет

hover · shadow-lift

active · scale .95

loading · блокировка

disabled · opacity .5

Focus — кликни

focus-visible · pink + ring-field

ОшибкаЧто исправить — подсказали под полем

error · pink-бордер + подпись

Каскад: 0.35s ease-out, шаг 0.06s

сетка состояний default / hover / active / focus-visible / disabled / loading / empty / enter — все обязательны, где применимы · reduce-motion: duration .01ms

Библиотека компонентов ДС LOVII · v1.13.0 · канон: lovii.mobiap.com · реестр набора и правила расширения — docs/12-components.md. Поток: lovii-design → lovii_demo → lovii-site.