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>
1 week ago · 2b66fb9cc1
1 changed files with 98 additions and 92 deletions
--- a/docs/LLM_CONTEXT.md
+++ b/docs/LLM_CONTEXT.md
@ -2,9 +2,9 @@

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

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

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

-Основаны на кодах самоклеящейся плёнки Oracal. HEX-значения — приближённые
-цифровые эквиваленты. **Для печати и оффлайн-носителей используй коды Oracal,
-не HEX.**
+Основаны на кодах самоклеящейся плёнки Oracal. HEX-значения рассчитаны по **точным RGB
+из каталога Oracal**. Для печати и оффлайн-носителей используй коды 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`   | Текст на бежевых поверхностях, логотип на форме |
+|--------|-----------------------|-----------|-------------------|-------------------|------------------|------------|
+| 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)
@ -77,12 +76,12 @@

 | Oracal (бренд)           | HEX бренда | Сайт (цифровой)       | HEX сайта | Отклонение |
 |--------------------------|------------|-----------------------|-----------|------------|
-| 053M Основной бирюзовый  | `#7ecfca`  | Бирюзовый             | `#63bac3` | Темнее, насыщеннее |
-| 073M Тёмный серо-голубой | `#5b7b87`  | Серо-бирюзовый        | `#60959c` | Светлее на сайте |
-| 066M Средний бирюзовый   | `#5bb5ad`  | Бирюзовый средний     | `#52b4bd` | Смещён в синеву |
-| 081M Бежевый             | `#c4a882`  | Бежевый               | `#bf9975` | Темнее, насыщеннее |
-| 050M Тёмно-синий         | `#1b4c72`  | —                     | —         | Не найден в CSS сайта |
-| 080M Тёмно-коричневый    | `#5c2e0e`  | —                     | —         | Не найден в CSS сайта |
+| 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.
@ -90,14 +89,14 @@
 ### 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 | ✓         | ✕         | ✓              |
+|----------------------------------------------|-------------|------------|-----------|----------------|
+| Белый на тёмном серо-голубом (#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) |

 ---

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

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

@ -205,26 +204,27 @@ SVG-версия ожидается (не получена от клиники).
 Определены в `apps/web/app/globals.css`:

 ```css
-/* Цвета бренда */
--brand-053m: #7ecfca;   /* Основной бирюзовый */
--brand-073m: #5b7b87;   /* Тёмный серо-голубой */
--brand-066m: #5bb5ad;   /* Средний бирюзовый */
--brand-050m: #1b4c72;   /* Тёмно-синий */
--brand-081m: #c4a882;   /* Бежевый */
--brand-080m: #5c2e0e;   /* Тёмно-коричневый */
+/* Цвета бренда (точные 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: ...     /* Фон сайдбара */
--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: ...     /* Фон карточек */
+--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;
 ```

 ---
@ -234,8 +234,8 @@ SVG-версия ожидается (не получена от клиники).
 ### 6.1 Форма сотрудников

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

 **Размеры логотипа на форме:**
 - Размеры до 46: 70 × 25,5 мм
@ -252,7 +252,7 @@ SVG-версия ожидается (не получена от клиники).
 ### 6.3 Внутренняя навигация

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

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

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

@ -278,16 +278,17 @@ SVG-версия ожидается (не получена от клиники).
 | URL | Статус | Описание |
 |-----|--------|----------|
 | `/foundation/logo` | ✅ Готова | Логотип, варианты, охранная зона, правила |
-| `/foundation/colors` | ✅ Готова | Палитра, контраст WCAG, цвета сайта, соответствие |
+| `/foundation/colors` | ✅ Готова | Палитра (Oracal точные RGB), контраст WCAG, цвета сайта, соответствие |
 | `/foundation/typography` | ✅ Готова | DINPro + Fira Sans, шкала стилей |
 | `/foundation/icons` | 🔜 Скоро | Иконография |
 | `/offline/uniform` | ✅ Готова | Форма сотрудников |
 | `/offline/badges` | ✅ Готова | Бейджи |
 | `/offline/navigation` | ✅ Готова | Внутренняя навигация |
 | `/offline/transport` | ✅ Готова | Брендирование транспорта |
-| `/components/buttons` | ✅ Готова | Кнопки — все варианты, размеры, состояния |
-| `/components/forms` | ✅ Готова | Форм-контролы — Input, Textarea, Select, Checkbox, Radio, Toggle |
-| `/components/*` | 🔜 Sprint 3–4 | Карточки, бейджи, алерты, модалки, таблицы |
+| `/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 | Главная, заболевание, врачи, цены, контакты |

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

 ### Запрещено
 - Использовать произвольные цвета вне палитры
@ -311,13 +313,13 @@ SVG-версия ожидается (не получена от клиники).
 ### Иерархия цветов

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

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

 ---
@ -343,39 +345,42 @@ SVG-версия ожидается (не получена от клиники).

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

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

-| Вариант   | CSS класс        | Фон        | Текст   | Граница   | Применение |
-|-----------|------------------|------------|---------|-----------|------------|
-| primary   | .bb-btn-primary   | #5b7b87    | #fff    | #5b7b87   | Главный CTA: «Записаться», «Подтвердить» |
-| secondary | .bb-btn-secondary | прозрачный | #5b7b87 | #5b7b87   | Второстепенное действие |
-| ghost     | .bb-btn-ghost     | прозрачный | #5b7b87 | нет       | Третичное действие, отмена |
-| danger    | .bb-btn-danger    | #dc2626    | #fff    | #dc2626   | Деструктивное действие |
+| Вариант | 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 | border-radius |
-|--------|------------|------------|-----------|---------------|
-| sm     | .bb-btn-sm | 5px 12px   | 13px      | 6px           |
-| md     | .bb-btn-md | 8px 18px   | 14px      | 8px           |
-| lg     | .bb-btn-lg | 12px 26px  | 16px      | 10px          |
+| Размер | 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 + opacity 0.5) · disabled (opacity 0.5)
-
-**Правила:** не более одной primary на экран в контексте задачи · текст — глагол или призыв · Danger только для деструктивных действий.
+**Состояния:** default · hover (brightness 0.9) · active (brightness 0.82) · loading (spinner) · disabled (opacity 0.5)

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

-| Элемент  | CSS класс       | Тег HTML                   | Описание |
-|----------|-----------------|----------------------------|----------|
-| Input    | .bb-input        | `<input>`                  | text, email, password |
-| Textarea | .bb-textarea     | `<textarea>`               | многострочный, min-height: 100px |
-| Select   | .bb-select       | `<select>`                 | с кастомной SVG-стрелкой |
-| Checkbox | .bb-checkbox     | `<input type="checkbox">`  | 16×16px, accent-color: #5b7b87 |
-| Radio    | .bb-radio        | `<input type="radio">`     | 16×16px, accent-color: #5b7b87 |
-| Toggle   | .bb-toggle-track | React-компонент `<Toggle>` | 44×24px, track + thumb |
+Размеры соответствуют 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)

-**Состояния полей:** default (border #e5e7eb) · focus (border #7ecfca + box-shadow) · error (.bb-error, border #dc2626) · disabled (opacity 0.5)
+**Контекст на сайте:** фон формы #b8e6ed, ширина полей 302px, entityform-блоки.

-**Toggle:** выкл → track #d1d5db · вкл → track #5b7b87 (#73M) · thumb: белый круг 20×20px.
+**Toggle:** выкл → track #d1d5db · вкл → track #53514e · thumb: белый круг 20×20px.

 ---

@ -402,6 +407,7 @@ CSS-классы из `globals.css`. Компонент: `@/components/ui/Button
 | 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 в планах |

 ---