Top.Mail.Ru
— BRANDBOOK · 2026

AI007.io

Дизайн-система: палитра, типографика, компоненты. Светлая и тёмная темы синхронизируются между всеми страницами сайта.

— 01 · ЛОГОТИП

Логотип

Базовый знак — точка-блоб (10–64px) в фирменном градиенте. На светлой — violet→amber, на тёмной — lavender→pink→amber (aurora). Используем в навигации, кнопках, hero-блоке.

LIGHT BG · DEFAULT
DARK BG · AURORA DOT
AURORA BG · INVERT
— 02 · ПАЛИТРА · LIGHT

Светлая тема

Основная палитра. Violet — главный акцент, amber — вторичный. Tекст и mute задают читаемость на белом фоне.

VIOLET
Violet
#6E4BFF
AMBER
Amber
#FFB547
WB MAGENTA
WB Magenta
#CB11AB
WB PURPLE
WB Purple
#7B2FBE
BG
Background
#FAFAFC
TEXT
Text
#1A1530
MUTED
Muted
#6B6485
— 03 · ПАЛИТРА · DARK + AURORA

Тёмная тема — Aurora

Фоновая база — deep plum. Все яркие акценты на тёмной собраны в единый 5-stop градиент Aurora: lavender → cyan → teal → mint → pink. Используется в шиммерах, кнопках, шкалах, чат-бабблах, прогрессе скролла.

#A78BFA
lavender #4DD4FF
cyan #00E0D8
teal #2DD4BF
mint #FF8AE2
pink
BG
Background
#0F0420
BG-2
Background-2
#150029
TEXT
Text
#E8E6F0
MUTED
Muted
#9A94AD
LINK
Link
#B69DFF
— 04 · ГРАДИЕНТЫ

Градиенты и свечения

Основные градиенты сайта — кнопки, badges, фоны акцентных карточек.

PRIMARY · LIGHT
linear-gradient(135deg, #6E4BFF, #7B2FBE)
PRIMARY · DARK · AURORA
linear-gradient(135deg,#A78BFA,#4DD4FF 30%,#00E0D8 55%,#2DD4BF 75%,#FF8AE2)
FOUNDERS BADGE
linear-gradient(135deg,#FCD34D,#F59E0B)
RADAR ORB · LEGACY MAGENTA
linear-gradient(135deg,#FFE066,#FF6BC0,#C61DA8,#7B2FBE)
— 05 · ТИПОГРАФИКА

Типографика

Три семейства: Bricolage Grotesque для заголовков и hero, Inter для основного текста, JetBrains Mono для метаданных, цифр, kicker-лейблов.

H1 · Bricolage Grotesque
700 / 56px / wdth 90
ИИ-агент для WB
H2 · Bricolage Grotesque
700 / 32px / wdth 92
Один агент = команда специалистов
H3 · Bricolage Grotesque
600 / 22px
Маркетолог
Paragraph · Inter
400 / 16px / lh 1.65
Подключается к кабинету, контролирует цены, остатки, карточки, рекламу и отзывы — и сам делает или предлагает действие на ваше подтверждение.
Small · Inter
400 / 13px
Возврат денег 3 дня · Серверы РФ · Шифрование AES-256
Mono · JetBrains Mono
500 / 13px / tracking +0.04em
01 · РЕШЕНИЕ · 29 900 ₽/мес
— 06 · КНОПКИ

Кнопки

Pill-кнопки 12px×22px, радиус 999px, transition translate-y -1 при hover. На тёмной primary автоматически становится aurora-градиентом.

Подключить за 29 900 ₽ Смотреть тарифы Задать вопрос в Telegram
— 07 · BADGES & PILLS

Бэйджи и пилюли

Все бейджи моно-шрифт, верхний регистр, tracking +0.06em.

Хит Founders v 1.0 Beta · по приглашениям
— 08 · КАРТОЧКИ

Карточки

Border 1px var(--border), radius 16px, hover — translateY(-3px) + violet/lavender glow.

01

Маркетолог

Контроль ставок и ДРР каждые 30 минут. Авто-биддер по правилам сезона.

02

Логист

Прогноз остатков и алерт за 4–5 дней. Календарь поставок FBO/FBS.

03

Аналитик

Чистая прибыль до рубля по SKU. Сверка с кабинетом WB и НДС.

— 09 · ТОН ГОЛОСА

Tone of voice

Сайт говорит коротко, по-делу, без маркетингового шума. От первого лица «мы», ты-обращение по умолчанию, иногда с лёгкой иронией.

✓ ТАК ГОВОРИМ
  • «Подключение автоматическое — без заявок и звонков»
  • «Если за 3 дня не увидите эффекта — вернём деньги»
  • «Один чат вместо десятка вкладок WB»
  • Конкретные цифры: «157 шт/день», «+312 400 ₽», «3.5 дня»
✗ ТАК НЕ ГОВОРИМ
  • «Инновационное решение нового поколения»
  • «Уникальная синергия искусственного интеллекта»
  • «Революционная платформа для бизнеса»
  • Размытое: «улучшение метрик», «оптимизация процессов»
— 10 · РАЗДЕЛИТЕЛИ

Шиммер-разделители

1px анимированный градиент с mask-fade на края. Ping-pong анимация 7s, синхронизирована между секциями. На тёмной — aurora, на светлой — violet/pink/amber.

background: linear-gradient(90deg, transparent, lavender, cyan, teal, pink, transparent)
mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)
animation: 7s ease-in-out infinite alternate