26 KiB
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:
/* Цвета бренда (точные 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-блок» в каждом спринте