v1.10.0
Дизайн-система LOVII

Единый язык Лови для всех продуктов

Живой гайд канонических токенов: lovii.mobiap.com — источник истины. Переключите тему в шапке — все образцы ниже собраны на тех же токенах, что и прод. Значения: tokens/tokens.css и tokens/design-tokens.json, правила: docs/.

Канон: lovii.mobiap.com Обновлено: 2026-09-04 Версия v1.10.0
Бренд

Логотип

Оба варианта всегда в DOM, видимость переключает [data-theme] через CSS — без JS-состояния (docs/05). Канон тёмного: assets/logo-dark.svg, md5 145731d8…, идентичен lovii-logo-black.svg. Файл lovii-logo-dark.svg (высветленный) удалён из канона и не должен возвращаться.

LOVII light
lovii-logo-light.svg · светлая тема
LOVII dark
logo-dark.svg · тёмная тема · md5 145731d8…
Токены

Цвет

Три акцента на тёплой нейтральной базе. Акценты не меняются между темами — темы перекрашивают только поверхности, текст и бордеры. В коде — только var(--lv-*). Таблицы ниже читают значения прямо из tokens.css — копий значений в гайде нет, рассинхрон исключён (v1.4.1).

Брендовые (не зависят от темы)

Светлая тема

Тёмная тема

Правило soft-пар: soft-pink→pink-dark, soft-tiffany→tiffany-text, soft-gold→gold-text, grey-soft→#999. Текст на градиентах — только on-brand.

Токены

Типографика

Один шрифт — Inter (400–800). Заголовочный вес — 800. Никаких других семейств и весов.

h1-hero · 26px · 800 · 1.22
≥640px — 32px · ls −0.01em
Всё нужное в шаговой доступности
h1-screen · 18px · 800
Магазин у дома
h2-section · 16px · 800
Акции рядом
name · 14px · 700 · 1.35
Свежая выпечка из пекарни на углу
body · 14px · 400 · 1.6 · dim
Покажем точки и товары в шаговой доступности: наличие в каждой точке и минуты пешком.
control · 13px · 600
Все категории
secondary · 12px · 600
7 минут пешком · до 18:00
meta · 11px · 600
Обновлено сегодня в 14:20
kicker · 10.5px · 800 · caps · +0.1em
Лояльность
price · 16px · 800
249 ₽ 320 ₽
kpi · 19px · 800 · ls −0.02em
128 заказов
Форма

Радиусы и тени

Контролы — всегда капсулы 999px, карточки — 16px. Тень — сигнал интерактивности: покой soft, наведение lift. Наведите на карточки ниже.

999 pill
24 sheet
20 premium
16 card
14 tab
12 tile
shadow-soft0 1px 3px rgba(26,26,26,.06)
shadow-lift0 12px 32px −12px rgba(201,42,106,.22)
shadow-nav0 12px 32px −12px rgba(26,26,26,.28)
shadow-toast0 12px 32px −12px rgba(201,42,106,.35)
Компонент

Кнопки

Градиент 135° только у primary-CTA. Hover — shadow-lift, нажатие — scale .95. Состояния проверяются живьём: наведите и зажмите.

Смотреть все
Компонент

Пилюли, статусы, бейджи

Только парные заливки (soft → *-text). Точка статуса — .lv-dot с пульсом 1.4s.

Хит продаж Открыто до 21:00 Премиум Закрыто
7 минут пешком Открыто Закрыто Хит Новинка −20% Эко
Сборка · Готов · На модерации Приостановлен
Карта лояльности
Кэшбэк до 15% в точках района
240 баллов ● Tiffany-статус Glass 10% white
Компонент

Поля и поиск

Инпуты 44px, радиус 14–999px, фокус — ring-field (4px розовая ореола) или ring-search у поиска. Кликните в поля.

Компонент

Карточки

Hover: подъём на 2px + shadow-lift + scale эмодзи 1.1. Тон-подложки категорий — канонные плитки 135°.

● Успей до вечера
Кофе + круассан = 199 ₽
Кофейня «Дым» · 5 минут пешком
Заказы за неделю
128
▲ +12%к прошлой неделе
Средний чек
640 ₽
▼ −3%нужно внимание
Поведение

Шиты, тосты, движение

Шит: cubic-bezier(.32,.72,0,1) 0.3s, оверлей 0.25s, Escape закрывает. Тост — инвертированная пара ink↔card.

Пульс точки 1.4s · парение декора .lv-float 5s · вход контента 0.35s ease-out
<!-- Anti-FOUC: в <head> ДО CSS. Канон docs/05-theming --> (function () { try { var t = localStorage.getItem('lovii_theme'); // ключ канона if (t !== 'dark' && t !== 'light') { t = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; } document.documentElement.dataset.theme = t; // только <html> } catch (e) { document.documentElement.dataset.theme = 'light'; } })();
Бренд

Тон и тексты

Голос один для всех ролей, тон меняется по ситуации. Канон — docs/11-brand-voice.md, живая подача — examples/07-voice-lab.html.

Пять принципов голоса

На «ты» — «Покажем точки рядом», не «Уважаемый пользователь»
Короче — лучше — тост = одна строка + подпись
Глаголы действия — «Скопировать ссылку», не «Здесь можно…»
Конкретика — «7 минут пешком · до 18:00», не «рядом»
Без вины — что случилось + что делать, без «!» и капса

Быстрые правила

Кнопка — глагол без точки, ≤18 знаков, не «ОК»/«Да»
Заголовки sentence case; КАПС — только кикеры
Эмоджи запрещены (пр.11); «!» — не более 1 на экран
Числа: «249 ₽», «до 18:00», «7 мин пешком», tabular-nums
Юр.блок — нейтральный тон, полные даты, без маркетинга

Пустое состояние — всегда формула: иконка + заголовок + тело с перспективой + кнопка. Маскот i-bear — только в дружелюбных сценах, не в ошибках и деньгах.

Компонент

Полная библиотека

Полный набор живёт в examples/08-components.html: 9 групп, 60+ демо со состояниями, в обеих темах. Реестр набора и порядок расширения — docs/12-components.md. Выше — базовые образцы; ниже — вход в библиотеку.

Открыть библиотеку · 9 групп Реестр docs/12