Лидерра. DEV HUB

Всё, что нужно разработчику для портала Лидерра.

Дизайн-система v8 Forest, 25 живых HTML-макетов, токены, компонентная библиотека и полный handoff. Production-ready по разметке, нужна только интеграция с реальными данными.

25 макетов 0 axe violations · WCAG 2.1 AA 14 OKLCH-статусов · ΔE2000 ≥ 10.57 4 viewports проверено · 1680/1440/768/375 v8 Forest · 2026-05-07

Бренд

01 · brand
Лидерра.
Имя
Лидерра (Liderra)
Wordmark
Лидерра. · с Teal-точкой
Знак
L-Square: белый rounded-square + dark stroke L + Teal-точка
Tone of voice
Уверенный, технический, прямой про деньги
Не использовать
«Лидпоток» (старое имя), lowercase «лидерра.»
Бренд-цвет
Teal #0F6E56 · oklch(0.46 0.10 175)
Bright variant
#32C8A9 · для иконок на тёмном sidebar
Палитра
Forest: warm ivory main + deep teal-noir sidebar

Дизайн-токены

02 · tokens
Все цвета через OKLCH с проверкой WCAG AA. Скопировать в assets/tokens.css и подключить глобально. Полный список — в handoff §3.
:root {
  /* Поверхности (Forest light) */
  --bg:            #F6F3EC;  /* page bg */
  --surface:       #FFFDFA;  /* карточки */
  --sunken:        #F0EDE4;
  --hairline:      #D9D5CD;
  --hairline-soft: #E8E3D6;

  /* Текст */
  --ink:           #081319;  /* 16.96:1 на bg */
  --ink-2:         #343C41;  /* 10.34:1 */
  --ink-3:         #66635C;  /* 5.42:1 */
  --ink-disabled:  #92907B;  /* 3.48:1 — для UI, не для текста */

  /* Бренд */
  --accent:        #0F6E56;  /* Teal · 5.94:1 на bg */
  --accent-tint:   #E1EEEA;
  --accent-deep:   #084635;

  /* Sidebar (тёмный) */
  --side-bg:        #012019;
  --side-text:      #B1C2BD;  /* 9.23:1 */
  --side-active:    #13382F;
  --side-icon-act:  #32C8A9;  /* bright Teal · 8.15:1 */
}

Поверхности и текст

bg
F6F3EC
surface
FFFDFA
sunken
F0EDE4
hairline
D9D5CD
ink
081319
ink-2
343C41
ink-3
66635C

Бренд и sidebar

accent
0F6E56
accent-deep
084635
accent-tint
E1EEEA
side-bg
012019
side-active
13382F
side-text
B1C2BD
side-icon-act
32C8A9

14 статусов воронки

03 · status palette · ΔE2000 ≥ 10.57
OKLCH-распределённые solid цвета для status-dots. Repulsion-итерация в palette_14.py гарантирует ΔE2000 ≥ 10 между соседними парами — статусы визуально различимы даже при цветовой слепоте средней степени.
Новая
#B94837
В работе
#B35100
Дозвон
#9A6700
Не дозвон.
#7E7500
Переговоры
#538200
КП отправл.
#008A4D
Думает
#008C7E
Ждёт оплату
#00889B
Оплачено
#007EB8
Возврат
#406DC8
Отказ
#6C60C4
Дубликат
#9052AE
Спам
#AA4788
Архив
#B7445F

25 макетов

04 · screens · все 0 axe violations

Кабинет тенанта (8)

02 · /dashboard Дашборд KPI strip · Hero balance с runway · Activity chart · Funnel · Recent deals · System health · Quick actions PROD-READY Открыть макет 03 · /deals Список сделок Таблица 14 строк · 14 status-chips · sticky thead · selected-row solid fill · slide-over drawer открыт PROD-READY Открыть макет 04 · /deals/{id} Карточка сделки Hero + параметры + комментарий с 8 шаблонами + напоминание · aside: менеджер + метрики + history (timeline) PROD-READY Открыть макет 05 · /deals/kanban Канбан-доска 14 колонок DnD (виртуализация-ready) · карточки с иконками 🔥 / ⏰ / ✓ · optimistic UI PROD-READY Открыть макет 06 · /billing Биллинг и тарифы Кошелёк ₽ · ГЦК баланс лидов · runway · pending-banner · история транзакций · счета и УПД (1С 8.3 XML) PROD-READY Открыть макет 07 · /settings Настройки 8 вкладок · Профиль · Безопасность · Проекты · Команда · API/Webhook · Интеграции · Тихие часы · Уведомления PROD-READY Открыть макет 08 · /reports Отчёты Форма запроса · 4 типа · 4 формата · jobs (done / running с progressbar / queued / failed + retry) · квота 2/3 PROD-READY Открыть макет 01 · /login и др. Вход / Регистр / 2FA 5 состояний: login · register с zxcvbn · 2FA (6-cell код) · forgot password · 8 recovery codes PROD-READY Открыть макет

Экраны ошибок (3)

09 · 404 Не найдено Декоративный SVG-маркер · кнопки «На дашборд» / «Назад» · mailto support PROD-READY 10 · 403 Нет доступа Replace-key SVG · REQ-id для копирования · контакт поддержки PROD-READY 11 · 500/503 Сервис недоступен Status-list (API/Telegram/YooKassa) · INC-id · ссылка на status page PROD-READY все 3 Switcher Открыть файл с переключателем между состояниями Открыть

Админка SaaS (6) · admin.liderra.app

12 · /admin/login SSO Yandex 360 Yandex 360 primary + локальный 2FA fallback · rate-limit 5/15 · captcha PROD-READY 13 · /admin/tenants Список тенантов 142 тенанта · фильтры · 4 статус-чипа (active/trial/overdue/suspended) · MRR · желаем×факт PROD-READY 14 · /admin/tenants/{id} Карточка тенанта Профиль · баланс · корректировки · impersonation · удаление 152-ФЗ · журнал действий PROD-READY 15 · impersonation Войти как клиент Красный sticky banner · спец. avatar «Админ → ИП» · обязательный reason PROD-READY 16 · /admin/incidents Журнал инцидентов HIGH/MED/LOW · read-only для compliance · webhook timeout / RLS bypass / payment retry PROD-READY 17 · /admin/system System settings 6 sys-cards: settings/tariffs/legal/payment/webhook_log/auth_log · только super_admin PROD-READY

Лендинг и юр. (4)

18 · / Главная Hero + 3 hi-cards · 6 features · 4 tariffs · FAQ · footer (контент Lorem ipsum, Диз-4 закрыт) PROD-READY 19 · /pricing Тарифы 4 заглушки · Start/Basic/Команда POPULAR/Enterprise · цены 1.00 ₽ на MVP PROD-READY 20 · /legal/offer Договор-оферта TOC · 8 разделов · шаблон Прил. Ж · ждёт регистрации ООО (Б-1) PROD-READY 21 · /legal/privacy Политика TOC · 10 разделов · 152-ФЗ compliant · Yandex Cloud РФ PROD-READY

Документация

05 · docs
📘 HANDOFF Developer Handoff Главный документ. Стек, архитектура, токены, типографика, компоненты, все 25 экранов, WCAG-правила, Vue 3 + Vuetify 3 mapping, API hints, тестирование, FAQ. Открой первым. Открыть 🎨 BRAND Brandbook v2 Имя, лого, палитра, типографика, do/don't, голос бренда, использование Teal #0F6E56. Деприкейтит старый брендбук Лидпоток v1.1. Открыть BR-1 10 имён + 5 логотипов (архив) Все варианты, рассмотренные при выборе. Лидерра + L-Square — финальный выбор. Открыть BR-2 5 палитр на выбор (архив) А Graphite · Б Forest (выбран) · В Slate-Blue · Г Champagne · Д Inverted Hero. Архив выбора палитры. Открыть

Технические артефакты

06 · scripts & sources
.py · OKLCH palette_v7.py Расчёт всех cool-tech токенов с WCAG-проверкой. Python 3 + colour-science. Базовая палитра (унаследована Forest). .py · OKLCH palette_14.py 14 hue-распределённых статусов с repulsion-итерацией. min ΔE2000 = 10.57. min/max/mean — выводит в console. .py · OKLCH palette_options.py 5 вариантов палитры (А/Б/В/Г/Д) с side-by-side WCAG verification всех ключевых пар. .py · audit v4_critic.py Критика старого v4 (cream + Instrument Serif). Контрасты, ΔE2000 между chip-фонами. Архив.