portal/docs/brandbook.md

# Брендбук Лидпоток — v1.1

**Дата:** 04.05.2026.
**Применимость:** SaaS-платформа Лидпоток (CRM для обработки лидов от партнёров с pay-per-lead биллингом).
**Назначение:** единый источник правды для дизайнера, frontend-разработчика, маркетолога, бухгалтера, юриста.

> Этот файл — часть архива документации v8.3. Закрывает Диз-2 (логотип, брендинг). Используется в связке с **Приложением Л** (дизайн-система фронтенда, готовится в Диз-1) и **§26 narrative** (UX/Frontend).
>
> **v1.1 (05.05.2026):** SVG-исходники логотипа интегрированы inline в §9 в рамках оптимизации архива v8.3++ optimized. Отдельные `.svg`-файлы из архива удалены — их содержимое скопировать из §9.1–9.5.

---

## 1. Название

**Лидпоток** — кириллицей, **одно слово**, **без пробела и дефиса**.

| Контекст | Написание |
|---|---|
| Заголовок, подвал сайта, логотип | `Лидпоток` |
| Транслит для домена и URL | `lidpotok` |
| Английская версия (для международных контактов) | `Lidpotok` |
| Email-домены | `@lidpotok.ru` (после регистрации домена) |

**Запрещено:**
- ❌ `Лид Поток` (с пробелом)
- ❌ `Лид-поток` (с дефисом)
- ❌ `ЛИДПОТОК` (капс)
- ❌ `LeadFlow` или другие переводы (название не переводится)

**Род:** мужской («Лидпоток помогает», «Лидпоток вырос»).

---

## 2. Логотип

### 2.1. Структура

Логотип состоит из двух элементов:
- **Знак** — три круга нарастающего размера в зелёно-бирюзовой палитре. Метафора: поток лидов от больших к малым (или, при чтении справа налево, нарастающий поток).
- **Текстовая часть** — название «Лидпоток» шрифтом Inter Bold (см. §4).

### 2.2. Версии

| Файл | Назначение | Минимальный размер |
|---|---|---|
| `lidpotok-logo-full.svg` | Основной — для веба, шапки сайта, документов, презентаций | ширина 120px / 30 мм |
| `lidpotok-icon.svg` | Иконка без текста — для аватара, в кружке tabbar, в ячейке таблицы | 24×24 px / 6×6 мм |
| `lidpotok-logo-mono.svg` | Чёрно-белая версия — для печатных счетов, договоров, факса | ширина 100px / 25 мм |
| `lidpotok-logo-dark.svg` | Светлая версия для тёмного фона — admin-панель в dark mode, баннеры | ширина 120px / 30 мм |
| `lidpotok-favicon.svg` | Favicon — оптимизирован для отображения в малом размере (есть фон-плашка) | 16×16 px |

### 2.3. Защитное поле (clear space)

Вокруг логотипа должно быть свободное пространство **не меньше высоты буквы Л** в текстовой части. Никакие графические элементы не должны заходить в это поле.

### 2.4. Что нельзя делать с логотипом

- ❌ Менять цвета знака на другие
- ❌ Изменять пропорции (растягивать, сжимать)
- ❌ Поворачивать
- ❌ Добавлять обводки, тени, градиенты, эффекты
- ❌ Помещать на сложный фоновый паттерн (без подложки)
- ❌ Использовать растровую (PNG, JPG) версию там, где можно SVG
- ❌ Переводить текстовую часть (`LeadFlow`, `Lidpotok` — нельзя)

### 2.5. Что можно

- ✅ Использовать только знак (без текста) при достаточной узнаваемости
- ✅ Использовать монохром на чёрно-белых документах
- ✅ Менять размер с сохранением пропорций
- ✅ Помещать на однородный фон (белый, светло-серый, тёмный, бирюзовый)

---

## 3. Палитра

### 3.1. Основные цвета (фирменная палитра Teal)

| Слот | Имя | HEX | RGB | Применение |
|---|---|---|---|---|
| 900 | Teal 900 | `#04342C` | `4, 52, 44` | Текст на бирюзовых фонах, заголовки в брендовом стиле |
| **600** | **Teal 600 — primary** | **`#0F6E56`** | **`15, 110, 86`** | **Основной цвет бренда**: текст логотипа, ключевые акценты, primary-кнопки |
| 400 | Teal 400 | `#1D9E75` | `29, 158, 117` | Средний круг знака, hover-состояния, второй уровень акцентов |
| 200 | Teal 200 | `#5DCAA5` | `93, 202, 165` | Большой круг знака, легкие акценты, badges |
| 100 | Teal 100 | `#9FE1CB` | `159, 225, 203` | Подложки, info-блоки, состояния success на тёмном |
| 50 | Teal 50 | `#E1F5EE` | `225, 245, 238` | Backgound для info/success-блоков, фон tooltip |

### 3.2. Нейтральная палитра

Используются нейтральные оттенки серого для текстов и фонов. Базируются на стандартной гамме Tailwind/Vuetify Slate-Gray.

| Слот | HEX | Применение |
|---|---|---|
| 900 | `#1A1A1A` | Основной текст (заголовки, body) на светлом фоне |
| 700 | `#444441` | Secondary текст |
| 500 | `#888780` | Tertiary текст, captions, placeholder |
| 300 | `#B4B2A9` | Disabled-состояния, тонкие границы |
| 200 | `#D3D1C7` | Границы input-полей, разделители |
| 100 | `#F1EFE8` | Фон страницы, фон disabled-кнопок |
| 50 | `#FAFAF8` | Фон карточек на светлом фоне страницы |
| 0 | `#FFFFFF` | Базовый белый — фон карточек, modal, popup |

### 3.3. Семантические цвета

Стандартные оттенки для смысловых состояний (не из брендовой палитры).

| Назначение | Light HEX | Dark HEX | Применение |
|---|---|---|---|
| Success | `#22C55E` | `#15803D` | Подтверждения, «оплачено», «выполнено» |
| Warning | `#F59E0B` | `#B45309` | Предупреждения, «истекает срок» |
| Danger | `#EF4444` | `#B91C1C` | Ошибки, «отказано», «удалить» |
| Info | `#3B82F6` | `#1D4ED8` | Информационные сообщения |

### 3.4. Контрастность WCAG

Все комбинации текст/фон должны соответствовать минимум WCAG 2.1 AA (4.5:1 для body, 3:1 для крупного текста).

| Комбинация | Контраст | WCAG |
|---|---|---|
| Teal 600 на белом | 6.42:1 | AA ✅ |
| Teal 600 на Teal 50 | 6.05:1 | AA ✅ |
| Белый на Teal 600 | 6.42:1 | AA ✅ |
| Teal 200 на белом | 2.31:1 | ❌ — НЕ использовать для текста |

---

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

### 4.1. Основной шрифт — Inter

**Inter** (open-source, Google Fonts). Поддерживает кириллицу, имеет полный набор weights, оптимизирован для UI.

```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:wght@400;500;600;700&display=swap&subset=cyrillic" rel="stylesheet">
```

```css
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
```

### 4.2. Иерархия

| Стиль | Размер | Weight | Line height | Применение |
|---|---|---|---|---|
| Display | 48px | 700 (Bold) | 1.1 | Hero-заголовки лендинга |
| H1 | 32px | 700 (Bold) | 1.2 | Заголовки страниц |
| H2 | 24px | 600 (SemiBold) | 1.3 | Разделы внутри страницы |
| H3 | 20px | 600 (SemiBold) | 1.4 | Подразделы, заголовки карточек |
| H4 | 16px | 600 (SemiBold) | 1.4 | Заголовки в списках, аналитика |
| Body | 14px | 400 (Regular) | 1.5 | Основной текст |
| Body Large | 16px | 400 (Regular) | 1.6 | Параграфы лендинга |
| Caption | 12px | 400 (Regular) | 1.4 | Подписи, hint, footnote |
| Code | 13px | 400 (Regular) | 1.5 | Inline-код, JSON-payload, ID |

### 4.3. Шрифт для кода

**JetBrains Mono** — для отображения JSON, API-ответов, ID транзакций, технической информации в админке SaaS.

```css
font-family: 'JetBrains Mono', Menlo, Monaco, Consolas, monospace;
```

---

## 5. Размерная сетка и отступы

Базовая единица — **4px**. Все отступы кратны 4: 4, 8, 12, 16, 24, 32, 48, 64.

| Назначение | Значение |
|---|---|
| Padding кнопки small | 8 / 16 |
| Padding кнопки medium | 12 / 20 |
| Padding кнопки large | 16 / 24 |
| Padding карточки | 16 / 20 / 24 |
| Gap в Flex/Grid | 8 / 12 / 16 |
| Высота input | 40px |
| Высота кнопки medium | 40px |
| Border-radius small | 6px |
| Border-radius medium | 8px |
| Border-radius large | 12px |
| Border-radius pill | 999px |

---

## 6. Тон коммуникации (voice & tone)

### Голос бренда

- **Дружелюбный, но не панибратский.** «Здравствуйте» — да, «Привет, дружок» — нет.
- **Профессиональный, но не сухой.** Коротко, по делу, без бюрократизмов («произвести оплату» → «оплатить»).
- **Уверенный, но не агрессивный.** «Мы решили эту задачу» — да, «Только мы можем!» — нет.
- **Прозрачный.** Не скрываем оговорки. Если есть условие — пишем явно.

### Примеры

| Контекст | ✅ Да | ❌ Нет |
|---|---|---|
| Подтверждение пополнения | «Баланс пополнен на 1 000 ₽. Списано: 0 лидов. Осталось: 20 лидов.» | «Платёж проведён успешно!» |
| Ошибка авторизации | «Не получилось войти. Проверьте email и пароль.» | «Ошибка авторизации (код 401)» |
| Отказ от лида | «Не хватает баланса. Пополните счёт, чтобы принимать новые заявки.» | «Платёж отклонён» |
| Письмо при регистрации | «Привет, [имя]. Спасибо, что выбрали Лидпоток.» | «Уважаемый клиент, благодарим за регистрацию!» |

---

## 7. Применение в продукте

### 7.1. Веб-приложение

- **Логотип:** в шапке (top-left, высота 32px). Полная версия с текстом.
- **Favicon:** 32×32 SVG.
- **Primary-кнопки:** Teal 600 фон + белый текст.
- **Secondary-кнопки:** прозрачный фон + Teal 600 граница и текст.
- **Ссылки:** Teal 600, hover — Teal 400 с подчёркиванием.

### 7.2. Email-шаблоны

- **Header:** Teal 600 фон, логотип белой версии (logo-dark.svg).
- **Body:** белый фон, текст Slate 900, ссылки Teal 600.
- **Кнопка CTA:** Teal 600 фон, белый текст, padding 12/24.
- **Footer:** Slate 100 фон, текст Slate 700 (12px).

### 7.3. PDF-документы (счета, УПД, договоры)

- **Логотип:** монохромная версия (logo-mono.svg) в верхнем-левом углу.
- **Шрифт:** Inter (если есть в системе) или PT Sans как fallback.
- **Цвета:** только чёрный текст на белом фоне (печать), без бирюзового — для экономии тонера и кросс-факсимильной читаемости.

### 7.4. Социальные сети

- **Аватар:** favicon в формате 1024×1024 (растеризовать SVG).
- **Обложка:** Teal 600 фон + белый логотип + слоган (определить отдельно).

---

## 8. Интеграция в код

### 8.1. CSS-переменные (для frontend)

```css
:root {
  /* Brand */
  --color-brand-primary: #0F6E56;
  --color-brand-primary-hover: #1D9E75;
  --color-brand-primary-active: #04342C;
  --color-brand-light: #5DCAA5;
  --color-brand-bg: #E1F5EE;

  /* Neutral */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #444441;
  --color-text-tertiary: #888780;
  --color-bg-page: #F1EFE8;
  --color-bg-card: #FFFFFF;
  --color-border-default: #D3D1C7;

  /* Semantic */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --color-info: #3B82F6;

  /* Typography */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', Menlo, Monaco, Consolas, monospace;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
}
```

### 8.2. Vuetify 3 темa (для Vue-разработчика)

```js
// theme.js
import { createVuetify } from 'vuetify'

export default createVuetify({
  theme: {
    defaultTheme: 'lidpotokLight',
    themes: {
      lidpotokLight: {
        dark: false,
        colors: {
          primary: '#0F6E56',
          'primary-darken-1': '#04342C',
          'primary-lighten-1': '#1D9E75',
          secondary: '#5DCAA5',
          background: '#F1EFE8',
          surface: '#FFFFFF',
          'on-primary': '#FFFFFF',
          'on-surface': '#1A1A1A',
          success: '#22C55E',
          warning: '#F59E0B',
          error: '#EF4444',
          info: '#3B82F6',
        },
      },
      lidpotokDark: {
        dark: true,
        colors: {
          primary: '#5DCAA5',
          'primary-darken-1': '#1D9E75',
          'primary-lighten-1': '#9FE1CB',
          secondary: '#9FE1CB',
          background: '#1A1A1A',
          surface: '#2C2C2A',
          'on-primary': '#04342C',
          'on-surface': '#FFFFFF',
          success: '#15803D',
          warning: '#B45309',
          error: '#B91C1C',
          info: '#1D4ED8',
        },
      },
    },
  },
})
```

---

## 9. Исходники логотипа (inline SVG)

В рамках оптимизации архива v8.3++ optimized 05.05.2026 SVG-файлы логотипа интегрированы прямо в брендбук. Frontend-разработчик копирует нужный блок из соответствующего раздела ниже в свой проект, сохраняя как `.svg`-файл с указанным именем (имена сохранены — это тот же контент).

**Замечание для frontend:** все SVG используют `viewBox` (масштабируемые), `<title>` и `<desc>` для accessibility. Цвета вшиты в `fill` — для тематизации (CSS `color` вместо `fill`) можно заменить hex-значения на `currentColor` после копирования.

### 9.1. `lidpotok-logo-full.svg` — основной логотип

Знак (3 круга нарастающего размера) + текст «Лидпоток». Используется в шапке сайта, документах, презентациях, email-подписи. Минимальная ширина: 120 px / 30 мм.

```svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 60" width="240" height="60">
  <title>Лидпоток — полный логотип</title>
  <desc>Три круга нарастающего размера слева направо в зелёно-бирюзовой палитре, рядом название кириллицей</desc>
  <g transform="translate(8, 18)">
    <circle cx="6" cy="12" r="5" fill="#0F6E56"/>
    <circle cx="22" cy="12" r="8" fill="#1D9E75"/>
    <circle cx="44" cy="12" r="11" fill="#5DCAA5"/>
  </g>
  <text x="72" y="38" font-family="Inter, -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif" font-size="22" font-weight="600" fill="#0F6E56">Лидпоток</text>
</svg>
```

### 9.2. `lidpotok-logo-mono.svg` — монохромная версия

Чёрный (`#1A1A1A`) на белом фоне. Используется в печатных счетах, договорах, факсе, ч/б распечатках. Минимальная ширина: 100 px / 25 мм.

```svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 60" width="240" height="60">
  <title>Лидпоток — монохромная версия</title>
  <desc>Логотип в чёрном цвете для печати на документах, счетах и факсе</desc>
  <g transform="translate(8, 18)">
    <circle cx="6" cy="12" r="5" fill="#1A1A1A"/>
    <circle cx="22" cy="12" r="8" fill="#1A1A1A"/>
    <circle cx="44" cy="12" r="11" fill="#1A1A1A"/>
  </g>
  <text x="72" y="38" font-family="Inter, -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif" font-size="22" font-weight="600" fill="#1A1A1A">Лидпоток</text>
</svg>
```

### 9.3. `lidpotok-logo-dark.svg` — версия для тёмного фона

Светлая палитра (Mint 200/300/400 + белый текст) для admin-панели в dark mode, баннеров на тёмной плашке. Минимальная ширина: 120 px / 30 мм.

```svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 60" width="240" height="60">
  <title>Лидпоток — белая версия для тёмного фона</title>
  <desc>Логотип в белом цвете для использования на тёмном фоне</desc>
  <g transform="translate(8, 18)">
    <circle cx="6" cy="12" r="5" fill="#5DCAA5"/>
    <circle cx="22" cy="12" r="8" fill="#9FE1CB"/>
    <circle cx="44" cy="12" r="11" fill="#E1F5EE"/>
  </g>
  <text x="72" y="38" font-family="Inter, -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif" font-size="22" font-weight="600" fill="#FFFFFF">Лидпоток</text>
</svg>
```

### 9.4. `lidpotok-icon.svg` — иконка без текста

Только знак (3 круга в Teal палитре). Используется в аватаре, в кружке tabbar, в ячейке таблицы. Размер 24×24 px / 6×6 мм. Также для растеризации в PNG-аватары (1024×1024).

```svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
  <title>Лидпоток — иконка</title>
  <desc>Три круга нарастающего размера в зелёно-бирюзовой палитре</desc>
  <g transform="translate(4, 22)">
    <circle cx="6" cy="12" r="5" fill="#0F6E56"/>
    <circle cx="22" cy="12" r="8" fill="#1D9E75"/>
    <circle cx="44" cy="12" r="11" fill="#5DCAA5"/>
  </g>
</svg>
```

### 9.5. `lidpotok-favicon.svg` — favicon с фон-плашкой

Оптимизирован для отображения в малом размере. Имеет фоновую плашку Teal 600 со скруглёнными углами (`rx=6`) — обеспечивает контраст в любой теме браузера. Размер 32×32 px (через `viewBox` масштабируется).

```svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
  <title>Лидпоток — favicon</title>
  <desc>Иконка для browser tab, favicon во всех размерах</desc>
  <rect width="32" height="32" rx="6" fill="#0F6E56"/>
  <circle cx="9" cy="22" r="2.5" fill="#5DCAA5"/>
  <circle cx="16" cy="19" r="3.5" fill="#9FE1CB"/>
  <circle cx="23" cy="14" r="4.5" fill="#E1F5EE"/>
</svg>
```

### 9.6. Что нужно ещё сгенерировать перед запуском (вне Claude)

- `favicon.ico` (16/32/48 px) — растеризовать `lidpotok-favicon.svg` через https://realfavicongenerator.net.
- `apple-touch-icon.png` (180×180) — для iOS-bookmark, на основе `lidpotok-favicon.svg`.
- `og-image.png` (1200×630) — для open graph (соц. сети), на основе `lidpotok-logo-full.svg` + слоган.
- Lottie-анимация загрузки на основе знака — опционально, для UX-полировки.
- Печатные шаблоны фирменного бланка, визитки — после регистрации юр. лица (Б-1).

### 9.7. История файлов SVG

В архиве v8.3++ (до оптимизации) SVG-файлы лежали отдельно: `lidpotok-logo-full.svg`, `lidpotok-logo-mono.svg`, `lidpotok-logo-dark.svg`, `lidpotok-icon.svg`, `lidpotok-favicon.svg`. В оптимизированной версии v8.3++ optimized содержимое этих файлов перенесено в этот брендбук inline (см. §9.1–9.5). Frontend получает SVG копированием из markdown.

## 10. Версионирование и обновления

**v1.0 (04.05.2026)** — Исходный брендбук. Закрывает Диз-2. Утверждён в сессии планирования v8.2.1.

**v1.1 (05.05.2026)** — SVG-исходники логотипа (5 файлов) интегрированы inline в §9.1–9.5 в рамках оптимизации архива (объединение 6 файлов брендинга в 1). Содержимое всех 5 SVG сохранено без изменений — только перенесено в раздел `## 9. Исходники логотипа (inline SVG)`. Старый §9 «Файлы» (список имён) заменён.

**Последующие изменения:**
- Любые правки палитры, шрифтов, логотипа, тона коммуникации — через явный апдейт версии (v1.1, v2.0).
- Изменения сохраняются в этом файле в разделе «История изменений».
- Старые версии файлов (SVG) сохраняются в подкаталоге `/legacy/` для обратной совместимости.

---

*Конец документа brandbook.md v1.1*