# LLM Context — Цифровой брендбук Клиники

## Клиника ухо, горло, нос им. проф. Е.Н.Оленевой

**Версия контекста:** 4.0
**Дата обновления:** 2026-03-22
**Актуальный спринт:** Sprint 4
**Сайт клиники:** https://oclinica.ru
**Брендбук (локально):** http://localhost:3001
**Брендбук (production):** https://web-oclinica.vercel.app

---

## Назначение файла

Этот файл — единый источник дизайн-данных клиники в машиночитаемом формате.
Используется как контекст для LLM при:
- разработке страниц и компонентов сайта
- создании макетов и прототипов
- разработке мобильных приложений
- проектировании новых носителей бренда
- генерации CSS / Tailwind / Figma Tokens

При работе с любым материалом клиники **всегда загружай этот файл первым**.

---

## 1. О клинике

**Полное название:** Клиника ухо, горло, нос им. проф. Е.Н.Оленевой
**Тип:** Медицинская клиника, отоларингология (ЛОР)
**Город:** Пермь
**Платформа сайта:** Drupal (тема `clinic_bootstrap_mobile`)
**Аудитория:** Пациенты, врачи клиники, подрядчики

---

## 2. Цветовая палитра

### 2.1 Фирменные цвета (Oracal — базовая палитра)

Основаны на кодах самоклеящейся плёнки Oracal. HEX-значения рассчитаны по **точным RGB
из каталога Oracal**. Для печати и оффлайн-носителей используй коды Oracal, не HEX.

| Oracal | Название              | HEX       | RGB               | HSL               | CSS-переменная   | Применение |
|--------|-----------------------|-----------|-------------------|-------------------|------------------|------------|
| 053M   | Основной бирюзовый    | `#0089c3` | rgb(0,137,195)    | hsl(198,100%,38%) | `--brand-053m`   | Акцент, CTA-кнопки, иконки, активные состояния |
| 073M   | Тёмный серо-голубой   | `#53514e` | rgb(83,81,78)     | hsl(38,3%,32%)    | `--brand-073m`   | Тёмный фон, хедер, заголовки навигации |
| 066M   | Средний бирюзовый     | `#00818c` | rgb(0,129,140)    | hsl(185,100%,27%) | `--brand-066m`   | Вторичные акценты, фоны секций, иллюстрации |
| 050M   | Тёмно-синий           | `#1b2e5d` | rgb(27,46,93)     | hsl(223,55%,24%)  | `--brand-050m`   | Наружная реклама, полиграфия, заголовки на светлом |
| 081M   | Бежевый               | `#a8885c` | rgb(168,136,92)   | hsl(35,30%,51%)   | `--brand-081m`   | Форма сотрудников, оффлайн носители, тёплые акценты |
| 080M   | Тёмно-коричневый      | `#432f1e` | rgb(67,47,30)     | hsl(27,38%,19%)   | `--brand-080m`   | Текст на бежевых поверхностях, логотип на форме |
| —      | Белый                 | `#ffffff` | rgb(255,255,255)  | hsl(0,0%,100%)    | `--brand-white`  | Фон, инвертированный текст, логотип на тёмных фонах |

### 2.2 Цвета сайта oclinica.ru (реальный CSS)

Извлечены из CSS темы Drupal:
`https://perm.oclinica.ru/sites/all/themes/clinic_bootstrap_mobile/css/style.css`
Метод: python + regex + Counter, 2026-03-22

| Название              | HEX       | RGB               | Группа   | Вхождений | Применение на сайте |
|-----------------------|-----------|-------------------|----------|-----------|---------------------|
| Бежевый               | `#bf9975` | rgb(191,153,117)  | Акценты  | 12        | Основной тёплый акцент, фоны, рамки, текст |
| Серо-бирюзовый        | `#60959c` | rgb(96,149,156)   | Акценты  | 7         | Основной холодный акцент, ссылки |
| Бирюзовый             | `#63bac3` | rgb(99,186,195)   | Акценты  | 4         | Фоны акцентных блоков, иконки |
| Бирюзовый средний     | `#52b4bd` | rgb(82,180,189)   | Акценты  | 4         | Вторичные цветовые акценты |
| Коралловый            | `#ffa39c` | rgb(255,163,156)  | Акценты  | 2         | CTA-кнопки («Запишите меня!») |
| Основной текст        | `#464646` | rgb(70,70,70)     | Текст    | 3         | Цвет основного текста на сайте |
| Второстепенный текст  | `#949290` | rgb(148,146,144)  | Текст    | 4         | Подписи, второстепенный контент |
| Светло-бирюзовый фон  | `#b8e6ed` | rgb(184,230,237)  | Фоны     | 1         | Фоны светлых секций с акцентом |
| Кремовый фон          | `#e9e4d4` | rgb(233,228,212)  | Фоны     | 1         | Тёплые фоны секций |
| Светло-жёлтый фон     | `#eef4d1` | rgb(238,244,209)  | Фоны     | 1         | Фон карточек отзывов |
| Светло-зелёный фон    | `#f2fee6` | rgb(242,254,230)  | Фоны     | 1         | Фон секции новостей |

### 2.3 Соответствие Oracal → Сайт

| Oracal (бренд)           | HEX бренда | Сайт (цифровой)       | HEX сайта | Отклонение |
|--------------------------|------------|-----------------------|-----------|------------|
| 053M Основной бирюзовый  | `#0089c3`  | Бирюзовый             | `#63bac3` | Oracal ярко-синий; сайт светлее и голубее |
| 073M Тёмный серо-голубой | `#53514e`  | Серо-бирюзовый        | `#60959c` | Oracal тёмно-серый; сайт серо-бирюзовый (значительное расхождение) |
| 066M Средний бирюзовый   | `#00818c`  | Бирюзовый средний     | `#52b4bd` | Oracal тёмный бирюзовый; сайт светлее |
| 081M Бежевый             | `#a8885c`  | Бежевый               | `#bf9975` | Oracal тёплый охристый; сайт прохладнее и светлее |
| 050M Тёмно-синий         | `#1b2e5d`  | —                     | —         | Не найден в CSS сайта |
| 080M Тёмно-коричневый    | `#432f1e`  | —                     | —         | Не найден в CSS сайта |

**Важно:** расхождения ожидаемы — это цифровая адаптация плёночных цветов под экран.
При разработке digital-материалов используй цвета сайта (раздел 2.2), не Oracal.

### 2.4 Контрастность пар (WCAG 2.1)

| Пара                                         | Коэффициент | AA (4.5:1) | AAA (7:1) | AA large (3:1) |
|----------------------------------------------|-------------|------------|-----------|----------------|
| Белый на тёмном серо-голубом (#53514e 073M)  | 7.9:1       | ✓          | ✓         | ✓              |
| Белый на тёмно-синем (#1b2e5d 050M)          | 13.2:1      | ✓          | ✓         | ✓              |
| Белый на тёмно-коричневом (#432f1e 080M)     | 12.6:1      | ✓          | ✓         | ✓              |
| Белый на среднем бирюзовом (#00818c 066M)    | 4.7:1       | ✓          | ✕         | ✓              |
| Тёмный (#111827) на основном бирюзовом (#0089c3 053M) | 4.7:1 | ✓        | ✕         | ✓              |
| Тёмный (#111827) на бежевом (#a8885c 081M)   | 5.5:1       | ✓          | ✕         | ✓              |
| Тёмно-коричневый (#432f1e) на бежевом (#a8885c) | 3.8:1   | ✕          | ✕         | ✓ (только крупный ≥18pt) |

---

## 3. Типографика

### 3.1 DINPro — фирменный шрифт (оффлайн)

**Применение:** логотип, оффлайн-носители (бейджи, навигационные таблички, транспорт,
форма сотрудников, полиграфия).
**Не использовать** на веб-сайте и в digital-материалах (лицензионный шрифт,
нет легального встраивания в веб).
**Веса:** Regular, Medium, Bold

| Стиль    | font-weight | font-size | line-height | letter-spacing | Применение |
|----------|-------------|-----------|-------------|----------------|------------|
| Display  | 700         | 48px      | 1.15        | -0.5px         | Крупные заголовки носителей |
| H1       | 700         | 36px      | 1.2         | -0.3px         | Основной заголовок печатных материалов |
| H2       | 700         | 28px      | 1.25        | -0.2px         | Подзаголовки носителей |
| H3       | 500         | 22px      | 1.3         | 0px            | Подзаголовки третьего уровня |
| Body     | 400         | 16px      | 1.5         | 0px            | Основной текст оффлайн |
| Small    | 400         | 12px      | 1.4         | 0.2px          | Подписи, бейджи, таблички |
| Caption  | 400         | 10px      | 1.3         | 0.4px          | Сноски, технические пометки |

### 3.2 Fira Sans — веб-шрифт (digital)

**Применение:** сайт oclinica.ru, цифровые коммуникации, digital-баннеры, email.
**Источник:** Google Fonts (`https://fonts.google.com/specimen/Fira+Sans`)
**Поддержка кириллицы:** да
**Используемые веса:** 300 (Light), 400 (Regular), 500 (Medium), 600 (SemiBold)
**CSS:** `font-family: 'Fira Sans', sans-serif;`

| Стиль          | font-weight | font-size     | line-height | letter-spacing | Применение |
|----------------|-------------|---------------|-------------|----------------|------------|
| h1             | 600         | 2.25rem (36px)| 1.25        | -0.025em       | Заголовок страницы |
| h2             | 600         | 1.875rem (30px)| 1.3        | -0.02em        | Заголовок секции |
| h3             | 500         | 1.5rem (24px) | 1.375       | -0.01em        | Подзаголовок |
| h4             | 500         | 1.25rem (20px)| 1.4         | 0em            | Заголовок компонента |
| h5             | 500         | 1.125rem (18px)| 1.45       | 0em            | Подзаголовок компонента |
| h6             | 500         | 1rem (16px)   | 1.5         | 0.01em         | Метка секции |
| body-large     | 400         | 1.125rem (18px)| 1.6        | 0em            | Лид-текст, вводный абзац |
| body           | 400         | 1rem (16px)   | 1.625       | 0em            | Основной текст |
| body-small     | 400         | 0.875rem (14px)| 1.5        | 0em            | Дополнительный текст, подписи |
| caption        | 300         | 0.75rem (12px)| 1.4         | 0.02em         | Подписи к изображениям, сноски |
| label          | 500         | 0.875rem (14px)| 1.2        | 0.03em         | Метки форм |
| overline       | 600         | 0.6875rem (11px)| 1.2       | 0.1em          | Надписи над заголовками (uppercase) |

**Принцип выбора шрифта:**
- Носитель цифровой → Fira Sans
- Носитель печатный / физический → DINPro

---

## 4. Логотип

### 4.1 Версии логотипа

**Основной логотип** — включает название специализации («ухо, горло, нос»).
Используется на всех основных носителях: сайт, навигация, транспорт, форма.

**Общий логотип** — без специализации, только название клиники или сеть.
Используется для обозначения сети клиник, в корпоративных материалах.

### 4.2 Файлы

| Файл | Описание | Путь в проекте |
|------|----------|----------------|
| `logo-transparent.png` | Логотип с прозрачным фоном | `apps/web/public/logo/logo-transparent.png` |

SVG-версия ожидается (не получена от клиники).

### 4.3 Цветовые варианты

| Вариант | Фон | Логотип | Применение |
|---------|-----|---------|------------|
| Основной | Белый / светлый | Полноцветный | Сайт, полиграфия на белом |
| Инвертированный | Тёмный (#53514e, #1b2e5d) | Белый (`filter: brightness(0) invert(1)`) | Хедер, тёмные секции |
| На форме (беж) | Бежевый (#a8885c / Oracal 081M) | Коричневый (#432f1e / Oracal 080M) | Одежда персонала |
| На форме (синий) | Тёмно-синий (#1b2e5d / Oracal 050M) | Белый | Одежда персонала |

### 4.4 Охранная зона

Минимальный отступ вокруг логотипа = **высота буквы «К»** в названии.
Запрещено размещать другие элементы в охранной зоне.

### 4.5 Минимальные размеры

| Носитель | Размер логотипа |
|----------|----------------|
| Одежда до р.46 | 70 × 25,5 мм |
| Одежда от р.48 | 90 × 32,8 мм |

### 4.6 Запрещено

- Искажать пропорции
- Менять цвета на нефирменные
- Добавлять тени, обводки, эффекты
- Размещать на пёстром или плохо контрастном фоне
- Использовать низкое разрешение (< 150 dpi для печати)
- Переворачивать или отражать

---

## 5. CSS-переменные брендбука

Определены в `apps/web/app/globals.css`:

```css
/* Цвета бренда (точные RGB из каталога Oracal) */
--brand-053m: #0089c3;   /* Основной бирюзовый · rgb(0,137,195) */
--brand-073m: #53514e;   /* Тёмный серо-голубой · rgb(83,81,78) */
--brand-066m: #00818c;   /* Средний бирюзовый · rgb(0,129,140) */
--brand-050m: #1b2e5d;   /* Тёмно-синий · rgb(27,46,93) */
--brand-081m: #a8885c;   /* Бежевый · rgb(168,136,92) */
--brand-080m: #432f1e;   /* Тёмно-коричневый · rgb(67,47,30) */
--brand-white: #ffffff;  /* Белый */

/* UI брендбука */
--bb-sidebar-bg: #f8f9fa;
--bb-sidebar-border: #e5e7eb;
--bb-sidebar-text: #374151;
--bb-sidebar-text-muted: #6b7280;
--bb-sidebar-active-bg: #dff0fa;      /* светло-синий под 053M */
--bb-sidebar-active-text: var(--brand-053m);
--bb-sidebar-section: #9ca3af;
--bb-content-bg: #ffffff;
--bb-border: #e5e7eb;
--bb-text: #111827;
--bb-text-muted: #6b7280;
```

---

## 6. Оффлайн носители

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

**Варианты:**
- Бежевый: ткань цвета Oracal 081M (#a8885c), логотип Oracal 080M (#432f1e, коричневый), расположение — левая сторона груди
- Синий: ткань цвета Oracal 050M (#1b2e5d, тёмно-синий), логотип белый (Oracal 010), расположение — левая сторона груди

**Размеры логотипа на форме:**
- Размеры до 46: 70 × 25,5 мм
- Размеры от 48: 90 × 32,8 мм

### 6.2 Бейджи

**Размер:** 70 × 30 мм
**Варианты:** серый (светлый) и белый
**Состав текста:** имя, должность, учёная степень (при наличии)
**Шрифт:** DINPro
**Логотип:** левый верхний угол или левая часть

### 6.3 Внутренняя навигация

**Материал:** оргстекло
**Плёнки:** Oracal 053M (#0089c3) и 073M (#53514e)
**Типы табличек:**
- Таблички на дверях кабинетов: номер кабинета, профиль врача с фото и QR-кодом
- Указатели по этажам: стрелки направлений + номера кабинетов

**Нумерация кабинетов:**
- Двузначное число, крупный шрифт (DINPro Bold)
- Фон: бирюзовый (053M), номер: белый
- Пример реализации: кабинеты 13, 31, «Кабинет 04»

### 6.4 Брендирование транспорта (трамвай)

**Зоны оклейки:**
- Борта: Oracal 053M (#0089c3) + 073M (#53514e)
- Передняя часть: Oracal 066M (#00818c) + 050M (#1b2e5d)
- Акценты: Oracal 081M (#a8885c) + 080M (#432f1e)

**Все 6 фирменных цветов присутствуют на транспорте.**

---

## 7. Структура брендбука (страницы)

| URL | Статус | Описание |
|-----|--------|----------|
| `/foundation/logo` | ✅ Готова | Логотип, варианты, охранная зона, правила |
| `/foundation/colors` | ✅ Готова | Палитра (Oracal точные RGB), контраст WCAG, цвета сайта, соответствие |
| `/foundation/typography` | ✅ Готова | DINPro + Fira Sans, шкала стилей |
| `/foundation/icons` | 🔜 Скоро | Иконография |
| `/offline/uniform` | ✅ Готова | Форма сотрудников |
| `/offline/badges` | ✅ Готова | Бейджи |
| `/offline/navigation` | ✅ Готова | Внутренняя навигация |
| `/offline/transport` | ✅ Готова | Брендирование транспорта |
| `/components/buttons` | ✅ Готова | Кнопки — 4 варианта с реального сайта, размеры, состояния |
| `/components/forms` | ✅ Готова | Форм-контролы — Input/Textarea/Select/Checkbox/Radio/Toggle |
| `/components/cards` | 🚧 Sprint 4 | Карточки — врач, услуга, новость, отзыв, цена + бейджи/теги/алерты |
| `/components/*` | 🔜 Sprint 4–5 | Модалки, таблицы, навигация |
| `/blocks/*` | 🔜 Sprint 5–8 | Hero, врачи, отзывы, новости, формы |
| `/pages/*` | 🔜 Sprint 9–11 | Главная, заболевание, врачи, цены, контакты |

---

## 8. Правила применения цветов

### Разрешено
- Использовать только цвета из фирменной палитры (раздел 2.1)
- Для digital: адаптировать к цветам сайта (раздел 2.2)
- Текст на цветном фоне — минимум WCAG AA (4.5:1)
- Белый текст на тёмных фонах: 073M (#53514e), 066M (#00818c), 050M (#1b2e5d), 080M (#432f1e)
- Тёмный текст (#111827) на светлых: 053M (#0089c3), 081M (#a8885c)
- Коричневый логотип (080M) на бежевом фоне (081M) — только крупный текст (3.8:1)

### Запрещено
- Использовать произвольные цвета вне палитры
- Осветлять, затемнять или менять оттенок фирменных цветов
- Текст с контрастом ниже 3:1 (даже для крупного текста)
- Размещать тёплые и холодные акценты рядом без разделителя

### Иерархия цветов

```
Основной бирюзовый (053M / #0089c3) ← главный идентификатор бренда
    └── Средний бирюзовый (066M / #00818c) ← вторичный акцент
        └── Тёмный серо-голубой (073M / #53514e) ← фоны, хедер

Тёмно-синий (050M / #1b2e5d) ← авторитет, полиграфия
Бежевый (081M / #a8885c) ← тепло, форма
    └── Тёмно-коричневый (080M / #432f1e) ← текст на бежевом
```

---

## 9. Правила применения типографики

### Веб (Fira Sans)
- H1 только один на странице
- Заголовки не пропускать по уровням (h1→h2→h3)
- Основной текст: 16px / 400 / 1.625
- Минимальный размер текста на экране: 12px
- Кириллица: только Fira Sans, не DINPro

### Оффлайн (DINPro)
- Все физические носители: DINPro
- Логотип: DINPro Bold
- Таблички: DINPro Medium / Bold
- Не использовать light (300) для текста < 14pt

---

## 9a. Базовые компоненты (Sprint 3)

### Кнопки (Button) · `/components/buttons`

Варианты скопированы с реального сайта perm.oclinica.ru.
CSS-классы в `globals.css`. Компонент: `@/components/ui/Button` (React, "use client").

| Вариант | CSS класс        | Фон      | Текст   | Граница   | Border-radius | Применение |
|---------|------------------|----------|---------|-----------|---------------|------------|
| primary | .bb-btn-primary  | #FFA39C  | #fff    | #FF847B   | 7px, bold, shadow | Форма записи «Запишите меня!» |
| outline | .bb-btn-outline  | #fff     | #BF9975 | #BF9975   | 7px           | «Записаться на приём» |
| teal    | .bb-btn-teal     | #60959C  | #fff    | прозрачная| 7px           | «Позвонить» |
| pill    | .bb-btn-pill     | #E9E4D4  | #333    | #D5CFBD   | 25px          | «Заказать звонок» |

| Размер | CSS класс  | padding      | font-size |
|--------|------------|--------------|-----------|
| sm     | .bb-btn-sm | 4px 11px     | 13px      |
| md     | .bb-btn-md | 8px 16px     | 14px      |
| lg     | .bb-btn-lg | 10px 24px    | 18px      |

**Состояния:** default · hover (brightness 0.9) · active (brightness 0.82) · loading (spinner) · disabled (opacity 0.5)

### Форм-контролы (Forms) · `/components/forms`

Размеры соответствуют entityform-блокам на реальном сайте.

| Элемент  | CSS класс        | Тег HTML                   | Высота  | Описание |
|----------|------------------|----------------------------|---------|----------|
| Input    | .bb-input        | `<input>`                  | 50px    | text, email, password · border 1px #ccc · radius 4px |
| Textarea | .bb-textarea     | `<textarea>`               | ≥100px  | многострочный, resize:vertical |
| Select   | .bb-select       | `<select>`                 | 50px    | с кастомной SVG-стрелкой |
| Checkbox | .bb-checkbox     | `<input type="checkbox">`  | 16×16px | accent-color: #53514e |
| Radio    | .bb-radio        | `<input type="radio">`     | 16×16px | accent-color: #53514e |
| Toggle   | .bb-toggle-track | React-компонент `<Toggle>` | 24px    | 44×24px track + 20px thumb |

**Состояния полей:** default (border 1px solid #ccc) · focus (border #0089c3 + box-shadow rgba(0,137,195,0.2)) · error (.bb-error, border #dc2626) · disabled (opacity 0.5)

**Контекст на сайте:** фон формы #b8e6ed, ширина полей 302px, entityform-блоки.

**Toggle:** выкл → track #d1d5db · вкл → track #53514e · thumb: белый круг 20×20px.

---

## 10. Технический стек проекта

| Слой | Технология | Версия |
|------|-----------|--------|
| Фронтенд | Next.js App Router | 16.x |
| Стилизация | Tailwind CSS | 4.x |
| Язык | TypeScript | 5.x |
| Шрифты | next/font/google | — |
| Бэкенд | NestJS | 11.x |
| БД | PostgreSQL + Prisma | 16.x / 7.x |
| Деплой | Vercel Hobby | — |
| Пакетный менеджер | pnpm | 10.x |

---

## 11. История изменений контекста

| Версия | Дата | Что добавлено |
|--------|------|---------------|
| 1.0 | 2026-03-22 | Sprint 1: логотип, базовые цвета |
| 2.0 | 2026-03-22 | Sprint 2: типографика, оффлайн носители, цвета сайта (8 цветов) |
| 2.1 | 2026-03-22 | Sprint 2 доп.: +3 цвета сайта (коралловый, светло-жёлтый, светло-зелёный) |
| 3.0 | 2026-03-22 | Sprint 3: кнопки (Button), форм-контролы (Input/Textarea/Select/Checkbox/Radio/Toggle), LLM-блок на логотипе |
| 4.0 | 2026-03-22 | Sprint 4 start: исправлены цвета Oracal (точные RGB из каталога), кнопки/формы по реальному сайту, Sprint 4 в планах |

---

## 12. Что обновлять в этом файле

При каждом спринте добавляй:
- Новые компоненты и их спецификации (цвета, размеры, состояния)
- Новые правила применения, выявленные при разработке
- Изменения в палитре или типографике
- Новые паттерны и примеры кода

**Соответствующий раздел в TZ.md:** ФТ-03-LLM
**Соответствующий раздел в SPRINTS.md:** задача «LLM-блок» в каждом спринте