arazor72/brand_book
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
2b66fb9cc1466f7bd933e60dafd07dea5929962d
brand_book/docs/LLM_CONTEXT.md
T
AR 15 M4 2b66fb9cc1 docs: update LLM_CONTEXT.md to v4.0 (Sprint 4 start) 
- All 6 Oracal brand colors updated to exact catalog RGB values
- Contrast table recalculated for new hex values
- Color mapping notes updated (typography of differences)
- Logo color variants updated with new hex refs
- CSS vars section updated
- Transport hex refs updated
- Color rules updated (white on 073M/066M/050M/080M, dark on 053M/081M)
- Section 9a: button variants now match real site (primary/outline/teal/pill)
- Section 9a: form controls match real site (height 50px, border #ccc)
- Section 7: /components/cards added as Sprint 4 in progress
- History: version 4.0 added

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-22 23:04:32 +05:00

424 lines
26 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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-блок» в каждом спринте
Reference in New Issue View Git Blame Copy Permalink