diff --git a/brands/brandbook_consulting.html b/brands/brandbook_consulting.html new file mode 100644 index 0000000..87e3623 --- /dev/null +++ b/brands/brandbook_consulting.html @@ -0,0 +1,824 @@ + + + + + +@wasrusgen1 | КОНСАЛТИНГ — Брендбук 2026 + + + + + + + + + +
+ +
+
+ + Зонтичный бренд @wasrusgen1 · Торговая марка +
+ +

Процессы —
в порядок. Бизнес —
в рост.

+

Анализ бизнес-процессов, написание CRM и сопровождение

+
+
НаправлениеБизнес-консалтинг
+
Версия2026.1
+
Бренд@wasrusgen1
+
СтатусУтверждён
+
+
+ + + + + +
+

Два варианта логотипа

+

Используются оба — выбор зависит от контекста носителя. Не смешивать в одном носителе.

+
+
+
@wasrusgen1КОНСАЛТИНГ
+
Горизонталь 1:1
✓ Хедер и навигация
✓ Email-подпись
✓ Документы, КП, договоры
✓ Sidebar, колонтитулы
+
+
+
@wasrusgen1КОНСАЛТИНГ
+
Вертикальный стэк
✓ Обложки презентаций
✓ Визитная карточка (лицо)
✓ Аватар Telegram-канала
✓ Обложки постов
+
+
+

⚠ Правило: если в носителе использован стэк — горизонталь не дублируется, и наоборот.

+
+
+
02 — Цвет
+

Цветовые темы

+

Изумрудная палитра — цвет роста, трансформации и устойчивого результата. Тёмно-зелёный передаёт стабильность, светлый акцент — динамику и движение.

+
+
+
Тема 01
Изумруд · Основная
+
+
CONSULT-900
#064E3B
Глубокий фон
+
CONSULT-700
#047857
Основной
+
CONSULT-500
#10B981
Акцент / Прогресс
+
CONSULT-50
#ECFDF5
Светлый фон
+
+
+
+
Тема 02
Нейтральная · Интерфейс
+
+
DARK-MAX
#0F0F1A
Sidebar
+
DARK-BASE
#1A1A2E
Текст
+
SURFACE
#F5F6F8
Фон
+
WHITE
#FFFFFF
Карточки
+
+
+
+
Тема 03
Фазы · Проект
+
+
PHASE-DIS
#3B82F6
Диагностика
+
PHASE-DES
#7C3AED
Проектирование
+
PHASE-IMP
#047857
Внедрение
+
PHASE-SUP
#94A3B8
Сопровождение
+
+
+
+
+
Выполнено
#047857
bg #ECFDF5
+
В работе
#3B82F6
bg #DBEAFE
+
Ожидание
#D97706
bg #FEF3C7
+
Проектирование
#7C3AED
bg #F3E8FF
+
+
+ +
+
03 — Типографика
+

Шрифтовая система

+

Montserrat для заголовков передаёт силу и профессионализм консультанта. Inter обеспечивает читаемость аналитических данных и методологий.

+
+
Montserrat — Логотип / Заголовки
+
Трансформация бизнеса
+
+
Bold 700
КОНСАЛТИНГ
+
ExtraBold 800
@wasrusgen1
+
+
+
+
Display
52px / -2px / 800
Результат
Обложка
+
H1
32px / -1px / 800
Анализ процессов
Заголовки
+
Body
15px / 1.6 / 400
Методологический анализ бизнес-процессов компании
Описания
+
Label
11px / .08em / 700
Фаза проекта
Метки
+
+
+ +
+
04 — Компоненты
+

UI-компоненты

+

Компоненты КОНСАЛТИНГ ориентированы на управление проектами трансформации: фазы, метрики, прогресс карточки и таймлайн внедрения.

+ +
+
Кнопки
+
+ + + + +
+
+ +
+
Статусы фаз
+
+ Диагностика AS-IS + Анализ + Проектирование TO-BE + Внедрение + Сопровождение +
+
+ +
+
Процессный поток (5 фаз)
+
+
+
1
+
Диагностика
+
AS-IS анализ
+
+
+
2
+
Аудит
+
Узкие места
+
+
+
3
+
Проектирование
+
TO-BE модель
+
+
+
4
+
Внедрение
+
CRM + обучение
+
+
+
5
+
Сопровождение
+
Поддержка 6 мес
+
+
+
+ +
+
Ключевые метрики проекта
+
+
+
Экономия времени
+
-34%
+
↑ на 8% vs план
+
Часов на операции
+
+
+
Выручка
+
+22%
+
↑ рост за квартал
+
После внедрения CRM
+
+
+
NPS клиентов
+
74
+
↑ с 51 до 74
+
Индекс лояльности
+
+
+
Потери процессов
+
-61%
+
↓ устранено потерь
+
Дублирования задач
+
+
+
+ +
+
Карточки проектов
+
+
+
+
+
Внедрение CRM — швейное производство
+
Клиент: ИП Васильев Р.Г. · Фаза 3 из 5
+
+ TO-BE +
+
+
Прогресс62%
+
+
+
+ Завершение: 30 июня 2026 + +
+
+
+
+
+
Оптимизация отдела продаж — ритейл
+
Клиент: ООО «МегаТорг» · Фаза 5 из 5
+
+ Завершён ✓ +
+
+
Прогресс100%
+
+
+
+ Завершён: 15 апреля 2026 + +
+
+
+
+ +
+
Таймлайн внедрения
+
+
+
+
Диагностика AS-IS
1–2 недели · Завершено
Интервью, картирование процессов, узкие места
+
+
+
+
Аудит и отчёт
Неделя 3 · Завершено
+
+
+
+
Проектирование TO-BE
Недели 4–6 · В работе
Проектирование новых процессов + ТЗ на CRM
+
+
+
+
Внедрение CRM + обучение
Недели 7–12
+
+
+
+
Сопровождение 6 месяцев
После внедрения
+
+
+
+
+ +
+
05 — Токены
+

Дизайн-токены

+
+ + + + + + + + + + + +
ТокенЗначениеЦветРоль
--consult-900#064E3B#064E3BГлубокий фон
--consult-700#047857#047857Основной бренд-цвет
--consult-500#10B981#10B981Акцент, прогресс-бар
--consult-50#ECFDF5#ECFDF5Светлый фон
--phase-discovery#3B82F6#3B82F6Фаза диагностики
--phase-design#7C3AED#7C3AEDФаза проектирования
--phase-impl#047857#047857Фаза внедрения
+
+
/* КОНСАЛТИНГ · Design Tokens */
:root {
  --consult-900: #064E3B;
  --consult-700: #047857;
  --consult-500: #10B981;
  --consult-50:  #ECFDF5;
}
+
+ +
+
06 — Иконки
+

Иконографика

+

Lucide Icons, stroke-width 1.75. Акцент — аналитические и процессные иконки, отражающие трансформацию бизнеса.

+
+
activity
+
trend-up
+
bar-chart
+
team
+
timeline
+
report
+
done
+
process
+
layout
+
crm
+
edit
+
result
+
scope
+
coffee
+
+
+ +
+
07 — Отступы и размеры
+

Сетка и зоны касания

+
+
Базовая единица
4px
Все отступы и размеры кратны 4px. Шаги: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64.
+
Минимальная зона касания
44px
Все кнопки и навигационные элементы — не менее 44×44px. Стандарт WCAG 2.5.5.
+
Прогресс-бар
6px
Высота трека прогресс-бара — 6px. Полный радиус (pill). Градиент от #047857 до #10B981.
+
Ширина фазового блока
min 140px
Минимальная ширина одной фазы в process flow. При меньшей — переходить в вертикальный список.
+
+
+ + +
+

08 · Применение Brand in Use

+

Фирменный стиль в реальных носителях — от визитки до публикации в Telegram.

+ +

Визитная карточка · 90 × 50 мм

+
+
+
+
+ @wasrusgen1 + + КОНСАЛТИНГ +
+
АНАЛИЗ ПРОЦЕССОВ
+
+
+
Руслан Васильев
+
Основатель · Директор
+
+
+
+
+
+
Контакты
+
📧 i@wasrusgen.ru
📱 @wasrusgen1
🌐 wasrusgen1.ru
+
+
+
Анализируем процессы — строим системы
+
+
+
+ +

Email-подпись

+
+
От: Руслан Васильев <i@wasrusgen.ru> · Тема: Анализ бизнес-процессов
+
+
Добрый день!

Направляю вам программу аудита бизнес-процессов. Первая консультация — бесплатно.
+
+
+
+
Руслан Васильев
+
@wasrusgen1 | КОНСАЛТИНГ · Основатель
+
📧 i@wasrusgen.ru · 📱 @wasrusgen1 · 🌐 wasrusgen1.ru
+
+
+
+
+ +

Обложка презентации · 16:9

+
+
+
+
+
+
@wasrusgen1 | КОНСАЛТИНГ
+
+
Консалтинг
бизнес-процессов
+
AS-IS · TO-BE · Внедрение
+
+
2026 · Конфиденциально
+
+
+ +

Telegram · Социальные сети

+
+
+
Анонс
+
+
Трансформация бизнеса
+
От аудита процессов до готовой CRM — под ключ
+
+
+ + @wasrusgen1 +
+
+
+
+
КОНСАЛТИНГ · Результат
+
+ +
+
+
+
+
+32%
+
эффективность
+
+
+
3 мес
+
до результата
+
+
+
@wasrusgen1 · wasrusgen1.ru
+
+
+
+ +
+
09 -- Кнопки
+

Кнопки и CTA-элементы

+

6 вариантов с WOW-эффектами. Наведи курсор -- каждая кнопка интерактивна.

+
+
Все варианты -- интерактивный демо
+
+ + + + + + +
+
v1 Primary Shine · v2 Glow Pulse · v3 Glass · v4 Outline Fill · v5 Surface · v6 Ghost
+
+
+
Вариант 01
Primary
Gradient + Shine Sweep + Glow
Shine-эффект скользит при hover, тень усиливается. Градиент от тёмного к акценту.
Когда: главный CTA страницы, заявка, покупка, старт воронки.
+
Вариант 02
Glow Pulse
Pulsating Ring -- Always-On
Живёт постоянно -- кольцевая пульсация без hover. Привлекает без взаимодействия.
Когда: hero, промо-баннер, ограниченное предложение, таймер акции.
+
Вариант 03
Glass
Glassmorphism -- Backdrop Blur
Frosted-стекло -- только тёмные и фирменные фоны. Вторичное действие рядом с Primary.
Когда: поверх gradient-cover, modal на тёмном, hero -- вторая кнопка.
+
Вариант 04
Outline Fill
Border -- Fill Reveal Left to Right
Граница превращается в заливку при hover слева направо. Нейтральный вид до взаимодействия.
Когда: вторичное действие рядом с Primary, Скачать, Сравнить, Узнать больше.
+
Вариант 05
Surface
Elevated -- Neutral -- Shadow Lift
Нейтральный вес. Тень поднимается при hover.
Когда: инлайн-действия в списках, таблицах, карточках -- Открыть, Редактировать.
+
Вариант 06
Ghost
Текстовый -- минимальный
Минимальный визуальный вес, фон появляется при hover.
Когда: Отмена, Назад, Пропустить, навигационные ссылки.
+
+

Размеры

+

Размер выбирается по иерархии и контексту. MD -- базовый.

+
+
+ + + + +
+
+
SM
8x16px - 12px - r8
Таблицы, chip, badge
+
MD -- default
14x28px - 14px - r12
Карточки, формы, секции
+
LG
18x36px - 16px - r14
Hero-секции, popup, modal
+
XL -- Hero
22x48px - 18px - r16
Landing cover, главный экран
+
+
+

Матрица применения

+

Один экран -- не более одной Primary/Glow. Не смешивать v1 и v2 в одной секции.

+
+
+
Контекст
+
Описание
+
Основной
+
Второстеп.
+
+
Landing Hero
Главный экран. Один фокус внимания.
v2 XL
v3 LG
+
Форма / Заявка
Submit + отмена. Чёткая иерархия.
v1 MD
v6 MD
+
Карточка / Список
Инлайн-действие.
v5 SM
v6 SM
+
Тёмный / Gradient
Поверх фирменного градиента.
v1 LG
v3 MD
+
Email / Документ
Ограниченная поддержка CSS.
v4 MD
v5 MD
+
+

Правила

+
+
Делай
Не более одной Primary/Glow на экран.
v3 Glass -- только тёмные и фирменные фоны.
Иерархия: Primary -- Outline -- Ghost.
Disabled: opacity 32%, cursor not-allowed.
+
Не делай
v1 и v2 в одной секции -- конфликт dominant.
v3 Glass на белом фоне -- эффект невидим.
Кнопка шире 320px без причины.
Переопределять цвета вне токенов бренда.
+
+
+ +
+
@wasrusgen1
+
КОНСАЛТИНГ
+

Процессы — в порядок. Бизнес — в рост. Результат измеримый, сопровождение постоянное.

+
+ +
+ + + diff --git a/brands/brandbook_crm.html b/brands/brandbook_crm.html new file mode 100644 index 0000000..9b2ec8e --- /dev/null +++ b/brands/brandbook_crm.html @@ -0,0 +1,2718 @@ + + + + + +@wasrusgen1 | CRM — Брендбук 2026 + + + + + + + + + + + +
+ + +
+
+
@wasrusgen1
+
CRM
+
+

Руководство по фирменному стилю

+

Управление бизнес-процессами · Версия 2026

+
+
+ Продукт + @wasrusgen1 | CRM +
+
+ Платформа + Telegram MiniApp +
+
+ Viewport + 390px мобильный +
+
+ Зонтичный бренд + РАДАР +
+
+
+ + + + + +
+
02 · Цветовые темы
+

Три цветовые темы CRM

+

Каждая тема адаптирована для конкретного контекста. По умолчанию используется основная тема. Тема Dark — для ночного режима.

+ +
+ + +
+
+
По умолчанию
+
Тема основная
+
+
+
+
+
+ Сборки + 14 +
+
+
+
+
+
Сборка #1146В
+
Петров А.В.
+
+
В работе
+
+
+
+
+
Сборка #1144А
+
Иванов С.К.
+
+
Готово
+
+
+
+
+
Замер #892
+
Новая Купчинская 5
+
+
Ожидание
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
--accent
+
#003E7E
+
Primary
+
+
+
+
--accent2
+
#76BD22
+
Secondary
+
+
+
+
--bg
+
#F5F6F8
+
Page BG
+
+
+
+
--ink
+
#1A1A2E
+
Main text
+
+
+
+ + +
+
+
Суббренд РАДАР
+
Тема РАДАР CRM
+
+
+
+
+
+ Сборки + 14 +
+
+
+
+
+
Сборка #1146В
+
Петров А.В.
+
+
В работе
+
+
+
+
+
Сборка #1144А
+
Иванов С.К.
+
+
Готово
+
+
+
+
+
Замер #892
+
Новая Купчинская 5
+
+
Ожидание
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
--accent
+
#4338CA
+
Indigo 700
+
+
+
+
--accent2
+
#6366F1
+
Indigo 500
+
+
+
+
--bg
+
#F9FAFB
+
Neutral 50
+
+
+
+
--ink
+
#111827
+
Anthracite
+
+
+
+ + +
+
+
Ночной режим
+
Тема Dark
+
+
+
+
+
+ Сборки + 14 +
+
+
+
+
+
Сборка #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
+
+
+
+
Display
+
28px / 800 / -3%
+
+
+ Добрый день, Руслан +
+
Приветствие, hero
+
+
+
+
H1
+
22px / 700 / -2%
+
+
+ Список сборок +
+
Заголовок страницы
+
+
+
+
H2
+
18px / 700 / -1%
+
+
+ Клиенты +
+
Раздел, секция
+
+
+
+
H3
+
16px / 600
+
+
+ Сборка #1146В +
+
Карточка, модал
+
+
+
+
Body
+
15px / 400
+
+
+ Основной текст интерфейса +
+
Параграфы, описания
+
+
+
+
Small
+
13px / 400
+
+
+ Вспомогательный текст +
+
Подписи, meta
+
+
+
+
Caption
+
11px / 600 / +1px
+
+
+ МЕТКИ РАЗДЕЛОВ +
+
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РАДАР CRMDarkНазначение
--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;
+} +
+
+ + +
+
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 +
+
УПРАВЛЕНИЕ ПРОЦЕССАМИ
+
+
+
Руслан Васильев
+
Основатель · Директор
+
+
+
+
+
+
Контакты
+
📧 i@wasrusgen.ru
📱 @wasrusgen1
🌐 wasrusgen1.ru
+
+
+
Управляй процессами — расти быстрее
+
+
+
+ + +

Email-подпись

+
+
От: Руслан Васильев <i@wasrusgen.ru> · Тема: Предложение по автоматизации
+
+
Добрый день!

Направляю вам предложение по внедрению CRM. Готов ответить на любые вопросы.
+
+
+
+
Руслан Васильев
+
@wasrusgen1 | CRM · Основатель
+
📧 i@wasrusgen.ru · 📱 @wasrusgen1 · 🌐 wasrusgen1.ru
+
+
+
+
+ + +

Обложка презентации · 16:9

+
+
+
+
+
+
@wasrusgen1 | CRM
+
+
CRM-система
для вашего бизнеса
+
Автоматизация · Рост · Прибыль
+
+
2026 · Конфиденциально
+
+
+ + +

Telegram · Социальные сети

+
+
+
Анонс
+
+
Новый модуль CRM
+
Автоматизация воронки продаж для малого и среднего бизнеса
+
+
+ + @wasrusgen1 +
+
+
+
+
CRM · Результаты
+
+ +
+
+
+
+
2.3×
+
рост конверсии
+
+
+
−40%
+
на рутину
+
+
+
@wasrusgen1 · wasrusgen1.ru
+
+
+
+ +
+
08 -- Кнопки
+

Кнопки и CTA-элементы

+

6 вариантов с WOW-эффектами. Наведи курсор -- каждая кнопка интерактивна.

+
+
Все варианты -- интерактивный демо
+
+ + + + + + +
+
v1 Primary Shine · v2 Glow Pulse · v3 Glass · v4 Outline Fill · v5 Surface · v6 Ghost
+
+
+
Вариант 01
Primary
Gradient + Shine Sweep + Glow
Shine-эффект скользит при hover, тень усиливается. Градиент от тёмного к акценту.
Когда: главный CTA страницы, заявка, покупка, старт воронки.
+
Вариант 02
Glow Pulse
Pulsating Ring -- Always-On
Живёт постоянно -- кольцевая пульсация без hover. Привлекает без взаимодействия.
Когда: hero, промо-баннер, ограниченное предложение, таймер акции.
+
Вариант 03
Glass
Glassmorphism -- Backdrop Blur
Frosted-стекло -- только тёмные и фирменные фоны. Вторичное действие рядом с Primary.
Когда: поверх gradient-cover, modal на тёмном, hero -- вторая кнопка.
+
Вариант 04
Outline Fill
Border -- Fill Reveal Left to Right
Граница превращается в заливку при hover слева направо. Нейтральный вид до взаимодействия.
Когда: вторичное действие рядом с Primary, Скачать, Сравнить, Узнать больше.
+
Вариант 05
Surface
Elevated -- Neutral -- Shadow Lift
Нейтральный вес. Тень поднимается при hover.
Когда: инлайн-действия в списках, таблицах, карточках -- Открыть, Редактировать.
+
Вариант 06
Ghost
Текстовый -- минимальный
Минимальный визуальный вес, фон появляется при hover.
Когда: Отмена, Назад, Пропустить, навигационные ссылки.
+
+

Размеры

+

Размер выбирается по иерархии и контексту. MD -- базовый.

+
+
+ + + + +
+
+
SM
8x16px - 12px - r8
Таблицы, chip, badge
+
MD -- default
14x28px - 14px - r12
Карточки, формы, секции
+
LG
18x36px - 16px - r14
Hero-секции, popup, modal
+
XL -- Hero
22x48px - 18px - r16
Landing cover, главный экран
+
+
+

Матрица применения

+

Один экран -- не более одной Primary/Glow. Не смешивать v1 и v2 в одной секции.

+
+
+
Контекст
+
Описание
+
Основной
+
Второстеп.
+
+
Landing Hero
Главный экран. Один фокус внимания.
v2 XL
v3 LG
+
Форма / Заявка
Submit + отмена. Чёткая иерархия.
v1 MD
v6 MD
+
Карточка / Список
Инлайн-действие.
v5 SM
v6 SM
+
Тёмный / Gradient
Поверх фирменного градиента.
v1 LG
v3 MD
+
Email / Документ
Ограниченная поддержка CSS.
v4 MD
v5 MD
+
+

Правила

+
+
Делай
Не более одной Primary/Glow на экран.
v3 Glass -- только тёмные и фирменные фоны.
Иерархия: Primary -- Outline -- Ghost.
Disabled: opacity 32%, cursor not-allowed.
+
Не делай
v1 и v2 в одной секции -- конфликт dominant.
v3 Glass на белом фоне -- эффект невидим.
Кнопка шире 320px без причины.
Переопределять цвета вне токенов бренда.
+
+
+ +
+ + + + + + diff --git a/brands/brandbook_expert.html b/brands/brandbook_expert.html new file mode 100644 index 0000000..0753831 --- /dev/null +++ b/brands/brandbook_expert.html @@ -0,0 +1,728 @@ + + + + + +@wasrusgen1 | ЭКСПЕРТ — Брендбук 2026 + + + + + + + + + +
+ +
+
+ + Зонтичный бренд @wasrusgen1 · Торговая марка +
+ +

Сравни —
выбери лучшее

+

Сравнительный анализ конкурентов в интернет-магазинах

+
+
НаправлениеАнализ конкурентов
+
Версия2026.1
+
Бренд@wasrusgen1
+
СтатусУтверждён
+
+
+ + + + + +
+

Два варианта логотипа

+

Используются оба — выбор зависит от контекста носителя. Не смешивать в одном носителе.

+
+
+
@wasrusgen1ЭКСПЕРТ
+
Горизонталь 1:1
✓ Хедер и навигация
✓ Email-подпись
✓ Документы, КП, договоры
✓ Sidebar, колонтитулы
+
+
+
@wasrusgen1ЭКСПЕРТ
+
Вертикальный стэк
✓ Обложки презентаций
✓ Визитная карточка (лицо)
✓ Аватар Telegram-канала
✓ Обложки постов
+
+
+

⚠ Правило: если в носителе использован стэк — горизонталь не дублируется, и наоборот.

+
+
+
02 — Цвет
+

Цветовые темы

+

Янтарно-золотая палитра ассоциируется с экспертностью, ценностью и золотым стандартом. Тёмные оттенки янтаря передают авторитет, светлые — доступность.

+
+
+
Тема 01
Янтарь · Основная
+
+
EXPERT-900
#78350F
Глубокий фон
+
EXPERT-700
#B45309
Основной
+
EXPERT-400
#F59E0B
Акцент / Звёзды
+
EXPERT-100
#FEF3C7
Светлый фон
+
+
+
+
Тема 02
Нейтральная · Интерфейс
+
+
DARK-MAX
#0F0F1A
Sidebar / Header
+
DARK-BASE
#1A1A2E
Основной текст
+
SURFACE
#F5F6F8
Фон страницы
+
WHITE
#FFFFFF
Карточки
+
+
+
+
Тема 03
Рейтинг · Шкала оценок
+
+
RANK-TOP
#10B981
Топ / Лучший
+
RANK-MID
#F59E0B
Средний
+
RANK-LOW
#EF4444
Слабый
+
RANK-NEW
#94A3B8
Новый / Н/Д
+
+
+
+
+
Топ выбор
#B45309
bg #FEF3C7
+
Высокий балл
#10B981
bg #DCFCE7
+
Средний
#64748B
bg #F1F5F9
+
Низкий балл
#DC2626
bg #FEE2E2
+
+
+ +
+
03 — Типографика
+

Шрифтовая система

+

Montserrat — для логотипа и авторитетных заголовков. Inter — для аналитических таблиц и интерфейса.

+
+
Montserrat — Логотип / Заголовки
+
Анализ конкурентов
+
+
Bold 700
ЭКСПЕРТ
+
ExtraBold 800
@wasrusgen1
+
+
+
+
Display
52px / -2px / 800
Сравнение
Обложка
+
H1
32px / -1px / 800
Анализ рынка
Заголовки
+
Body
15px / 1.6 / 400
Детальный сравнительный анализ позиций
Описания
+
Label
11px / .08em / 700
Метрика
Метки таблиц
+
+
+ +
+
04 — Компоненты
+

UI-компоненты

+

Компоненты ЭКСПЕРТ ориентированы на сравнение и ранжирование: таблицы, скоркарты, рейтинговые бейджи.

+ +
+
Кнопки
+
+ + + + + +
+
+ +
+
Рейтинговые метки
+
+ Топ выбор ★ + Высокий балл + Средний + Слабый + Новинка +
+
+ +
+
Скоркарты конкурентов
+
+
+
Бренд А
+
9.4
+
★ Топ выбор
+
+
+
Бренд Б
+
7.1
+
Хорошо
+
+
+
Бренд В
+
5.8
+
Ниже среднего
+
+
+
+ +
+
Сравнительная таблица
+ + + + + + + + + + + +
ПараметрБренд А ★Бренд ББренд В
Цена4 990 ₽6 200 ₽5 800 ₽
Рейтинг★ 4.8★ 4.1★ 3.7
Наличие✓ В наличии⚑ Под заказ✗ Нет
Гарантия24 мес12 мес12 мес
Отзывы1 24831289
+
+
+ +
+
05 — Токены
+

Дизайн-токены

+

CSS-переменные для интеграции в кодовую базу. Используй токены вместо жёстко заданных значений.

+
+ + + + + + + + + + + +
ТокенЗначениеЦветРоль
--expert-900#78350F#78350FГлубокий фон, cover
--expert-700#B45309#B45309Основной бренд-цвет
--expert-400#F59E0B#F59E0BАкцент, звёзды рейтинга
--expert-100#FEF3C7#FEF3C7Светлый фон карточек
--rank-top#10B981#10B981Высший балл
--rank-mid#F59E0B#F59E0BСредний балл
--rank-low#EF4444#EF4444Низкий балл
+
+
/* ЭКСПЕРТ · Design Tokens */
:root {
  --expert-900: #78350F;
  --expert-700: #B45309;
  --expert-400: #F59E0B;
  --expert-100: #FEF3C7;
}
+
+ +
+
06 — Иконки
+

Иконографика

+

Lucide Icons, stroke-width 1.75, линейный стиль. Акцент — аналитические и сравнительные иконки.

+
+
star
+
bar-chart
+
activity
+
search
+
table
+
check
+
arrow-r
+
product
+
edit
+
info
+
flag
+
users
+
trend-up
+
trend-dn
+
+
+ +
+
07 — Отступы и размеры
+

Сетка и зоны касания

+

Базовая единица — 4px. Все отступы кратны 4. Минимальная зона касания — 44px.

+
+
Базовая единица
4px
Все отступы кратны 4px: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64.
+
Минимальная зона касания
44px
Кнопки и интерактивные элементы — не менее 44×44px. Требование WCAG 2.5.5.
+
Радиус скруглений
12px
Карточки — 16px, кнопки — 12px, бейджи — 100px, таблицы — 16px.
+
Колонки таблицы
min 120px
Минимальная ширина колонки сравнительной таблицы. Первая колонка — 160px.
+
+
+ + +
+

08 · Применение Brand in Use

+

Фирменный стиль в реальных носителях — от визитки до публикации в Telegram.

+ +

Визитная карточка · 90 × 50 мм

+
+
+
+
+ @wasrusgen1 + + ЭКСПЕРТ +
+
АНАЛИЗ КОНКУРЕНТОВ
+
+
+
Руслан Васильев
+
Основатель · Директор
+
+
+
+
+
+
Контакты
+
📧 i@wasrusgen.ru
📱 @wasrusgen1
🌐 wasrusgen1.ru
+
+
+
Знай лидеров — обходи конкурентов
+
+
+
+ +

Email-подпись

+
+
От: Руслан Васильев <i@wasrusgen.ru> · Тема: Анализ конкурентов вашей ниши
+
+
Добрый день!

Направляю вам сравнительный анализ конкурентов по вашей категории. Готов обсудить выводы.
+
+
+
+
Руслан Васильев
+
@wasrusgen1 | ЭКСПЕРТ · Основатель
+
📧 i@wasrusgen.ru · 📱 @wasrusgen1 · 🌐 wasrusgen1.ru
+
+
+
+
+ +

Обложка презентации · 16:9

+
+
+
+
+
+
@wasrusgen1 | ЭКСПЕРТ
+
+
Анализ конкурентов
вашей ниши
+
Данные · Инсайты · Стратегия
+
+
2026 · Конфиденциально
+
+
+ +

Telegram · Социальные сети

+
+
+
Анонс
+
+
Сравнительный анализ
+
Кто лидирует в вашей нише? Узнайте первыми
+
+
+ + @wasrusgen1 +
+
+
+
+
ЭКСПЕРТ · Охват
+
+ +
+
+
+
+
120+
+
магазинов
+
+
+
5K+
+
SKU
+
+
+
@wasrusgen1 · wasrusgen1.ru
+
+
+
+ +
+
09 -- Кнопки
+

Кнопки и CTA-элементы

+

6 вариантов с WOW-эффектами. Наведи курсор -- каждая кнопка интерактивна.

+
+
Все варианты -- интерактивный демо
+
+ + + + + + +
+
v1 Primary Shine · v2 Glow Pulse · v3 Glass · v4 Outline Fill · v5 Surface · v6 Ghost
+
+
+
Вариант 01
Primary
Gradient + Shine Sweep + Glow
Shine-эффект скользит при hover, тень усиливается. Градиент от тёмного к акценту.
Когда: главный CTA страницы, заявка, покупка, старт воронки.
+
Вариант 02
Glow Pulse
Pulsating Ring -- Always-On
Живёт постоянно -- кольцевая пульсация без hover. Привлекает без взаимодействия.
Когда: hero, промо-баннер, ограниченное предложение, таймер акции.
+
Вариант 03
Glass
Glassmorphism -- Backdrop Blur
Frosted-стекло -- только тёмные и фирменные фоны. Вторичное действие рядом с Primary.
Когда: поверх gradient-cover, modal на тёмном, hero -- вторая кнопка.
+
Вариант 04
Outline Fill
Border -- Fill Reveal Left to Right
Граница превращается в заливку при hover слева направо. Нейтральный вид до взаимодействия.
Когда: вторичное действие рядом с Primary, Скачать, Сравнить, Узнать больше.
+
Вариант 05
Surface
Elevated -- Neutral -- Shadow Lift
Нейтральный вес. Тень поднимается при hover.
Когда: инлайн-действия в списках, таблицах, карточках -- Открыть, Редактировать.
+
Вариант 06
Ghost
Текстовый -- минимальный
Минимальный визуальный вес, фон появляется при hover.
Когда: Отмена, Назад, Пропустить, навигационные ссылки.
+
+

Размеры

+

Размер выбирается по иерархии и контексту. MD -- базовый.

+
+
+ + + + +
+
+
SM
8x16px - 12px - r8
Таблицы, chip, badge
+
MD -- default
14x28px - 14px - r12
Карточки, формы, секции
+
LG
18x36px - 16px - r14
Hero-секции, popup, modal
+
XL -- Hero
22x48px - 18px - r16
Landing cover, главный экран
+
+
+

Матрица применения

+

Один экран -- не более одной Primary/Glow. Не смешивать v1 и v2 в одной секции.

+
+
+
Контекст
+
Описание
+
Основной
+
Второстеп.
+
+
Landing Hero
Главный экран. Один фокус внимания.
v2 XL
v3 LG
+
Форма / Заявка
Submit + отмена. Чёткая иерархия.
v1 MD
v6 MD
+
Карточка / Список
Инлайн-действие.
v5 SM
v6 SM
+
Тёмный / Gradient
Поверх фирменного градиента.
v1 LG
v3 MD
+
Email / Документ
Ограниченная поддержка CSS.
v4 MD
v5 MD
+
+

Правила

+
+
Делай
Не более одной Primary/Glow на экран.
v3 Glass -- только тёмные и фирменные фоны.
Иерархия: Primary -- Outline -- Ghost.
Disabled: opacity 32%, cursor not-allowed.
+
Не делай
v1 и v2 в одной секции -- конфликт dominant.
v3 Glass на белом фоне -- эффект невидим.
Кнопка шире 320px без причины.
Переопределять цвета вне токенов бренда.
+
+
+ +
+
@wasrusgen1
+
ЭКСПЕРТ
+

Объективный анализ. Золотой стандарт сравнения конкурентов.

+
+ +
+ + + diff --git a/brands/brandbook_radar.html b/brands/brandbook_radar.html new file mode 100644 index 0000000..cd48885 --- /dev/null +++ b/brands/brandbook_radar.html @@ -0,0 +1,836 @@ + + + + + +@wasrusgen1 | РАДАР — Брендбук 2026 + + + + + + + + + +
+ + +
+
+ + Зонтичный бренд @wasrusgen1 · Торговая марка +
+ +

Репутация
под контролем

+

Мониторинг отзывов и анализ репутации бренда в интернете

+
+
НаправлениеАнализ отзывов
+
Версия2026.1
+
Бренд@wasrusgen1
+
СтатусУтверждён
+
+
+ + + + + + + +
+

Два варианта логотипа

+

Используются оба — выбор зависит от контекста носителя. Не смешивать в одном носителе.

+
+
+
@wasrusgen1РАДАР
+
Горизонталь 1:1
✓ Хедер и навигация
✓ Email-подпись
✓ Документы, КП, договоры
✓ Sidebar, колонтитулы
+
+
+
@wasrusgen1РАДАР
+
Вертикальный стэк
✓ Обложки презентаций
✓ Визитная карточка (лицо)
✓ Аватар Telegram-канала
✓ Обложки постов
+
+
+

⚠ Правило: если в носителе использован стэк — горизонталь не дублируется, и наоборот.

+
+
+
02 — Цвет
+

Цветовые темы

+

Палитра РАДАР построена на Циане — цвете ясности, скорости и аналитики. Основные оттенки дополнены нейтральными фонами и семантическими цветами.

+ +
+
+
Тема 01
Циан · Основная
+
+
RADAR-900
#164E63
Глубокий фон
+
RADAR-700
#0E7490
Основной
+
RADAR-500
#06B6D4
Акцент
+
RADAR-100
#CFFAFE
Светлый фон
+
+
+
+
Тема 02
Нейтральная · Интерфейс
+
+
DARK-MAX
#0F0F1A
Sidebar / Header
+
DARK-BASE
#1A1A2E
Основной текст
+
SURFACE
#F5F6F8
Фон страницы
+
WHITE
#FFFFFF
Карточки
+
+
+
+
Тема 03
Семантика · Статусы
+
+
SUCCESS
#10B981
Позитивный
+
DANGER
#EF4444
Негативный
+
WARNING
#F59E0B
На модерации
+
NEUTRAL
#94A3B8
Нейтральный
+
+
+
+ +
Семантические цвета
+
+
Позитивный
#10B981
bg #DCFCE7
+
Негативный
#EF4444
bg #FEE2E2
+
На модерации
#F59E0B
bg #FEF3C7
+
Отвечено
#0E7490
bg #CFFAFE
+
+
+ + +
+
03 — Типографика
+

Шрифтовая система

+

Два шрифта: Montserrat для логотипа и заголовков, Inter — для всего интерфейса. Оба загружаются с Google Fonts.

+ +
+
Montserrat — Логотип / Акцентные заголовки
+
Мониторинг отзывов
+
+
Bold 700
РАДАР
+
ExtraBold 800
@wasrusgen1
+
+
+ +
+
Inter — Интерфейс / Текст
+
Аналитика репутации
+
+
Regular 400
Описание
+
Medium 500
Навигация
+
SemiBold 600
Кнопки
+
Bold 700
Заголовки
+
ExtraBold 800
Hero
+
+
+ +
+
Display
52px / -2px / 800
Репутация
Обложка брендбука
+
H1
32px / -1px / 800
Раздел брендбука
Заголовки разделов
+
H2
22px / -0.5px / 700
Подраздел
Заголовки карточек
+
Body
15px / 1.6 / 400
Текст описания раздела интерфейса
Описания
+
Label
11px / .08em / 700
Метка раздела
Метки, таблицы
+
Caption
12px / 1.5 / 400
Вспомогательный текст, подсказки
Hint / Sub
+
+
+ + +
+
04 — Компоненты
+

UI-компоненты

+

Библиотека компонентов РАДАР — кнопки, бейджи, карточки отзывов, рейтинговые виджеты и таймлайн обработки отзыва.

+ +
+
Кнопки
+
+ + + + + +
+
+ +
+
Статусы отзывов
+
+ Позитивный + Негативный + Нейтральный + На модерации + Отвечено +
+
+ +
+
Карточки отзывов
+
+
+
+
+
Яндекс.Карты
+
Отличный сервис!
+
+
+
★★★★★
+ Позитивный +
+
+
Очень доволен работой команды. Всё объяснили понятно, помогли разобраться. Рекомендую всем!
+
+ 2 часа назад + +
+
+
+
+
+
2GIS
+
Долго ждал ответа
+
+
+
★★☆☆☆
+ Негативный +
+
+
Обратился с вопросом — ответили только через 3 дня. Хотелось бы быстрее.
+
+ Вчера, 14:30 + Требует ответа +
+
+
+
+ +
+
Рейтинговый виджет
+
+
4.7
+
★★★★★
+
из 248 отзывов
+
5
193
+
4
35
+
3
10
+
2
6
+
1
4
+
+
+ +
+
Таймлайн обработки отзыва
+
+
+
+
Отзыв получен
10:45 · Яндекс.Карты
+
+
+
+
Классификация
10:45 · Авто
Тональность: Негативный · ★★☆☆☆
+
+
+
+
Ожидает ответа
Назначено: Менеджер Иванов
+
+
+
+
Ответ опубликован
Ожидание
+
+
+
+
+ + +
+
05 — Токены
+

Дизайн-токены

+

CSS-переменные для интеграции в кодовую базу продукта. Используй токены вместо жёстко заданных значений.

+
+ + + + + + + + + + + + + + +
ТокенЗначениеЦветРоль
--radar-900#164E63#164E63Глубокий фон, cover
--radar-700#0E7490#0E7490Основной бренд-цвет
--radar-500#06B6D4#06B6D4Акцент, иконки
--radar-100#CFFAFE#CFFAFEСветлый фон
--surface#F5F6F8#F5F6F8Страничный фон
--text-primary#1A1A2E#1A1A2EОсновной текст
--text-muted#8A94A6#8A94A6Вспомогательный
--s-positive#10B981#10B981Позитивный отзыв
--s-negative#EF4444#EF4444Негативный отзыв
--s-pending#F59E0B#F59E0BНа модерации
+
+
/* РАДАР · Design Tokens */
:root {
  --radar-900: #164E63;
  --radar-700: #0E7490;
  --radar-500: #06B6D4;
  --radar-100: #CFFAFE;
}
+
+ + +
+
06 — Иконки
+

Иконографика

+

Линейный стиль Lucide Icons, stroke-width 1.75, stroke-linecap round. Все иконки — 24×24px базовый размер.

+
+
search
+
bell
+
star
+
bar-chart
+
thumbs-up
+
thumbs-dn
+
radar
+
message
+
check-ok
+
alert
+
activity
+
layout
+
users
+
edit
+
+
+ + +
+
07 — Отступы и размеры
+

Сетка и зоны касания

+

Базовая единица — 4px. Все отступы кратны 4. Минимальная зона касания — 44px (iOS HIG / WCAG 2.5.5).

+
+
Базовая единица
4px
Все отступы и размеры — кратные 4px. Шаги: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64.
+
Минимальная зона касания
44px
Кнопки, иконки-действия и элементы навигации — не менее 44×44px. Требование iOS HIG / WCAG.
+
Радиус скруглений
12px
Карточки — 16px, кнопки — 12px, бейджи — 100px (pill). Мелкие элементы — 8px.
+
Ширина контента
640px
Максимальная ширина читаемого блока текста. Таблицы и компоненты — full-width.
+
+
+ + + +
+

08 · Применение Brand in Use

+

Фирменный стиль в реальных носителях — от визитки до публикации в Telegram.

+ +

Визитная карточка · 90 × 50 мм

+
+
+
+
+ @wasrusgen1 + + РАДАР +
+
МОНИТОРИНГ РЕПУТАЦИИ
+
+
+
Руслан Васильев
+
Основатель · Директор
+
+
+
+
+
+
Контакты
+
📧 i@wasrusgen.ru
📱 @wasrusgen1
🌐 wasrusgen1.ru
+
+
+
Слышь каждый отзыв — отвечай первым
+
+
+
+ +

Email-подпись

+
+
От: Руслан Васильев <i@wasrusgen.ru> · Тема: Мониторинг репутации
+
+
Добрый день!

Направляю вам отчёт по мониторингу отзывов за последний месяц. Готов обсудить детали.
+
+
+
+
Руслан Васильев
+
@wasrusgen1 | РАДАР · Основатель
+
📧 i@wasrusgen.ru · 📱 @wasrusgen1 · 🌐 wasrusgen1.ru
+
+
+
+
+ +

Обложка презентации · 16:9

+
+
+
+
+
+
@wasrusgen1 | РАДАР
+
+
Мониторинг репутации
24/7
+
Анализ отзывов · Реакция · Рост доверия
+
+
2026 · Конфиденциально
+
+
+ +

Telegram · Социальные сети

+
+
+
Анонс
+
+
Радар репутации
+
Мониторинг отзывов в реальном времени — 500+ площадок
+
+
+ + @wasrusgen1 +
+
+
+
+
РАДАР · Охват
+
+ +
+
+
+
+
500+
+
площадок
+
+
+
−8ч
+
реакция
+
+
+
@wasrusgen1 · wasrusgen1.ru
+
+
+
+ +
+
09 -- Кнопки
+

Кнопки и CTA-элементы

+

6 вариантов с WOW-эффектами. Наведи курсор -- каждая кнопка интерактивна.

+
+
Все варианты -- интерактивный демо
+
+ + + + + + +
+
v1 Primary Shine · v2 Glow Pulse · v3 Glass · v4 Outline Fill · v5 Surface · v6 Ghost
+
+
+
Вариант 01
Primary
Gradient + Shine Sweep + Glow
Shine-эффект скользит при hover, тень усиливается. Градиент от тёмного к акценту.
Когда: главный CTA страницы, заявка, покупка, старт воронки.
+
Вариант 02
Glow Pulse
Pulsating Ring -- Always-On
Живёт постоянно -- кольцевая пульсация без hover. Привлекает без взаимодействия.
Когда: hero, промо-баннер, ограниченное предложение, таймер акции.
+
Вариант 03
Glass
Glassmorphism -- Backdrop Blur
Frosted-стекло -- только тёмные и фирменные фоны. Вторичное действие рядом с Primary.
Когда: поверх gradient-cover, modal на тёмном, hero -- вторая кнопка.
+
Вариант 04
Outline Fill
Border -- Fill Reveal Left to Right
Граница превращается в заливку при hover слева направо. Нейтральный вид до взаимодействия.
Когда: вторичное действие рядом с Primary, Скачать, Сравнить, Узнать больше.
+
Вариант 05
Surface
Elevated -- Neutral -- Shadow Lift
Нейтральный вес. Тень поднимается при hover.
Когда: инлайн-действия в списках, таблицах, карточках -- Открыть, Редактировать.
+
Вариант 06
Ghost
Текстовый -- минимальный
Минимальный визуальный вес, фон появляется при hover.
Когда: Отмена, Назад, Пропустить, навигационные ссылки.
+
+

Размеры

+

Размер выбирается по иерархии и контексту. MD -- базовый.

+
+
+ + + + +
+
+
SM
8x16px - 12px - r8
Таблицы, chip, badge
+
MD -- default
14x28px - 14px - r12
Карточки, формы, секции
+
LG
18x36px - 16px - r14
Hero-секции, popup, modal
+
XL -- Hero
22x48px - 18px - r16
Landing cover, главный экран
+
+
+

Матрица применения

+

Один экран -- не более одной Primary/Glow. Не смешивать v1 и v2 в одной секции.

+
+
+
Контекст
+
Описание
+
Основной
+
Второстеп.
+
+
Landing Hero
Главный экран. Один фокус внимания.
v2 XL
v3 LG
+
Форма / Заявка
Submit + отмена. Чёткая иерархия.
v1 MD
v6 MD
+
Карточка / Список
Инлайн-действие.
v5 SM
v6 SM
+
Тёмный / Gradient
Поверх фирменного градиента.
v1 LG
v3 MD
+
Email / Документ
Ограниченная поддержка CSS.
v4 MD
v5 MD
+
+

Правила

+
+
Делай
Не более одной Primary/Glow на экран.
v3 Glass -- только тёмные и фирменные фоны.
Иерархия: Primary -- Outline -- Ghost.
Disabled: opacity 32%, cursor not-allowed.
+
Не делай
v1 и v2 в одной секции -- конфликт dominant.
v3 Glass на белом фоне -- эффект невидим.
Кнопка шире 320px без причины.
Переопределять цвета вне токенов бренда.
+
+
+ +
+
@wasrusgen1
+
РАДАР
+

Знай что говорят — реагируй первым. Мониторинг репутации нового поколения.

+
+ +
+ + + diff --git a/brands/brandbook_zashita.html b/brands/brandbook_zashita.html new file mode 100644 index 0000000..3a6f8ca --- /dev/null +++ b/brands/brandbook_zashita.html @@ -0,0 +1,747 @@ + + + + + +@wasrusgen1 | ЗАЩИТА — Брендбук 2026 + + + + + + + + + +
+ +
+
+ + Зонтичный бренд @wasrusgen1 · Торговая марка +
+ +

Ваши права —
наша работа

+

Юридическая консультация и сопровождение клиентов

+
+
НаправлениеЮридические услуги
+
Версия2026.1
+
Бренд@wasrusgen1
+
СтатусУтверждён
+
+
+ + + + + +
+

Два варианта логотипа

+

Используются оба — выбор зависит от контекста носителя. Не смешивать в одном носителе.

+
+
+
@wasrusgen1ЗАЩИТА
+
Горизонталь 1:1
✓ Хедер и навигация
✓ Email-подпись
✓ Документы, КП, договоры
✓ Sidebar, колонтитулы
+
+
+
@wasrusgen1ЗАЩИТА
+
Вертикальный стэк
✓ Обложки презентаций
✓ Визитная карточка (лицо)
✓ Аватар Telegram-канала
✓ Обложки постов
+
+
+

⚠ Правило: если в носителе использован стэк — горизонталь не дублируется, и наоборот.

+
+
+
02 — Цвет
+

Цветовые темы

+

Малиново-красная палитра передаёт силу, авторитет и решимость. Тёмные оттенки создают ощущение надёжного партнёра, которому можно доверить самые важные вопросы.

+
+
+
Тема 01
Малиновый · Основная
+
+
SHIELD-900
#7F1D1D
Глубокий фон
+
SHIELD-700
#B91C1C
Основной
+
SHIELD-500
#DC2626
Акцент
+
SHIELD-100
#FEE2E2
Светлый фон
+
+
+
+
Тема 02
Нейтральная · Интерфейс
+
+
DARK-MAX
#0F0F1A
Sidebar
+
DARK-BASE
#1A1A2E
Текст
+
SURFACE
#F5F6F8
Фон
+
WHITE
#FFFFFF
Карточки
+
+
+
+
Тема 03
Статусы · Дела
+
+
CASE-WON
#10B981
Выиграно
+
CASE-ACT
#3B82F6
Активное дело
+
CASE-REV
#F59E0B
На рассмотрении
+
CASE-CLO
#94A3B8
Закрыто
+
+
+
+
+
Срочно
#B91C1C
bg #FEE2E2
+
Активное
#3B82F6
bg #DBEAFE
+
Рассмотрение
#D97706
bg #FEF3C7
+
Выиграно
#10B981
bg #DCFCE7
+
+
+ +
+
03 — Типографика
+

Шрифтовая система

+

Строгая и авторитетная типографика: Montserrat для заголовков передаёт силу, Inter для текста — чёткость и профессионализм.

+
+
Montserrat — Логотип / Заголовки
+
Юридическая защита
+
+
Bold 700
ЗАЩИТА
+
ExtraBold 800
@wasrusgen1
+
+
+
+
Display
52px / -2px / 800
Защита
Обложка
+
H1
32px / -1px / 800
Ваши права
Заголовки
+
Body
15px / 1.6 / 400
Полное юридическое сопровождение на всех этапах
Описания
+
Label
11px / .08em / 700
Статус дела
Метки
+
+
+ +
+
04 — Компоненты
+

UI-компоненты

+

Компоненты ЗАЩИТА ориентированы на работу с юридическими делами: карточки дел, статусы, таймлайн сопровождения, форма записи на консультацию.

+ +
+
Кнопки
+
+ + + + +
+
+ +
+
Статусы дел
+
+ Срочно + Активное дело + На рассмотрении + Выиграно + Закрыто +
+
+ +
+
Карточки дел
+
+
+
+
Дело №2026-041
+ Срочно +
+
Защита прав потребителя — возврат товара
+
Клиент: ООО «Трейд Маркет» · Арбитражный суд
+
+ Слушание: 28 мая 2026 +
АП
Адвокат Петров
+
+
+
+
+
Дело №2026-038
+ Выиграно ✓ +
+
Взыскание задолженности по договору поставки
+
Клиент: ИП Сидоров В.А. · 1 200 000 ₽ взыскано
+
+ Завершено: 20 мая 2026 +
АП
Адвокат Петров
+
+
+
+
+ +
+
Таймлайн сопровождения
+
+
+
+
Первичная консультация
10 мая · 45 мин
+
+
+
+
Сбор документов
12–15 мая
Договор, акты, переписка — получены
+
+
+
+
Подготовка искового заявления
В работе · Срок: 27 мая
+
+
+
+
Подача в суд
Ожидание
+
+
+
+ +
+
Карточка записи на консультацию
+
+
Бесплатная консультация
+
Защита вашего бизнеса начинается сейчас
+
Запишитесь на консультацию — юрист изучит ситуацию и предложит стратегию защиты.
+
Записаться →
+
+
+
+ +
+
05 — Токены
+

Дизайн-токены

+
+ + + + + + + + + + + +
ТокенЗначениеЦветРоль
--shield-900#7F1D1D#7F1D1DГлубокий фон
--shield-700#B91C1C#B91C1CОсновной бренд-цвет
--shield-500#DC2626#DC2626Акцент
--shield-100#FEE2E2#FEE2E2Светлый фон
--case-won#10B981#10B981Выиграно
--case-active#3B82F6#3B82F6Активное дело
--case-review#F59E0B#F59E0BНа рассмотрении
+
+
/* ЗАЩИТА · Design Tokens */
:root {
  --shield-900: #7F1D1D;
  --shield-700: #B91C1C;
  --shield-500: #DC2626;
  --shield-100: #FEE2E2;
}
+
+ +
+
06 — Иконки
+

Иконографика

+

Lucide Icons, stroke-width 1.75, линейный стиль. Акцент — правовые и защитные иконки.

+
+
shield
+
document
+
client
+
calendar
+
won
+
alert
+
consult
+
payment
+
agree
+
progress
+
protected
+
deadline
+
contract
+
call
+
+
+ +
+
07 — Отступы и размеры
+

Сетка и зоны касания

+
+
Базовая единица
4px
Все отступы и размеры кратны 4px. Шаги: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64.
+
Минимальная зона касания
44px
Все интерактивные элементы — не менее 44×44px. Стандарт WCAG 2.5.5 / iOS HIG.
+
Радиус скруглений
12–16px
Карточки дел — 14px, кнопки — 12px, бейджи — 100px. Строго, без излишней мягкости.
+
Цвет акцента в форме
#B91C1C
Фокус полей ввода и активный border — в основном цвете бренда #B91C1C.
+
+
+ + +
+

08 · Применение Brand in Use

+

Фирменный стиль в реальных носителях — от визитки до публикации в Telegram.

+ +

Визитная карточка · 90 × 50 мм

+
+
+
+
+ @wasrusgen1 + + ЗАЩИТА +
+
ЮРИДИЧЕСКОЕ СОПРОВОЖДЕНИЕ
+
+
+
Руслан Васильев
+
Основатель · Директор
+
+
+
+
+
+
Контакты
+
📧 i@wasrusgen.ru
📱 @wasrusgen1
🌐 wasrusgen1.ru
+
+
+
Защищаем бизнес — сохраняем деньги
+
+
+
+ +

Email-подпись

+
+
От: Руслан Васильев <i@wasrusgen.ru> · Тема: Юридическое сопровождение бизнеса
+
+
Добрый день!

Направляю предложение по юридическому сопровождению вашего бизнеса. Консультация — бесплатно.
+
+
+
+
Руслан Васильев
+
@wasrusgen1 | ЗАЩИТА · Основатель
+
📧 i@wasrusgen.ru · 📱 @wasrusgen1 · 🌐 wasrusgen1.ru
+
+
+
+
+ +

Обложка презентации · 16:9

+
+
+
+
+
+
@wasrusgen1 | ЗАЩИТА
+
+
Юридическая защита
вашего бизнеса
+
Консультация · Сопровождение · Результат
+
+
2026 · Конфиденциально
+
+
+ +

Telegram · Социальные сети

+
+
+
Анонс
+
+
Правовая защита бизнеса
+
Профессиональное юридическое сопровождение
+
+
+ + @wasrusgen1 +
+
+
+
+
ЗАЩИТА · Статистика
+
+ +
+
+
+
+
98%
+
дел успешно
+
+
+
<24ч
+
ответ
+
+
+
@wasrusgen1 · wasrusgen1.ru
+
+
+
+ +
+
09 -- Кнопки
+

Кнопки и CTA-элементы

+

6 вариантов с WOW-эффектами. Наведи курсор -- каждая кнопка интерактивна.

+
+
Все варианты -- интерактивный демо
+
+ + + + + + +
+
v1 Primary Shine · v2 Glow Pulse · v3 Glass · v4 Outline Fill · v5 Surface · v6 Ghost
+
+
+
Вариант 01
Primary
Gradient + Shine Sweep + Glow
Shine-эффект скользит при hover, тень усиливается. Градиент от тёмного к акценту.
Когда: главный CTA страницы, заявка, покупка, старт воронки.
+
Вариант 02
Glow Pulse
Pulsating Ring -- Always-On
Живёт постоянно -- кольцевая пульсация без hover. Привлекает без взаимодействия.
Когда: hero, промо-баннер, ограниченное предложение, таймер акции.
+
Вариант 03
Glass
Glassmorphism -- Backdrop Blur
Frosted-стекло -- только тёмные и фирменные фоны. Вторичное действие рядом с Primary.
Когда: поверх gradient-cover, modal на тёмном, hero -- вторая кнопка.
+
Вариант 04
Outline Fill
Border -- Fill Reveal Left to Right
Граница превращается в заливку при hover слева направо. Нейтральный вид до взаимодействия.
Когда: вторичное действие рядом с Primary, Скачать, Сравнить, Узнать больше.
+
Вариант 05
Surface
Elevated -- Neutral -- Shadow Lift
Нейтральный вес. Тень поднимается при hover.
Когда: инлайн-действия в списках, таблицах, карточках -- Открыть, Редактировать.
+
Вариант 06
Ghost
Текстовый -- минимальный
Минимальный визуальный вес, фон появляется при hover.
Когда: Отмена, Назад, Пропустить, навигационные ссылки.
+
+

Размеры

+

Размер выбирается по иерархии и контексту. MD -- базовый.

+
+
+ + + + +
+
+
SM
8x16px - 12px - r8
Таблицы, chip, badge
+
MD -- default
14x28px - 14px - r12
Карточки, формы, секции
+
LG
18x36px - 16px - r14
Hero-секции, popup, modal
+
XL -- Hero
22x48px - 18px - r16
Landing cover, главный экран
+
+
+

Матрица применения

+

Один экран -- не более одной Primary/Glow. Не смешивать v1 и v2 в одной секции.

+
+
+
Контекст
+
Описание
+
Основной
+
Второстеп.
+
+
Landing Hero
Главный экран. Один фокус внимания.
v2 XL
v3 LG
+
Форма / Заявка
Submit + отмена. Чёткая иерархия.
v1 MD
v6 MD
+
Карточка / Список
Инлайн-действие.
v5 SM
v6 SM
+
Тёмный / Gradient
Поверх фирменного градиента.
v1 LG
v3 MD
+
Email / Документ
Ограниченная поддержка CSS.
v4 MD
v5 MD
+
+

Правила

+
+
Делай
Не более одной Primary/Glow на экран.
v3 Glass -- только тёмные и фирменные фоны.
Иерархия: Primary -- Outline -- Ghost.
Disabled: opacity 32%, cursor not-allowed.
+
Не делай
v1 и v2 в одной секции -- конфликт dominant.
v3 Glass на белом фоне -- эффект невидим.
Кнопка шире 320px без причины.
Переопределять цвета вне токенов бренда.
+
+
+ +
+
@wasrusgen1
+
ЗАЩИТА
+

Ваши права под надёжной защитой. Профессиональное юридическое сопровождение.

+
+ +
+ + +