# Брендбук Лидпоток — 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 ``` ```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` (масштабируемые), `` и `<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>Лидпоток — полный логотип Три круга нарастающего размера слева направо в зелёно-бирюзовой палитре, рядом название кириллицей Лидпоток ``` ### 9.2. `lidpotok-logo-mono.svg` — монохромная версия Чёрный (`#1A1A1A`) на белом фоне. Используется в печатных счетах, договорах, факсе, ч/б распечатках. Минимальная ширина: 100 px / 25 мм. ```svg Лидпоток — монохромная версия Логотип в чёрном цвете для печати на документах, счетах и факсе Лидпоток ``` ### 9.3. `lidpotok-logo-dark.svg` — версия для тёмного фона Светлая палитра (Mint 200/300/400 + белый текст) для admin-панели в dark mode, баннеров на тёмной плашке. Минимальная ширина: 120 px / 30 мм. ```svg Лидпоток — белая версия для тёмного фона Логотип в белом цвете для использования на тёмном фоне Лидпоток ``` ### 9.4. `lidpotok-icon.svg` — иконка без текста Только знак (3 круга в Teal палитре). Используется в аватаре, в кружке tabbar, в ячейке таблицы. Размер 24×24 px / 6×6 мм. Также для растеризации в PNG-аватары (1024×1024). ```svg Лидпоток — иконка Три круга нарастающего размера в зелёно-бирюзовой палитре ``` ### 9.5. `lidpotok-favicon.svg` — favicon с фон-плашкой Оптимизирован для отображения в малом размере. Имеет фоновую плашку Teal 600 со скруглёнными углами (`rx=6`) — обеспечивает контраст в любой теме браузера. Размер 32×32 px (через `viewBox` масштабируется). ```svg Лидпоток — favicon Иконка для browser tab, favicon во всех размерах ``` ### 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*