# Содержание брендбука — Клиника «О!Клиника» (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 минимум