# Лидерра · 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`](../concepts/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

```html
<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 — для светлого фона (тёмный квадрат)

```html
<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 (упрощённая версия — без рамки, без точки)

```html
<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 (тёмный фон):

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

```css
.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`](../concepts/v8_brand.html). Финальный выбор: имя «Лидерра» + знак A · L-Square (после сравнения 10 имён + 5 SVG-знаков).

---

## 3. Палитра — Forest

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

После критики предыдущих палитр («слишком белый, всё сливается») построено 5 вариантов в OKLCH (см. [`palette_options.py`](../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`](../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 |

#### Подключение

```html
<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-значения) — обязательно:

```css
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](../concepts/v8_landing.html#offer) и [v8_landing.html#privacy](../concepts/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`](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`](../concepts/v8_brand.html), выбран знак A
- **Имя Лидерра**: 10 вариантов в [`v8_brand.html`](../concepts/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 для бренда. При расхождении с любым другим документом — верить этому.*
