liderra/portal
1
0
Fork 0
Code Issues Pull Requests Actions 91 Packages Projects Releases Wiki Activity
Files
b5cda8886d95c45df928df2a75804503d8bccc19
portal/docs/brandbook.md
T
Дмитрий b5cda8886d Restructure: split files into docs/web/db folders
2026-05-06 01:39:59 +07:00

24 KiB
Raw Blame History

Брендбук Лидпоток — 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.

<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">

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.

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)

: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-разработчика)

// 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 мм.

<?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 мм.

<?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 мм.

<?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).

<?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 масштабируется).

<?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

Reference in New Issue View Git Blame Copy Permalink