Лоялти

Бренд-бук

Визуальная идентичность платформы Лоялти

Логотип

Лоялти

Основной

Лоялти

На тёмном фоне

Лоялти

Иконка

Правила использования

  • Минимальный размер иконки: 24px
  • Минимальный отступ вокруг логотипа: 50% от высоты
  • Не растягивать, не поворачивать, не менять цвета
  • На тёмном фоне — только белый вариант

Палитра цветов

Primary — Violet

50

#f5f3ff

100

#ede9fe

200

#ddd6fe

300

#c4b5fd

400

#a29bfe

500

#8b5cf6

600

#6c5ce7

700

#5b47d0

800

#4c3aad

900

#3b2d8b

Accent — Coral

400

#ff8787

500

#ff6b6b

600

#ee5a5a

Семантические

Success

#00b894

Warning

#fdcb6e

Error

#ff6b6b

Dark

#1a1a2e

Градиенты

gradient-primary

gradient-warm

gradient-dark

Типографика

Шрифт

Inter

system-ui, -apple-system, Segoe UI, Roboto, sans-serif

H1 / 36

Карты лояльности нового поколения

H2 / 24

Кэшбек, баллы и штампы

H3 / 18

Настройте программу за 5 минут

Body / 14

Платформа для бизнеса, которая помогает удерживать клиентов через цифровые карты лояльности в Apple Wallet и Google Wallet.

Caption / 12

Доступно на всех устройствах

Насыщенность

Regular 400 — для основного текста

Medium 500 — для подписей и навигации

Semibold 600 — для кнопок и акцентов

Bold 700 — для заголовков

Кнопки

Анимации

Fade In Up

Контент страниц

Fade In Scale

Модалки, карточки

Float

Декоративные элементы

Pulse Glow

CTA кнопки

Stamp Pop

Штампы

Shimmer

Скелетон загрузки

Hover Lift

Карточки (hover)

Hover Scale

Мелкие элементы

Timing functions

ease-out-expo — основные анимации (плавное замедление)

ease-spring — интерактивные элементы (с отскоком)

stagger-children — каскадная задержка для списков

Компоненты

Бейджи

Кэшбек 5% Активна Сгорает через 7 дн Неактивна

Stat-карточки

Всего карт

1,247

Выручка сегодня

₽ 84K

Активных клиентов

892

Транзакций

3,450

Уведомления

Баллы начислены: +150
Недостаточно баллов для списания

Карта в Wallet (превью)

Текстура Кофе

Баллы

200

Кэшбек

3%

Штампы

7/10

Тени и скругления

shadow-sm

Инпуты

shadow-md

Карточки

shadow-lg

Модалки

shadow-glow

Акценты

radius-sm

8px

radius-md

12px

radius-lg

16px

radius-xl

24px