brand_book/docs/LLM_CONTEXT.md

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

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

Версия контекста: 4.3 Дата обновления: 2026-03-24 Актуальный спринт: Sprint 5.5 Сайт клиники: 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	Подписи, второстепенный контент
H1 страницы	#cb9768	rgb(203,151,104)	Текст	1	Цвет H1 на страницах разделов
Светло-кремовый Hero	#f9f4e7	rgb(249,244,231)	Фоны	1	Фон Hero-баннера страниц разделов
Светло-бирюзовый фон	#d4f6f8	rgb(212,246,248)	Фоны	2	Фон обеих форм записи (ранее #b8e6ed)
Кремовый фон	#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:

/* Цвета бренда (точные 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/hero	✅ Sprint 5.5 v1.2	Hero-баннер: H1 36px #cb9768, заголовок 22px #333, кнопка pill, фон #f9f4e7
/blocks/doctors	✅ Sprint 5.5 v1.2	Врачи: H2 36px #000, статистика #60959c без фона, 6 реальных фото
/blocks/*	🔜 Sprint 5	Отзывы, формы, новости, footer
/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.

---

9b. Карточки, бейджи и алерты (Sprint 4)

Карточки · /components/cards

Карточка	Размеры ключевые	Источник на сайте	Фон / hover
DoctorCard	фото 110×160px	.doctor .image + .doctor .item	#fff / —
NewsCard	preview h=144px	#block-views-last-news-block-1 .views-column	#fff / #eef4d1 + shadow
ReviewCard	4-строчный clamp	.node-reviews	#eef4d1 / —
PriceCard	flex row: name + price	.field-name-field-price-priem	#fff / highlighted: #f0f9ff
ServiceCard	иконка 48×48px	— (нет прямого аналога)	#fff / shadow

DoctorCard: фото 110×160px (placeholder фон #dff0fa), кнопка .bb-btn-outline .bb-btn-sm NewsCard hover CSS: background: #eef4d1; box-shadow: 0 0 16px 0 #9e9e9a; — взят с реального сайта ReviewCard: звёзды SVG, заливка #f59e0b, WebkitLineClamp: 4

Бейджи, теги, алерты

Элемент	Варианты	Применение
Badge	primary (#0089c3) / success (#059669) / warning (#d97706) / danger (#dc2626) / neutral (#6b7280)	Статус врача, категория, акция
Tag	default (border) / active (brand bg)	Фильтры, категории услуг
Alert	info (#dff0fa/#075985) / success (#d1fae5/#065f46) / warning (#fef3c7/#92400e) / error (#fee2e2/#991b1b)	Системные сообщения

CSS класс hover: .bb-news-card:hover в globals.css

---

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 из каталога), кнопки/формы по реальному сайту
4.1	2026-03-22	Sprint 4 done: карточки (DoctorCard/NewsCard/ReviewCard/PriceCard/ServiceCard), бейджи/теги/алерты
4.2	2026-03-23	Sprint 5: блоки Hero v1.1, Doctors v1.1
4.3	2026-03-24	Sprint 5.5: исправлены CSS-стили блоков по реальному сайту (H1 #cb9768 36px, H2 #000 36px, фоны форм #d4f6f8, фон новостей #f2fee6, CTA-кнопка pill)

---

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

При каждом спринте добавляй:

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

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