brand_book/docs/BRANDBOOK_SCOPE.md

Содержание брендбука — Клиника «О!Клиника» (oclinica.ru)

Документ описывает полный состав интерактивного цифрового брендбука. Формат: Living Styleguide — веб-приложение для дизайнеров (внутренних и внешних подрядчиков).

---

1. Фундамент бренда (Brand Foundation)

1.1 Цветовая палитра

• Основные цвета (Primary) — из файла брендбука клиники
• Дополнительные цвета (Secondary)
• Нейтральные / серые оттенки
• Цвета состояний UI: success, warning, error, info
• Для каждого цвета: hex, RGB, HSL, название, рекомендации по применению
• Примеры сочетаний (color pairs) с проверкой контрастности (WCAG AA)

1.2 Типографика

Фирменный шрифт (бренд, офлайн, печать):

• Шрифт: DINPro — основной шрифт фирменного стиля (логотип, навигация, носители)
• Используется во всех оффлайн-носителях: форма, бейджи, таблички, наружная реклама

Веб-шрифт (цифровые носители, сайт):

• Шрифт: Fira Sans (веса 300, 400) — шрифт сайта oclinica.ru

В брендбуке отображается:

• Оба шрифта с полной шкалой размеров: h1–h6, body, caption, label, overline
• Межстрочный интервал, межбуквенный интервал для каждого стиля
• Правила применения: где DINPro, где Fira Sans
• Живые примеры текста на обоих шрифтах

1.3 Логотип

Структура и иерархия (из PDF-брендбука):

• «Общий» логотип — версия сети клиник, применяется в онлайн и оффлайн коммуникациях с клиентами, во внутренней документации, допустимо на общем сайте
• «Основной» логотип — локальные версии по направлениям (ЛОР, аллергология и др.), применяется в точках контакта с клиентами, допустимо на лендинге/сайте направления
• Логотип не подлежит изменениям и не сочетается ни с каким дополнительным текстом

В брендбуке отображается:

• Обе версии на светлом фоне
• Инвертированные версии (на тёмном фоне)
• Цветовые варианты на форме (коричневый / белый)
• Охранная зона (минимальные отступы)
• Минимальные размеры для печати (70×25,5 мм / 90×32,8 мм)
• Недопустимые варианты использования
• Скачивание файлов (SVG, PNG)

⚠️ Вектор логотипа будет предоставлен позже. В Sprint 1 страница отображается с PNG-версией из PDF и полным текстовым описанием правил.

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

• Принципы выбора иконок
• Рекомендованная сторонняя библиотека (определяется в процессе разработки)
• Размеры: 16px, 20px, 24px, 32px
• Правила цвета иконок

---

2. Базовые UI-компоненты (Components)

2.1 Кнопки (Buttons)

• Primary, Secondary, Ghost/Outline, Danger
• Размеры: sm, md, lg
• Состояния: default, hover, active, focus, disabled, loading
• Иконка + текст, только иконка

2.2 Поля ввода (Form Controls)

• Text input: default, focus, error, success, disabled
• Textarea
• Select / Dropdown
• Checkbox (одиночный, группа)
• Radio button (группа)
• Toggle/Switch
• Подписи (label), подсказки (hint), сообщения об ошибках

2.3 Бейджи и теги (Badges & Tags)

• Бейджи статуса (цветные)
• Теги фильтрации
• Счётчики (notification badge)

2.4 Алерты и уведомления

• Inline: info, success, warning, error
• Toast-уведомления

2.5 Карточки (Cards)

• Карточка врача (фото, имя, специализация, кнопка записи)
• Карточка услуги / заболевания
• Карточка новости (превью, дата, заголовок, анонс)
• Карточка отзыва (автор, текст, рейтинг, дата)
• Карточка цены (услуга, стоимость, описание)

2.6 Модальные окна

• Информационное
• Форма записи на приём
• Подтверждение действия

2.7 Навигация

• Главное меню (header nav)
• Мобильное меню (бургер)
• Хлебные крошки (breadcrumbs)
• Пагинация

2.8 Таблицы

• Базовая таблица цен
• Таблица с сортировкой

---

3. Блоки страниц (Page Blocks / Sections)

3.1 Hero-блок

• Вариант с фоновым изображением + заголовок + CTA-кнопка
• Вариант с иллюстрацией сбоку
• Вариант с формой записи внутри

3.2 CEO / Вступительный текст

• Блок с фото руководителя/главного врача
• Цитата, подпись, должность

3.3 Наши врачи

• Сетка карточек врачей (3–4 в ряд)
• Фильтрация по специализации
• Кнопка «Все врачи»

3.4 Отзывы пациентов

• Карусель отзывов
• Статичная сетка
• Блок рейтинга (звёзды, количество)

3.5 Новости / Статьи

• Сетка превью (3 в ряд)
• Горизонтальный список
• Блок «Последние новости» (сайдбар)

3.6 Форма контакта / Запись на приём

• Короткая форма (имя, телефон, кнопка)
• Расширенная форма (имя, телефон, специализация, врач, дата)
• Форма в модальном окне

3.7 Контактный блок

• Карта + адрес + часы работы
• Схема проезда

3.8 Услуги / Заболевания

• Сетка иконок с названиями
• Список с описанием

3.9 Преимущества клиники

• Иконки + текст (3–4 колонки)

---

4. Страницы (Pages)

Каждая страница показывается в брендбуке как полноразмерный макет, собранный из утверждённых блоков.

Страница	Ключевые блоки
Главная	Hero, Преимущества, Наши врачи, Услуги, Отзывы, Новости, Форма записи
Заболевание	Hero (мини), CEO-текст, Описание, Врачи по теме, Форма контакта
Все врачи	Фильтры, Сетка карточек врачей, Пагинация
Врач (профиль)	Фото + инфо, Специализации, Расписание, Форма записи, Отзывы
Цены	Фильтры, Таблица цен, Форма контакта
Контакты	Карта, Адрес + часы, Форма контакта

---

5. Экспериментальная секция (Experimental)

Ключевая особенность брендбука — возможность создавать и сохранять новые компоненты и страницы прямо в интерфейсе.

5.1 Конструктор компонентов

• Создание нового компонента через UI
• Редактирование параметров (цвет, размер, текст)
• Сохранение в базу данных
• Статус: draft / review / approved

5.2 Конструктор страниц

• Drag-and-drop сборка страницы из блоков
• Сохранение как эксперимент
• История версий

5.3 Библиотека экспериментов

• Список всех экспериментальных компонентов/страниц
• Фильтрация по статусу
• Возможность «утвердить» и перенести в основную секцию

---

6. Оффлайн элементы (Offline Brand Elements)

Раздел содержит документацию по всем физическим носителям фирменного стиля клиники. Страницы в брендбуке — справочные (не интерактивные): изображение носителя + правила применения.

6.1 Форма сотрудников

• Бежевый костюм: коричневый логотип, левая сторона груди
• Синий костюм: белый логотип, левая сторона груди
• Размеры логотипа на форме:
  • До 46 размера: 70 × 25,5 мм
  • От 48 размера: 90 × 32,8 мм
• Фотографии обоих вариантов формы
• Цвета ткани: 080M (тёмно-коричневый) / 010 (белый/светлый)

6.2 Бейджи сотрудников

• Размер: 70 × 30 мм
• Серый бейдж: имя + должность + степень
• Белый бейдж с логотипом: имя + должность + степень
• Правила размещения текста и логотипа
• Фотографии реальных бейджей

6.3 Внутренняя навигация (таблички)

• Навигационные таблички по этажам (указатели кабинетов)
• Таблички на дверях кабинетов (номер + врач + специализация + QR-код)
• Материал: оргстекло, наклейки из плёнок Oracal
• Цвета Oracal: 053M (бирюзовый), 073M (тёмно-серый)
• Шрифт: DINPro
• Фотографии реальных табличек, установленных в клинике
• Шаблоны с размерами и отступами

6.4 Брендирование транспорта

• Брендирование трамваев (полная оклейка борта)
• Применяемые цвета: 053M, 073M, 066M, 050M, 081M, 080M
• Правила размещения логотипа и текста
• Примеры готовых макетов (боковой вид, фрагменты)

6.5 Печатные материалы

• Листовки / флаеры (двусторонние)
• Визитные карточки сотрудников (с QR-кодом на профиль врача)
• Промо-материалы Telegram-бота (@OLENEVA CLINIC BOT)
• Для каждого носителя: изображение макета + размеры + технические требования к печати

---

7. Технические требования брендбука

• Адаптивность: desktop (1440px), tablet (768px), mobile (375px)
• Темная тема (опционально, обсудить)
• Копирование CSS/кода компонента в один клик
• Экспорт цветов в Figma-токены (JSON)
• Доступность: WCAG AA минимум