23 KiB
LLM Context — Цифровой брендбук Клиники
Клиника ухо, горло, нос им. проф. Е.Н.Оленевой
Версия контекста: 2.1 Дата обновления: 2026-03-22 Актуальный спринт: Sprint 3 Сайт клиники: 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-значения — приближённые цифровые эквиваленты. Для печати и оффлайн-носителей используй коды Oracal, не HEX.
| Oracal | Название | HEX | RGB | HSL | CSS-переменная | Применение |
|---|---|---|---|---|---|---|
| 053M | Основной бирюзовый | #7ecfca |
rgb(126,207,202) | hsl(177,47%,65%) | --brand-053m |
Акцент, CTA-кнопки, иконки, активные состояния |
| 073M | Тёмный серо-голубой | #5b7b87 |
rgb(91,123,135) | hsl(197,20%,44%) | --brand-073m |
Тёмный фон, хедер, заголовки навигации |
| 066M | Средний бирюзовый | #5bb5ad |
rgb(91,181,173) | hsl(174,33%,53%) | --brand-066m |
Вторичные акценты, фоны секций, иллюстрации |
| 050M | Тёмно-синий | #1b4c72 |
rgb(27,76,114) | hsl(208,61%,28%) | --brand-050m |
Наружная реклама, полиграфия, заголовки на светлом |
| 081M | Бежевый | #c4a882 |
rgb(196,168,130) | hsl(33,35%,64%) | --brand-081m |
Форма сотрудников, оффлайн носители, тёплые акценты |
| 080M | Тёмно-коричневый | #5c2e0e |
rgb(92,46,14) | hsl(23,73%,21%) | --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 Основной бирюзовый | #7ecfca |
Бирюзовый | #63bac3 |
Темнее, насыщеннее |
| 073M Тёмный серо-голубой | #5b7b87 |
Серо-бирюзовый | #60959c |
Светлее на сайте |
| 066M Средний бирюзовый | #5bb5ad |
Бирюзовый средний | #52b4bd |
Смещён в синеву |
| 081M Бежевый | #c4a882 |
Бежевый | #bf9975 |
Темнее, насыщеннее |
| 050M Тёмно-синий | #1b4c72 |
— | — | Не найден в CSS сайта |
| 080M Тёмно-коричневый | #5c2e0e |
— | — | Не найден в CSS сайта |
Важно: расхождения ожидаемы — это цифровая адаптация плёночных цветов под экран. При разработке digital-материалов используй цвета сайта (раздел 2.2), не Oracal.
2.4 Контрастность пар (WCAG 2.1)
| Пара | Коэффициент | AA (4.5:1) | AAA (7:1) | AA large (3:1) |
|---|---|---|---|---|
| Белый на тёмном серо-голубом (#5b7b87) | 4.6:1 | ✓ | ✕ | ✓ |
| Белый на тёмно-синем (#1b4c72) | 9.3:1 | ✓ | ✓ | ✓ |
| Белый на тёмно-коричневом (#5c2e0e) | 11.2:1 | ✓ | ✓ | ✓ |
| Белый на среднем бирюзовом (#5bb5ad) | 3.0:1 | ✕ | ✕ | ✓ |
| Тёмный текст (#111827) на основном бирюзовом (#7ecfca) | 5.8:1 | ✓ | ✕ | ✓ |
| Тёмный текст (#111827) на бежевом (#c4a882) | 4.8:1 | ✓ | ✕ | ✓ |
| Тёмно-коричневый (#5c2e0e) на бежевом (#c4a882) | 6.7:1 | ✓ | ✕ | ✓ |
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 Цветовые варианты
| Вариант | Фон | Логотип | Применение |
|---|---|---|---|
| Основной | Белый / светлый | Полноцветный | Сайт, полиграфия на белом |
| Инвертированный | Тёмный (#5b7b87, #1b4c72) | Белый (filter: brightness(0) invert(1)) |
Хедер, тёмные секции |
| На форме (беж) | Бежевый (#c4a882 / Oracal 081M) | Коричневый (#5c2e0e / Oracal 080M) | Одежда персонала |
| На форме (синий) | Тёмно-синий (#1b4c72 / 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:
/* Цвета бренда */
--brand-053m: #7ecfca; /* Основной бирюзовый */
--brand-073m: #5b7b87; /* Тёмный серо-голубой */
--brand-066m: #5bb5ad; /* Средний бирюзовый */
--brand-050m: #1b4c72; /* Тёмно-синий */
--brand-081m: #c4a882; /* Бежевый */
--brand-080m: #5c2e0e; /* Тёмно-коричневый */
--brand-white: #ffffff; /* Белый */
/* UI брендбука */
--bb-sidebar-bg: ... /* Фон сайдбара */
--bb-sidebar-border: ... /* Граница сайдбара */
--bb-sidebar-text: ... /* Текст сайдбара */
--bb-sidebar-text-muted: ...
--bb-sidebar-section: .../* Заголовки секций сайдбара */
--bb-sidebar-active-bg: ...
--bb-text: ... /* Основной текст контента */
--bb-text-muted: ... /* Приглушённый текст */
--bb-border: ... /* Границы */
--bb-content-bg: ... /* Фон карточек */
6. Оффлайн носители
6.1 Форма сотрудников
Варианты:
- Бежевый: ткань цвета Oracal 081M, логотип Oracal 080M (коричневый), расположение — левая сторона груди
- Синий: ткань цвета Oracal 050M (тёмно-синий), логотип белый (Oracal 010), расположение — левая сторона груди
Размеры логотипа на форме:
- Размеры до 46: 70 × 25,5 мм
- Размеры от 48: 90 × 32,8 мм
6.2 Бейджи
Размер: 70 × 30 мм Варианты: серый (светлый) и белый Состав текста: имя, должность, учёная степень (при наличии) Шрифт: DINPro Логотип: левый верхний угол или левая часть
6.3 Внутренняя навигация
Материал: оргстекло Плёнки: Oracal 053M (бирюзовый) и 073M (тёмный серо-голубой) Типы табличек:
- Таблички на дверях кабинетов: номер кабинета, профиль врача с фото и QR-кодом
- Указатели по этажам: стрелки направлений + номера кабинетов
Нумерация кабинетов:
- Двузначное число, крупный шрифт (DINPro Bold)
- Фон: бирюзовый (053M), номер: белый
- Пример реализации: кабинеты 13, 31, «Кабинет 04»
6.4 Брендирование транспорта (трамвай)
Зоны оклейки:
- Борта: Oracal 053M (#7ecfca) + 073M (#5b7b87)
- Передняя часть: Oracal 066M (#5bb5ad) + 050M (#1b4c72)
- Акценты: Oracal 081M (#c4a882) + 080M (#5c2e0e)
Все 6 фирменных цветов присутствуют на транспорте.
7. Структура брендбука (страницы)
| URL | Статус | Описание |
|---|---|---|
/foundation/logo |
✅ Готова | Логотип, варианты, охранная зона, правила |
/foundation/colors |
✅ Готова | Палитра, контраст WCAG, цвета сайта, соответствие |
/foundation/typography |
✅ Готова | DINPro + Fira Sans, шкала стилей |
/foundation/icons |
🔜 Скоро | Иконография |
/offline/uniform |
✅ Готова | Форма сотрудников |
/offline/badges |
✅ Готова | Бейджи |
/offline/navigation |
✅ Готова | Внутренняя навигация |
/offline/transport |
✅ Готова | Брендирование транспорта |
/components/buttons |
🔜 Sprint 3 | Кнопки |
/components/forms |
🔜 Sprint 3 | Форм-контролы |
/components/* |
🔜 Sprint 3–4 | Карточки, бейджи, алерты, модалки, таблицы |
/blocks/* |
🔜 Sprint 5–8 | Hero, врачи, отзывы, новости, формы |
/pages/* |
🔜 Sprint 9–11 | Главная, заболевание, врачи, цены, контакты |
8. Правила применения цветов
Разрешено
- Использовать только цвета из фирменной палитры (раздел 2.1)
- Для digital: адаптировать к цветам сайта (раздел 2.2)
- Текст на цветном фоне — минимум WCAG AA (4.5:1)
- Белый логотип на тёмных фонах (073M, 050M, 080M)
- Коричневый логотип (080M) на бежевом фоне (081M)
Запрещено
- Использовать произвольные цвета вне палитры
- Осветлять, затемнять или менять оттенок фирменных цветов
- Текст с контрастом ниже 3:1 (даже для крупного текста)
- Размещать тёплые и холодные акценты рядом без разделителя
Иерархия цветов
Основной бирюзовый (053M / #7ecfca) ← главный идентификатор бренда
└── Средний бирюзовый (066M / #5bb5ad) ← вторичный акцент
└── Тёмный серо-голубой (073M / #5b7b87) ← фоны, хедер
Тёмно-синий (050M / #1b4c72) ← авторитет, полиграфия
Бежевый (081M / #c4a882) ← тепло, форма
└── Тёмно-коричневый (080M / #5c2e0e) ← текст на бежевом
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
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 цвета сайта (коралловый, светло-жёлтый, светло-зелёный) |
12. Что обновлять в этом файле
При каждом спринте добавляй:
- Новые компоненты и их спецификации (цвета, размеры, состояния)
- Новые правила применения, выявленные при разработке
- Изменения в палитре или типографике
- Новые паттерны и примеры кода
Соответствующий раздел в TZ.md: ФТ-03-LLM Соответствующий раздел в SPRINTS.md: задача «LLM-блок» в каждом спринте