promo·radar · design
v01 · live 13 май 2026
// Дизайн-итерация 05 · 10 / 10 брифа №25 + P9 биллинг + P10 рефералы + P11 публичный лендинг партнёрам

Полный продукт promo-radar
от лендинга до партнёрской программы

Все 10 экранов из брифа №25 + 5 экранов биллинга (P9) + раздел «Рефералы» с диалогами (P10) + публичный /partners-лендинг с калькулятором + 3 OG-картинки (P11). Лендинг → вход → подключение → дашборд → правила → события → кабинеты → профиль → сообщество → биллинг → рефералы → партнёрский лендинг. Десктоп + мобильная лента, dark + light, theme-persistence через localStorage. Радар-метафора, cyan glow на hero и CTA, real RU-копирайт, реалистичные цифры. Готово к передаче в Claude Code по DESIGN.md.

Экранов
11 + 7
+ 3 OG-картинки
Темы
Dark · Light
dark по умолчанию
Шрифты
Inter · JBM
UI + tabular nums
Акцент
#06B6D4
cyan-500 / Tailwind

Партия 1 · Лендинг и дашборд

3 файла · все живые

Партия 2 · «Первый день» нового юзера

3 файла · вход → подключение → правило

Партия 3 · продуктовая глубина и работа со сообществом

4 файла · кабинеты → события → профиль → сообщество
Cabinets · Desktop

Кабинеты — список + детальный экран с табами

2-pane: слева список из 8 кабинетов с балансами, статусами (норма / 3 алерта / низкий баланс / пауза) и фильтр-пиллами. Справа — детальный экран «Пицца Тула» с 4 метриками, табами «Объявления / Правила / История» — таблица с авто-стопами, 4 rule-cards с z-формулой, timeline на 30 дней.

list + detail · 3 таба
Открыть
Events · Desktop

События — лента + детальная карточка с AI

Слева — feed с summary-картами и фильтрами по severity и кабинетам, severity-полоса слева. Справа — детальный экран события: saved-hero «+ 1 480 ₽», 8 snapshot-метрик, кастомный SVG-чарт расхода с ghost-проекцией «если бы не стоп», AI-блок с YandexGPT-объяснением и 6 actions-карточек.

feed + detail · z-score chart
Открыть
Settings · Notifications

Профиль и 5 каналов уведомлений

Sub-nav слева, account-card с tier-бейджем «Trial 11 дней», 5 каналов (Telegram развёрнут с severity-чипами, quiet hours, превью алерта; Email / VK / MAX / Web Push свёрнуты). Severity-матрица в таблице, аккаунт + 2FA + сессии, danger-zone, плавающий save-bar.

5 каналов · severity matrix
Открыть
Community · 3 таба

Тикеты, идеи, роадмап

3 переключающихся таба: Тикеты — chat-style с реальным разбором webhook-бага и attached-логом (color-coded); Идеи — Canny-style карточки с upvote и стадиями (investigating / planned / в работе); Роадмап — Kanban на 4 колонки (Изучаем / В плане / В работе / Уехало в прод) с progress-барами и shipped-стампами.

3 режима · Kanban 4 колонки
Открыть

Партия 4 · Реферальная программа

2 файла · панель + 3 модалки · P10
Profile · Referrals

Раздел «Рефералы» в ProfileView

4 KPI с cyan glow только на «Заработано», новый tier-bar (Bronze 25% → Silver 35% → Gold 45% → Platinum 50%) с прогрессом до следующего тира, реферальная ссылка + персональный промокод, таблица 12 рефералов с masked email и фильтрами (ссылка/промокод/UTM), баланс с CTA «Запросить вывод» и «Применить к подписке», история начислений на 8 операций. 6 состояний: loading skeleton / empty (0 рефералов) / empty payouts / empty promo / data / error inline.

6 состояний · 3 направления
Открыть
Dialogs · 3 модалки

Apply · Withdraw (2 шага) · Create promo

Apply — конвертация баланса в дни Pro с live-превью (3 200 ₽ → +32 дня) + error для суммы < 99 ₽. Withdraw — вариант А (вертикальный stepper в одной модалке): сумма → способ (Карта/СБП/Р/С) → налоговый статус (СЗ 4% / ИП 6% / Физлицо 13%) → реквизиты, плюс success-экран и альтернативный шаг 2 для СБП. Create promo — превью кода ИВАН3F1C8A2E + предупреждение «нельзя сменить».

3 модалки · 5 сцен · Dialog < 2 экранов
Открыть

Партия 5 · Публичный лендинг партнёрам + OG-images

1 файл + 3 OG-картинки · P11

Дизайн-решения

Ключевые выборы из брифа, которые читаются во всех трёх экранах. Конспект полностью в brand-spec.md рядом.

01 Радар-метафора

Концентрические круги в логотипе, развёртка-sweep в hero лендинга и дашборда, pulse-точка на «live»-индикаторах. Везде один и тот же визуальный язык, ничего не нарисовано «отдельно для иконки».

02 Hero-метрика глоу

«Защищено за месяц 23 450 ₽» — единственная цифра в дашборде с пульсирующим cyan text-shadow. Анимация 4с, дышит. Дублируется в sidebar-карточке и в mobile-hero.

03 Trial-countdown

В top-bar дашборда и в header мобильной ленты — оранжевый бейдж «Trial · 11 дней» с blink-точкой. На последних 3 днях — переход на красный класс .critical (готово в стилях).

04 Severity-полоса слева

На мобильных карточках событий слева 3px-border нужного цвета — critical/warning/info/ok. Быстрое сканирование пальцем, не нужно вчитываться в иконку.

05 Real Russian копирайт

«Доставка пиццы · Тула», «Стоматология Smile · Казань», «Курсы IELTS · Москва». CPL 280–2 080 ₽, CTR 0.4–2.8%, бюджеты в десятках тысяч. Никаких Test Account 1.

06 AI-объяснения

В дашборде — постоянный блок. На мобиле — раскрывающийся (250ms ease-out). Метаданные модели в нижней строке: время ответа, токены, request_id. Не выглядит «магией».

07 Theme-persistence

Тема пишется в localStorage по ключу promo-radar-theme на всех трёх экранах. Кликаешь toggle на лендинге — открываешь дашборд в той же теме.

08 Anti-AI-slop

Никакого glassmorphism, неоновых grids, мульт-иллюстраций, тяжёлых теней. Только 1px-borders, subtle elevation, cyan glow на акцентах, радар-анимации.