Логотип
AvtoAppAvtoAppТолько иконка (min 32px)Цветовая палитра
Primary — Violet
Фирменный цвет. Используется как акцент: eyebrow, ссылки, иконки, hover-состояния. НИКОГДА как фон секции целиком.
Accent — Yellow
ТОЛЬКО для primary CTA. Нельзя как декор или фон.
Surfaces
Фоны секций. Только 3 режима: white / soft / dark.
Text
Иерархия текста — от основного до приглушенного.
Semantic
Статусные цвета для success/error/warning/info.
Фоны и поверхности
Правило: используются только 3 режима фона секций — white, soft, dark. Никаких градиентов в качестве фона секции. Dark (#0E0E12) применяется ОДИН разна страницу — как «theatre moment».
Типографика
Кнопки и элементы управления
Карточки
Горячая линия и юридическая помощь круглосуточно.
Выезд к вашему авто — меняем резину прямо на месте.
Скачайте AvtoApp и оформите заказ за 2 минуты.
Радиусы и отступы
Border Radius
Spacing Scale
Сетка и контейнеры
⚠ Важно: в проекте только 2 breakpoint'а — mobile: и desktop:. Стандартные tailwind sm: / md: / lg: / xl: не работают (см. tailwind.config.ts). Для кастомного responsive — либо этих два, либо @media в globals.css.
Ритм секций
Каждая страница строится из секций с чередующимися фонами. В центре или в конце — один dark theatre moment. Остальное — чистая альтернация white ↔ soft.
Пример ритма главной страницы
Тон и язык
Принципы: короткие глаголы в будущем времени («приедем», «поменяем»). Без канцелярита и отглагольных существительных. Польза клиенту — на первом месте. Числа — всегда цифрами: 20–40 мин, 200+ городов, 4.8 из 5.