# Содержание брендбука — Клиника «О!Клиника» (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 Типографика
- Шрифт: **Fira Sans** (веса 300, 400)
- Шкала размеров: h1–h6, body, caption, label, overline
- Межстрочный интервал, межбуквенный интервал для каждого стиля
- Правила использования: жирный, курсив, caps
- Примеры живого текста (заголовки, абзацы, списки)

### 1.3 Логотип
- Основная версия (светлый фон)
- Инвертированная версия (тёмный фон)
- Монохромная версия
- Охранная зона (минимальные отступы)
- Минимальные размеры
- Недопустимые варианты использования
- Скачивание файлов (SVG, PNG)
> ⏳ Логотип будет добавлен после получения вектора

### 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. Технические требования брендбука

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