@wasrusgen1
CRM
Руководство по фирменному стилю
Управление бизнес-процессами · Версия 2026
01 · Логотип
Система логотипа
Логотип состоит из трёх элементов: знак @wasrusgen1, вертикальный разделитель и слово CRM на Montserrat 700. Три варианта для разных фонов.
Светлый фон
@wasrusgen1CRM
Основное применение
Тёмный фон
@wasrusgen1CRM
Тёмные поверхности
Градиент
@wasrusgen1CRM
Промо-материалы
Система суббрендов
РАДАР
Зонтичный бренд
CRM
Мебельная сеть
ЭКСПЕРТ
Консультации
Правила использования
Используй на чистом фоне
Белый, тёмный #111827, или фирменный градиент РАДАР
Соблюдай охранную зону
Минимум 16px пространства вокруг логотипа с каждой стороны
Минимальный размер
26px высота на экране / 36px при печати
Не меняй пропорции
Не растягивай логотип — только масштабирование с сохранением пропорций
Не меняй цвета знака
Знак @ только в #003E7E (светлый) или #4338CA / белый (тёмный)
Не используй на пёстром фоне
Фотографии, текстуры, паттерны — только в frame с однотонным фоном
Варианты применения
CRM
Шапка Telegram MiniApp
Акцентный фон #003E7E. Вордмарк белый 92% + CRM Montserrat 700. Стандартное расположение — шапка экрана.
CRM
Экран авторизации
Градиент РАДАР #1E1B4B→#4338CA. Логотип центрирован, белый. Только на экране входа.
CRM
Документы / Акты / PDF
Белый фон, цвет #003E7E. Печатные документы, шапка договора, акт сборки.
CRM
Тёмная тема (Dark Mode)
Фон #1F2937. Инвертированный логотип, белый 85%. Ночной режим, AMOLED-экраны.
Недопустимые варианты
@w1 | CRM
✕ Произвольный цветной фон
✕ Искажение пропорций
@wasrusgen1 | CRM
✕ Логотип на паттерне/текстуре
@wasrusgen1 | CRM
✕ Другой шрифт + запрещённый фон
Два варианта логотипа
Используются оба — выбор зависит от контекста носителя. Не смешивать в одном носителе.
⚠ Правило: если в носителе использован стэк — горизонталь в том же носителе не дублируется, и наоборот.
02 · Цветовые темы
Три цветовые темы CRM
Каждая тема адаптирована для конкретного контекста. По умолчанию используется основная тема. Тема Dark — для ночного режима.
По умолчанию
Тема основная
Сборка #1146В
Петров А.В.
В работе
Сборка #1144А
Иванов С.К.
Готово
Замер #892
Новая Купчинская 5
Ожидание
--accent
#003E7E
Primary
--accent2
#76BD22
Secondary
--bg
#F5F6F8
Page BG
--ink
#1A1A2E
Main text
Суббренд РАДАР
Тема РАДАР CRM
Сборка #1146В
Петров А.В.
В работе
Сборка #1144А
Иванов С.К.
Готово
Замер #892
Новая Купчинская 5
Ожидание
--accent
#4338CA
Indigo 700
--accent2
#6366F1
Indigo 500
--bg
#F9FAFB
Neutral 50
--ink
#111827
Anthracite
Ночной режим
Тема Dark
Сборка #1146В
Петров А.В.
В работе
Сборка #1144А
Иванов С.К.
Готово
Замер #892
Купчинская 5
Ожидание
--accent
#4338CA
Indigo 700
--bg
#111827
Anthracite
--card
#1F2937
Neutral 800
--ink
#F9FAFB
Light text
Семантические цвета · едины для всех тем
Success
#10B981
bg #ECFDF5
Warning
#F59E0B
bg #FFFBEB
Danger
#EF4444
bg #FEF2F2
Info
#3B82F6
bg #EFF6FF
03 · Типографика
Шрифтовая система
Montserrat 700 — исключительно для логотипа. Inter 300–800 — весь интерфейсный текст. Оба шрифта подключены через Google Fonts.
Montserrat · только логотип
РАДАР CRM
Использование: логотип РАДАР / CRM / ЭКСПЕРТ
700
Bold
800
ExtraBold
Inter · весь UI текст
Добрый день
Использование: весь интерфейс, данные, метки
300Light
400Regular
500Medium
600SemiBold
700Bold
800ExtraBold
Шкала размеров · мобильный 390px
Добрый день, Руслан
Приветствие, hero
Список сборок
Заголовок страницы
Клиенты
Раздел, секция
Сборка #1146В
Карточка, модал
Основной текст интерфейса
Параграфы, описания
Вспомогательный текст
Подписи, meta
МЕТКИ РАЗДЕЛОВ
Section labels
Правило: Montserrat используется ТОЛЬКО для логотипов РАДАР / CRM / ЭКСПЕРТ. Весь остальной текст в интерфейсе — Inter.
04 · UI-компоненты
Мобильные компоненты
Все компоненты построены на основной теме (--accent #003E7E). Border-radius 12–16px, отступы кратны 4px.
Кнопки
8px 14px · 13px
14px · 15px
16px · 17px
Карточки
● Info
Замер #892
Новая Купчинская, 5 · кв. 47
● Success
Сборка завершена
Подписан акт 21.05.2026
● Warning
Недостаток деталей
Петли 110° — 4 шт. в пути
● Danger
Клиент недоволен
Требует повторный выезд
Статус-бейджи
В работе
Ожидание
Завершено
Отменено
Черновик
Padding: 4px 10px · Border-radius: 100px · Font: 12px/600 · Dot: 5×5px circle перед текстом
Поля ввода
Фамилия Имя Отчество полностью
Focus state: border #003E7E
Договор не найден в системе
Нижняя навбара
Height: 60px · Backdrop-filter: blur(12px) · FAB: 52px circle, выступает на 18px · 5 элементов
Таймлайн событий
Сборка #1146В · История
Заявка создана
19 мая · 14:32
Диспетчер Мария В.
Замер проведён
20 мая · 10:15
Замерщик Алексей К.
Сборка начата
21 мая · 09:00
Сборщик Иван П. · В работе
Подписание акта
Ожидается
05 · Дизайн-токены
CSS-переменные
Полная таблица токенов для трёх тем и семантических цветов. Переключение темы через атрибут data-theme на body.
| Токен | @wasrusgen1 CRM | РАДАР CRM | Dark | Назначение |
|---|---|---|---|---|
| --accent | #003E7E |
#4338CA |
#4338CA |
Primary action |
| --accent2 | #76BD22 |
#6366F1 |
#6366F1 |
Secondary accent |
| --bg | #F5F6F8 |
#F9FAFB |
#111827 |
Page background |
| --card | #FFFFFF |
#FFFFFF |
#1F2937 |
Card surface |
| --ink | #1A1A2E |
#111827 |
#F9FAFB |
Main text |
| --muted | #8A94A6 |
#6B7280 |
#9CA3AF |
Secondary text |
| --danger | #EF4444 |
#EF4444 |
#EF4444 |
Error / Alert |
| --warn | #F59E0B |
#F59E0B |
#F59E0B |
Warning |
| --success | #10B981 |
#10B981 |
#10B981 |
Positive |
CSS — определения тем
/* Тема: основная (default) */
body[data-theme="zov"] {
--accent: #003E7E;
--accent2: #76BD22;
--bg: #F5F6F8;
--card: #FFFFFF;
--ink: #1A1A2E;
--muted: #8A94A6;
}
/* Тема: РАДАР CRM */
body[data-theme="radar"] {
--accent: #4338CA;
--accent2: #6366F1;
--bg: #F9FAFB;
--card: #FFFFFF;
--ink: #111827;
--muted: #6B7280;
}
/* Тема: Dark */
body[data-theme="dark"] {
--accent: #4338CA;
--accent2: #6366F1;
--bg: #111827;
--card: #1F2937;
--ink: #F9FAFB;
--muted: #9CA3AF;
}
/* Семантика — едина для всех тем */
:root {
--s-success: #10B981;
--s-success-bg: #ECFDF5;
--s-warning: #F59E0B;
--s-warning-bg: #FFFBEB;
--s-danger: #EF4444;
--s-danger-bg: #FEF2F2;
--s-info: #3B82F6;
--s-info-bg: #EFF6FF;
}
body[data-theme="zov"] {
--accent: #003E7E;
--accent2: #76BD22;
--bg: #F5F6F8;
--card: #FFFFFF;
--ink: #1A1A2E;
--muted: #8A94A6;
}
/* Тема: РАДАР CRM */
body[data-theme="radar"] {
--accent: #4338CA;
--accent2: #6366F1;
--bg: #F9FAFB;
--card: #FFFFFF;
--ink: #111827;
--muted: #6B7280;
}
/* Тема: Dark */
body[data-theme="dark"] {
--accent: #4338CA;
--accent2: #6366F1;
--bg: #111827;
--card: #1F2937;
--ink: #F9FAFB;
--muted: #9CA3AF;
}
/* Семантика — едина для всех тем */
:root {
--s-success: #10B981;
--s-success-bg: #ECFDF5;
--s-warning: #F59E0B;
--s-warning-bg: #FFFBEB;
--s-danger: #EF4444;
--s-danger-bg: #FEF2F2;
--s-info: #3B82F6;
--s-info-bg: #EFF6FF;
}
06 · Иконки и размеры
Иконочная система
Stroke-based SVG иконки, 20–24px, stroke-width 1.5–2. Стиль Lucide / Heroicons. Минимальная зона прикосновения — 44×44px.
home
user
clipboard
package
ruler
wrench
folder
wallet
star
chat
plus
arrow-left
check
bell
Размеры прикосновений и зоны
Зона прикосновения
44×44
Минимальный размер любого интерактивного элемента в пикселях. Иконка может быть меньше, но tap-зона — не менее 44px.
Безопасная зона снизу
34px
Home indicator iOS. Навбар должен учитывать safe-area-inset-bottom: env(safe-area-inset-bottom, 34px).
Иконки в UI
20–24px
Stroke-width: 1.5 для 24px, 2.0 для 20px. Не использовать filled иконки — только outline stroke.
Viewport MiniApp
390px
Базовый viewport Telegram MiniApp. Компоненты проектируются для 390px, адаптируются вниз до 360px.
@wasrusgen1
CRM
Руководство по фирменному стилю · Версия 2026
07 · Применение Brand in Use
Фирменный стиль в реальных носителях — от визитки до публикации в Telegram.
Визитная карточка · 90 × 50 мм
@wasrusgen1
CRM
УПРАВЛЕНИЕ ПРОЦЕССАМИ
Руслан Васильев
Основатель · Директор
Email-подпись
Обложка презентации · 16:9
Telegram · Социальные сети
Анонс
Новый модуль CRM
Автоматизация воронки продаж для малого и среднего бизнеса
@wasrusgen1
CRM · Результаты
2.3×
рост конверсии
−40%
на рутину
@wasrusgen1 · wasrusgen1.ru