Primary
#FF6B6B
- Primary 500: coral CTA
- Hover: warm red coral
- Light: soft peach tint
Tokens
Цветовая система
Базовая палитра объединяет небесные, кремовые и фруктовые оттенки. Primary отвечает за действия, secondary поддерживает мягкий UI-контекст, accent создает эмоциональные точки притяжения.
Secondary
#5EC8F8
- Secondary 500: sky brand tone
- Hover: ocean blue
- Light: milk blue background
Accent
#FFD166
- Accent 500: sunny highlight
- Accent alt: lime freshness
- Accent dark: berry purple break
Нейтральные фоны
Cream
Blush
White
Системные цвета
Success
Warning
Error
Info
Контентные цвета
Text
Muted
Panel
Typography
Типографика
Заголовки должны быть округлыми и эмоциональными, основной текст - дружелюбным и читаемым. Для UI-меток используется более плотное начертание с компактной посадкой.
Заголовки
H1. Яркий детский оффер
H2. Секция с преимуществами
H3. Карточка или контентный блок
Текст
Lead. Используется для вводных абзацев, текстовых hero-блоков и пояснений рядом с CTA.
Body. Базовый текст для карточек товара, форм, списков преимуществ и контентных описаний.
Caption. Подписи, метки, статусы, вспомогательные тексты.
Шрифтовые роли
App Components
Карточки товаров
Карточки должны быть чище промо-блоков, но все еще дружелюбными по форме. Важны крупный продуктовый визуал, заметная цена, статусные бейджи, быстрый CTA и hover-состояние с quick action.
-20%
OptiMeal KIDS
Multivitamins Berry Mix
1 290 ₽
1 590 ₽
new
OptiMeal KIDS
My Little Hero Gummies
1 490 ₽
1 690 ₽
нет в наличии
OptiMeal KIDS
Chewable Vitamins Apple
1 190 ₽
Forms
Формы
Поля ввода должны оставаться крупными, читаемыми и дружелюбными. Форма поддерживает checkout, подписку, обратную связь и быстрые действия в карточках каталога.
Поля ввода
Состояния формы
Badges & Chips
Бейджи
Бейджи используются для статусов товара, промо-сообщений, фильтров и интерфейсных маркеров. Они должны быть компактными, округлыми и хорошо различимыми даже в плотных карточках каталога.
Статусные бейджи
sale
new
hit
info
stock
outline
Фильтры и chips
Counter badge
3
Interaction
Состояния элементов
Hover и active-состояния должны усиливать ощущение живого бренда через мягкое смещение, тень и цветовой отклик. При этом интерактивность не должна превращать UI в шумный.
Buttons
Default
Hover
Active
Product card
Default
Спокойное состояние карточки
Hover
Легкое поднятие и quick action
Form controls
Focused
Success
Error