portal/liderra_v8_handoff/docs/BRANDBOOK_v2.md

Лидерра · Brandbook v2

Версия: v8 Forest · 2026-05-07 Заменяет: Лидпоток v1.1 (deprecated, см. дизайн/02_Brand_i_A11y.md — устаревшие данные).

---

1. Имя

«Лидерра» (кириллица). Латиница — Liderra (для домена liderra.app).

1.1. Wordmark

Лидерра. — обязательно с точкой в конце. Точка покрашена в bright Teal:

• На светлом фоне — #0F6E56 (базовый Teal)
• На тёмном sidebar — #32C8A9 (bright Teal, accent для dark)

1.2. Происхождение

«Лидерра» — составное: «лид» (lead, английская калька) + «эра» (epoch, временной период) или «терра» (земля). Сохраняет смысловую связь с устаревшим «Лидпоток», но звучит дороже и менее буквально. Сравнение архива — v8_brand.html.

1.3. Что нельзя

• ❌ «Лидпоток» — старое имя, deprecated с 2026-05-07
• ❌ лидерра. lowercase
• ❌ LIDERRA UPPERCASE (кроме случаев типа <small caps>)
• ❌ Замена точки на восклицательный знак / другую пунктуацию

---

2. Логотип

2.1. Знак — L-Square с Teal-точкой

Белый rounded-square 22×22px (или ratio 11:11), внутри L-stroke 4.5px (тёмный) + Teal-точка r=3.5 в правом нижнем углу, на месте «приземления» лида.

Inline SVG (skopirovat) — для тёмного sidebar

<svg viewBox="0 0 48 48" width="22" height="22" aria-hidden="true">
  <rect x="2" y="2" width="44" height="44" rx="10" fill="#FFFFFF"/>
  <path d="M16 14 L16 34 L32 34"
        stroke="#012019" stroke-width="4.5"
        stroke-linecap="round" stroke-linejoin="round" fill="none"/>
  <circle cx="32" cy="34" r="3.5" fill="#0F6E56"/>
</svg>

Inline SVG — для светлого фона (тёмный квадрат)

<svg viewBox="0 0 48 48" width="22" height="22" aria-hidden="true">
  <rect x="2" y="2" width="44" height="44" rx="10" fill="#0A1319"/>
  <path d="M16 14 L16 34 L32 34"
        stroke="#FFFFFF" stroke-width="4.5"
        stroke-linecap="round" stroke-linejoin="round" fill="none"/>
  <circle cx="32" cy="34" r="3.5" fill="#32C8A9"/>
</svg>

Favicon (упрощённая версия — без рамки, без точки)

<svg viewBox="0 0 48 48" width="32" height="32">
  <rect width="48" height="48" rx="8" fill="#0F6E56"/>
  <path d="M16 14 L16 34 L32 34"
        stroke="#FFFFFF" stroke-width="5.5"
        stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>

2.2. Защитное поле

Минимум 8px со всех сторон от знака до любого другого элемента. Внутри clear-зоны не должно быть никакого текста или графики.

2.3. Минимальный размер

• Знак — 16×16px (favicon-режим, без точки)
• Знак с точкой — 22×22px (sidebar-режим, минимум)
• Wordmark «Лидерра.» — 14px font-size минимум

2.4. Размещение wordmark

Знак + 10px gap + Wordmark — классическое горизонтальное расположение в sidebar/topbar/lending-header.

В sidebar (тёмный фон):

<div class="brand">
  <span class="brand-mark">[SVG]</span>
  <span class="brand-text">Лидерра<span class="brand-dot">.</span></span>
</div>

.brand-text { color: #FFFFFF; font-weight: 600; font-size: 14.5px; font-variation-settings: 'opsz' 18; }
.brand-dot  { color: #32C8A9; }  /* bright Teal */

2.5. Что нельзя

• ❌ Менять цвета знака, обводку L-stroke, радиус square
• ❌ Поворачивать, скашивать, искажать пропорции
• ❌ Добавлять тени, градиенты, обводки, outer-glow
• ❌ Использовать на фоне фотографии без поднятой непрозрачной плашки
• ❌ Уменьшать ниже минимального размера
• ❌ Окрашивать L-stroke в не-фирменный цвет
• ❌ Использовать L-stroke без Teal-точки на размерах ≥ 24px (точка обязательна для distinctness)

2.6. Архив отвергнутых вариантов

См. v8_brand.html. Финальный выбор: имя «Лидерра» + знак A · L-Square (после сравнения 10 имён + 5 SVG-знаков).

---

3. Палитра — Forest

3.1. Происхождение

После критики предыдущих палитр («слишком белый, всё сливается») построено 5 вариантов в OKLCH (см. palette_options.py). Выбран Б · Forest Sidebar — глубокий теало-нуар sidebar (родственник брендового Teal) + warm ivory main.

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

Token	HEX	OKLCH (~)	Применение	Контраст vs ink
--bg	#F6F3EC	0.965/0.010/90	Page background (warm ivory)	—
--surface	#FFFDFA	0.995/0.005/90	Карточки, поднятые поверхности	—
--sunken	#F0EDE4	0.945/0.012/90	Table thead, sunken zones	—
--hairline	#D9D5CD	0.875/0.012/85	1px borders	—
--hairline-soft	#E8E3D6	—	Внутренние дивайдеры строк	—
--ink	#081319	0.18/0.020/230	Primary text	16.96:1 ✓
--ink-2	#343C41	0.35/0.014/240	Secondary	10.34:1 ✓
--ink-3	#66635C	0.51/0.012/90	Muted (≥4.5:1)	5.42:1 ✓
--ink-disabled	#92907B	0.62/0.008/90	UI components / disabled	3.48:1 ✓ (для UI, не для текста)

Все контрасты подтверждены axe-core 4.10.2 на 25 макетах.

3.3. Brand accent — Teal

Token	HEX	Применение	Контраст
--accent	#0F6E56	Primary brand	5.94:1 на bg ✓
--accent-tint	#E1EEEA	Selection / chip-tinted background	—
--accent-deep	#084635	Hover / active state	8.06:1 на bg ✓
--side-icon-act	#32C8A9	Bright Teal — accent на dark sidebar	8.15:1 на side-bg ✓

Нельзя оспаривать без явного OK заказчика — это брендовый цвет (зафиксирован Диз-2 от 04.05.2026).

3.4. Sidebar — глубокий teal-noir

Token	HEX	OKLCH (~)	Применение
--side-bg	#012019	0.22/0.040/175	Sidebar background
--side-text	#B1C2BD	0.80/0.020/175	Nav-item text (9.23:1 на side-bg ✓)
--side-text-2	#7A8C87	—	Nav-eyebrow muted
--side-active	#13382F	0.31/0.045/175	Selected item fill
--side-icon	#5C7A72	—	Idle icon
--side-icon-act	#32C8A9	0.75/0.13/175	Active icon (bright Teal)
--side-hover	#0A2A22	—	Hover background
--side-border	#1A3A30	—	1px border

3.5. Sidebar↔Main контраст = 15.46:1

Это решение жалобы «всё сливается» — теперь sidebar отчётливо отделён от main по светлоте.

3.6. 14 статусов воронки — OKLCH с ΔE2000 ≥ 10.57

Цвета распределены по hue-кругу с repulsion-итерацией для гарантии перцептивной различимости (см. palette_14.py). Каждый статус имеет 2 варианта: solid (для dot) и tint (для chip background).

#	Статус	Solid	Tint	Hue (°)
1	Новая	#B94837	#FFD8CF	30.7
2	В работе	#B35100	#FFDBC4	51.2
3	Дозвон	#9A6700	#F6E2BC	84.3
4	Не дозвонились	#7E7500	#E9E8BD	106.1
5	Переговоры	#538200	#D9EDC6	130.0
6	КП отправлено	#008A4D	#C7F0D7	157.7
7	Думает	#008C7E	#BCF1E9	185.5
8	Ждёт оплату	#00889B	#BAF0F6	205.5
9	Оплачено	#007EB8	#C0ECFF	231.2
10	Возврат	#406DC8	#D1E5FF	262.5
11	Отказ	#6C60C4	#E1E0FF	286.1
12	Дубликат	#9052AE	#F2DAFF	313.7
13	Спам	#AA4788	#FFD7EE	343.1
14	Архив	#B7445F	#FFD6DD	8.8

min ΔE2000 = 10.57, max = 14.34, mean = 12.91 (между соседними solid-парами).

3.6.1. Mapping slug → имя → OKLCH (audit P1-05)

Связывает 14 schema-slug'ов из db/schema.sql:2172-2186 (INSERT lead_statuses) с 14 OKLCH-цветами из §3.6. Источник истины по slug'ам и каноническому name_ru — schema.sql; по перцептивно-различимым OKLCH-цветам — этот brandbook. Имена в §3.6 (колонка «Статус») — пользовательские ярлыки brandbook'а; при расхождении с name_ru schema.sql приоритет — schema (см. CLAUDE.md §1).

slug (schema)	name_ru (schema)	OKLCH-cell §3.6 (имя в brandbook)
new	Новые	#1 (Новая)
viewed	Просмотрено	#2 (В работе)
worked	Проработан	#3 (Дозвон)
base	База	#4 (Не дозвонились)
missed	Недозвон	#5 (Переговоры)
negotiations	Переговоры	#6 (КП отправлено)
waiting_payment	Ожидаем оплаты	#7 (Думает)
partnership	Партнерка	#8 (Ждёт оплату)
paid	Оплачено	#9 (Оплачено)
closed	Закрыто и не реализовано	#10 (Возврат)
test_drive	Тест драйв	#11 (Отказ)
hot	Горячий	#12 (Дубликат)
replacement	На замену	#13 (Спам)
final_missed	Конечный недозвон	#14 (Архив)

Cell-номера ссылаются на позиции (#1..#14) в таблице §3.6, не на точные hex-значения. При изменении slug'ов в db/schema.sql (CLAUDE.md §5 п.8) — обновить эту таблицу одновременно с db/CHANGELOG_schema.md. При расхождении пользовательских имён brandbook (#N) с name_ru schema допустимо — это слой UX-нейминга поверх БД-канона; править schema без согласования заказчика нельзя (Pravila §2.2).

---

4. Типографика

4.1. Шрифты

Шрифт	Применение	Лицензия
Inter (variable, opsz 14..32)	Весь UI, заголовки, body	OFL — free, кириллица full
JetBrains Mono (400/500/600)	Numerics, code, ID, timestamps	Apache 2.0 — free, кириллица full

Подключение

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">

4.2. Шкала размеров

Применение	font-size	weight	opsz	letter-spacing	line-height
Hero h1 (лендинг)	56px	600	32	-0.03em	1.05
Page title	28px	600	28	-0.02em	1.1
Section h2	22px	600	24	-0.018em	1.15
Card title	16px	600	18	-0.012em	1.3
Body	13-14px	400	14	-0.005em	1.5
Eyebrow / label	11.5px	500	14	letter-spacing 0.005em	1.4
Mono numeric	12.5px	500	—	-0.005em	1.4
Caption	11px	500	14	0.005em	1.4

4.3. opsz axis (важно)

Inter 4.0+ имеет ось opsz (optical size) — один файл с двумя «режимами»:

• font-variation-settings: 'opsz' 14 — UI режим (mid-weight, оптимизирован для мелкого текста)
• font-variation-settings: 'opsz' 28 — display режим (более тонкие штрихи, оптимизирован для крупного текста)

Это обязательно для финальной полировки — без переключения opsz большие заголовки будут читаться как «жирный body».

4.4. Numerics — везде JBM с tnum

Все числа (цены, балансы, ID, timestamp, телефоны, KPI-значения) — обязательно:

font-family: var(--font-mono);
font-feature-settings: 'tnum';  /* tabular figures */

Без tnum цифры в столбцах не выравниваются — таблицы и счета смотрятся неаккуратно.

4.5. Что нельзя

• ❌ Использовать Inter weight 100/200/800/900 (не подключены)
• ❌ Использовать text-shadow, font-style: oblique (применять italic через variation)
• ❌ Использовать любой другой шрифт без явного утверждения дизайнером

---

5. Иконки

• Lucide (open-source, free) — основной набор для UI
• Inline SVG — для бренд-знака и декоративных illustrations (404/403/500)
• Все размеры — кратные 4: 11/13/15/18/22/26/32px
• stroke-width: 1.6-1.7 для UI иконок
• stroke-linecap: round + stroke-linejoin: round обязательно
• Цвет — currentColor (наследует от родителя)
• aria-hidden="true" для декоративных, aria-label="..." для функциональных

---

6. Spacing — 4px-base

Шкала: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 / 80px

Применение	Значение
Внутренние plotno gap	4-8px
Padding кнопок / chip	8-14px
Padding карточек	12-22px
Gap между секциями	16-24px
Page padding desktop	32px
Hero padding (лендинг)	56-80px

---

7. Радиусы

Token	Value	Применение
--r-xs	4px	nav-count, kbd, mini-badges
--r-sm	6px	кнопки, инпуты, nav-items
--r-md	10px	карточки, секции, табли
--r-lg	14px	hero-cards, лендинг-блоки
—	50%	аватары
—	100px	full-pill chips

Нельзя: 8px, 12px (между sm и md — только используем кратные шкалы выше).

---

8. Тени — НЕ используем

В Forest отказываемся от теней. Глубина — только 1px hairline borders.

Исключения (только эти, не больше):

• Drawer (slide-over): box-shadow: -16px 0 40px rgba(10,19,25,0.10);
• KPI-card hover (опционально): box-shadow: 0 2px 6px rgba(10,19,25,0.04);
• Modal/dialog backdrop: background: rgba(10,19,25,0.18); backdrop-filter: blur(2px);

Если разработчик сомневается — не добавлять box-shadow, использовать border: 1px solid var(--hairline).

---

9. Tone of voice

9.1. Что мы говорим

• «Поток лидов под контролем» — слоган
• «Pay-per-lead, прозрачно» — value proposition
• «Каждый рубль в дело» — про деньги
• Прямые формулировки про затраты, ROI, retry-стратегии

9.2. Что мы НЕ говорим

• ❌ «Эстетичное решение»
• ❌ «Бесшовный пользовательский опыт»
• ❌ «Премиум»-категория без обоснования
• ❌ «Инновационный подход»
• ❌ «Экосистема» / «синергия» / «ноу-хау»
• ❌ Англоязычные термины без перевода (используем «лид» вместо «lead», «сделка» вместо «deal»)

9.3. Числа важнее эпитетов

Вместо «быстрый webhook» — «webhook за 142ms (медиана)». Вместо «надёжный uptime» — «99.97% за 7 дней». Все маркетинговые claims должны быть проверяемы.

---

10. Голос юр. документов

Оферта и Политика конфиденциальности — формальный официальный русский, без англицизмов. Всё измерено в рублях, не в долларах. ИП/ООО, не Inc/Ltd. Дата — DD.MM.YYYY (не Mon DD, YYYY).

См. макеты v8_landing.html#offer и v8_landing.html#privacy — там lorem ipsum в местах нерелевантных юр. шаблону, остальной текст реальный.

---

11. Применение бренда — где можно использовать

Контекст	OK	Нельзя
Sidebar app-кабинета	✅ Лидерра. + L-square	—
Топ публичного сайта	✅ Лидерра. + L-square (тёмный)	—
Email signature	✅ Лидерра. + L-square (16px)	Логотип-only без wordmark
Favicon	✅ Упрощённая Teal-square версия	Полный знак (мелковато)
Splash screen	✅ Большой L-square 80px + wordmark 28px	—
Социальные сети (avatar 400×400)	✅ Teal-square с белой буквой	Знак на белом фоне (не виден)
OG image (соц. preview)	✅ Лидерра. + tagline + URL	Без брендинга (looks generic)
Печатные материалы	Pantone эквивалент Teal — на согласовании	Конвертация в CMYK без проверки

---

12. Изменение бренда

Любое изменение этого документа требует:

1. Согласование с заказчиком (Дмитрий)
2. Обновление docs/DEVELOPER_HANDOFF.md
3. Обновление token files (assets/tokens.css)
4. Регрессия по 25 макетам (axe-core)

---

13. Откуда что взято — источники решений

• Палитра Forest: 5 вариантов в palette_options.py (А Graphite / Б Forest / В Slate-Blue / Г Champagne / Д Inverted Hero), выбран Б 2026-05-07
• L-Square знак: 5 концептов в v8_brand.html, выбран знак A
• Имя Лидерра: 10 вариантов в v8_brand.html, выбран #10
• 14 OKLCH-статусов: расчёт в palette_14.py, repulsion-итерация
• Bright Teal #32C8A9: производное от брендового Teal #0F6E56 — тот же hue 175, поднят до L=0.75 для контраста на тёмном sidebar (8.15:1)
• Inter (opsz axis): рекомендация по 21st.dev premium B2B SaaS reference, проверено через WebSearch (2026-05-07)

Архив deprecated брендов:

• v1.1 Лидпоток + 3-circle wordmark — отвергнут заказчиком 2026-05-06
• v4-v6 концепты cream + Instrument Serif — устарели после критики «слишком тёплый» 2026-05-07
• v7 cool-tech light — устарел после критики «слишком белый, всё сливается» 2026-05-07

---

Конец BRANDBOOK_v2.md. Source of truth для бренда. При расхождении с любым другим документом — верить этому.