arazor72/brand_book
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

docs: update LLM_CONTEXT.md to v4.0 (Sprint 4 start)

Browse Source 
- 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>
This commit is contained in:
AR 15 M4
2026-03-22 23:04:32 +05:00
parent 3811c579fd
commit 2b66fb9cc1
1 changed files with 98 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/LLM_CONTEXT.md
+98 -92
View File
@@ -2,9 +2,9 @@
## Клиника ухо, горло, нос им. проф. Е.Н.Оленевой ## Клиника ухо, горло, нос им. проф. Е.Н.Оленевой
**Версия контекста:** 3.0 **Версия контекста:** 4.0
**Дата обновления:** 2026-03-22 **Дата обновления:** 2026-03-22
**Актуальный спринт:** Sprint 3 **Актуальный спринт:** Sprint 4
**Сайт клиники:** https://oclinica.ru **Сайт клиники:** https://oclinica.ru
**Брендбук (локально):** http://localhost:3001 **Брендбук (локально):** http://localhost:3001
**Брендбук (production):** https://web-oclinica.vercel.app **Брендбук (production):** https://web-oclinica.vercel.app
@@ -39,19 +39,18 @@
### 2.1 Фирменные цвета (Oracal — базовая палитра) ### 2.1 Фирменные цвета (Oracal — базовая палитра)
Основаны на кодах самоклеящейся плёнки Oracal. HEX-значения — приближённые Основаны на кодах самоклеящейся плёнки Oracal. HEX-значения рассчитаны по **точным RGB
цифровые эквиваленты. **Для печати и оффлайн-носителей используй коды Oracal, из каталога Oracal**. Для печати и оффлайн-носителей используй коды Oracal, не HEX.
не HEX.**
| Oracal | Название | HEX | RGB | HSL | CSS-переменная | Применение | | Oracal | Название | HEX | RGB | HSL | CSS-переменная | Применение |
|--------|-----------------------|-----------|-------------------|------------------|------------------|------------| |--------|-----------------------|-----------|-------------------|-------------------|------------------|------------|
| 053M | Основной бирюзовый | `#7ecfca` | rgb(126,207,202) | hsl(177,47%,65%) | `--brand-053m` | Акцент, CTA-кнопки, иконки, активные состояния | | 053M | Основной бирюзовый | `#0089c3` | rgb(0,137,195) | hsl(198,100%,38%) | `--brand-053m` | Акцент, CTA-кнопки, иконки, активные состояния |
| 073M | Тёмный серо-голубой | `#5b7b87` | rgb(91,123,135) | hsl(197,20%,44%) | `--brand-073m` | Тёмный фон, хедер, заголовки навигации | | 073M | Тёмный серо-голубой | `#53514e` | rgb(83,81,78) | hsl(38,3%,32%) | `--brand-073m` | Тёмный фон, хедер, заголовки навигации |
| 066M | Средний бирюзовый | `#5bb5ad` | rgb(91,181,173) | hsl(174,33%,53%) | `--brand-066m` | Вторичные акценты, фоны секций, иллюстрации | | 066M | Средний бирюзовый | `#00818c` | rgb(0,129,140) | hsl(185,100%,27%) | `--brand-066m` | Вторичные акценты, фоны секций, иллюстрации |
| 050M | Тёмно-синий | `#1b4c72` | rgb(27,76,114) | hsl(208,61%,28%) | `--brand-050m` | Наружная реклама, полиграфия, заголовки на светлом | | 050M | Тёмно-синий | `#1b2e5d` | rgb(27,46,93) | hsl(223,55%,24%) | `--brand-050m` | Наружная реклама, полиграфия, заголовки на светлом |
| 081M | Бежевый | `#c4a882` | rgb(196,168,130) | hsl(33,35%,64%) | `--brand-081m` | Форма сотрудников, оффлайн носители, тёплые акценты | | 081M | Бежевый | `#a8885c` | rgb(168,136,92) | hsl(35,30%,51%) | `--brand-081m` | Форма сотрудников, оффлайн носители, тёплые акценты |
| 080M | Тёмно-коричневый | `#5c2e0e` | rgb(92,46,14) | hsl(23,73%,21%) | `--brand-080m` | Текст на бежевых поверхностях, логотип на форме | | 080M | Тёмно-коричневый | `#432f1e` | rgb(67,47,30) | hsl(27,38%,19%) | `--brand-080m` | Текст на бежевых поверхностях, логотип на форме |
| — | Белый | `#ffffff` | rgb(255,255,255) | hsl(0,0%,100%) | `--brand-white` | Фон, инвертированный текст, логотип на тёмных фонах | | — | Белый | `#ffffff` | rgb(255,255,255) | hsl(0,0%,100%) | `--brand-white` | Фон, инвертированный текст, логотип на тёмных фонах |
### 2.2 Цвета сайта oclinica.ru (реальный CSS) ### 2.2 Цвета сайта oclinica.ru (реальный CSS)
@@ -77,27 +76,27 @@
| Oracal (бренд) | HEX бренда | Сайт (цифровой) | HEX сайта | Отклонение | | Oracal (бренд) | HEX бренда | Сайт (цифровой) | HEX сайта | Отклонение |
|--------------------------|------------|-----------------------|-----------|------------| |--------------------------|------------|-----------------------|-----------|------------|
| 053M Основной бирюзовый | `#7ecfca` | Бирюзовый | `#63bac3` | Темнее, насыщеннее | | 053M Основной бирюзовый | `#0089c3` | Бирюзовый | `#63bac3` | Oracal ярко-синий; сайт светлее и голубее |
| 073M Тёмный серо-голубой | `#5b7b87` | Серо-бирюзовый | `#60959c` | Светлее на сайте | | 073M Тёмный серо-голубой | `#53514e` | Серо-бирюзовый | `#60959c` | Oracal тёмно-серый; сайт серо-бирюзовый (значительное расхождение) |
| 066M Средний бирюзовый | `#5bb5ad` | Бирюзовый средний | `#52b4bd` | Смещён в синеву | | 066M Средний бирюзовый | `#00818c` | Бирюзовый средний | `#52b4bd` | Oracal тёмный бирюзовый; сайт светлее |
| 081M Бежевый | `#c4a882` | Бежевый | `#bf9975` | Темнее, насыщеннее | | 081M Бежевый | `#a8885c` | Бежевый | `#bf9975` | Oracal тёплый охристый; сайт прохладнее и светлее |
| 050M Тёмно-синий | `#1b4c72` | — | — | Не найден в CSS сайта | | 050M Тёмно-синий | `#1b2e5d` | — | — | Не найден в CSS сайта |
| 080M Тёмно-коричневый | `#5c2e0e` | — | — | Не найден в CSS сайта | | 080M Тёмно-коричневый | `#432f1e` | — | — | Не найден в CSS сайта |
**Важно:** расхождения ожидаемы — это цифровая адаптация плёночных цветов под экран. **Важно:** расхождения ожидаемы — это цифровая адаптация плёночных цветов под экран.
При разработке digital-материалов используй цвета сайта (раздел 2.2), не Oracal. При разработке digital-материалов используй цвета сайта (раздел 2.2), не Oracal.
### 2.4 Контрастность пар (WCAG 2.1) ### 2.4 Контрастность пар (WCAG 2.1)
| Пара | Коэффициент | AA (4.5:1) | AAA (7:1) | AA large (3:1) | | Пара | Коэффициент | AA (4.5:1) | AAA (7:1) | AA large (3:1) |
|-------------------------------------------|-------------|------------|-----------|----------------| |----------------------------------------------|-------------|------------|-----------|----------------|
| Белый на тёмном серо-голубом (#5b7b87) | 4.6:1 | ✓ | ✕ | ✓ | | Белый на тёмном серо-голубом (#53514e 073M) | 7.9:1 | ✓ | ✓ | ✓ |
| Белый на тёмно-синем (#1b4c72) | 9.3:1 | ✓ | ✓ | ✓ | | Белый на тёмно-синем (#1b2e5d 050M) | 13.2:1 | ✓ | ✓ | ✓ |
| Белый на тёмно-коричневом (#5c2e0e) | 11.2:1 | ✓ | ✓ | ✓ | | Белый на тёмно-коричневом (#432f1e 080M) | 12.6:1 | ✓ | ✓ | ✓ |
| Белый на среднем бирюзовом (#5bb5ad) | 3.0:1 | ✕ | ✕ | ✓ | | Белый на среднем бирюзовом (#00818c 066M) | 4.7:1 | ✓ | ✕ | ✓ |
| Тёмный текст (#111827) на основном бирюзовом (#7ecfca) | 5.8:1 | ✓ | ✕ | ✓ | | Тёмный (#111827) на основном бирюзовом (#0089c3 053M) | 4.7:1 | ✓ | ✕ | ✓ |
| Тёмный текст (#111827) на бежевом (#c4a882) | 4.8:1 | ✓ | ✕ | ✓ | | Тёмный (#111827) на бежевом (#a8885c 081M) | 5.5:1 | ✓ | ✕ | ✓ |
| Тёмно-коричневый (#5c2e0e) на бежевом (#c4a882) | 6.7:1 | ✓ | ✕ | ✓ | | Тёмно-коричневый (#432f1e) на бежевом (#a8885c) | 3.8:1 | ✕ | ✕ | ✓ (только крупный ≥18pt) |
--- ---
@@ -173,9 +172,9 @@ SVG-версия ожидается (не получена от клиники).
| Вариант | Фон | Логотип | Применение | | Вариант | Фон | Логотип | Применение |
|---------|-----|---------|------------| |---------|-----|---------|------------|
| Основной | Белый / светлый | Полноцветный | Сайт, полиграфия на белом | | Основной | Белый / светлый | Полноцветный | Сайт, полиграфия на белом |
| Инвертированный | Тёмный (#5b7b87, #1b4c72) | Белый (`filter: brightness(0) invert(1)`) | Хедер, тёмные секции | | Инвертированный | Тёмный (#53514e, #1b2e5d) | Белый (`filter: brightness(0) invert(1)`) | Хедер, тёмные секции |
| На форме (беж) | Бежевый (#c4a882 / Oracal 081M) | Коричневый (#5c2e0e / Oracal 080M) | Одежда персонала | | На форме (беж) | Бежевый (#a8885c / Oracal 081M) | Коричневый (#432f1e / Oracal 080M) | Одежда персонала |
| На форме (синий) | Тёмно-синий (#1b4c72 / Oracal 050M) | Белый | Одежда персонала | | На форме (синий) | Тёмно-синий (#1b2e5d / Oracal 050M) | Белый | Одежда персонала |
### 4.4 Охранная зона ### 4.4 Охранная зона
@@ -205,26 +204,27 @@ SVG-версия ожидается (не получена от клиники).
Определены в `apps/web/app/globals.css`: Определены в `apps/web/app/globals.css`:
```css ```css
/* Цвета бренда */ /* Цвета бренда (точные RGB из каталога Oracal) */
--brand-053m: #7ecfca; /* Основной бирюзовый */ --brand-053m: #0089c3; /* Основной бирюзовый · rgb(0,137,195) */
--brand-073m: #5b7b87; /* Тёмный серо-голубой */ --brand-073m: #53514e; /* Тёмный серо-голубой · rgb(83,81,78) */
--brand-066m: #5bb5ad; /* Средний бирюзовый */ --brand-066m: #00818c; /* Средний бирюзовый · rgb(0,129,140) */
--brand-050m: #1b4c72; /* Тёмно-синий */ --brand-050m: #1b2e5d; /* Тёмно-синий · rgb(27,46,93) */
--brand-081m: #c4a882; /* Бежевый */ --brand-081m: #a8885c; /* Бежевый · rgb(168,136,92) */
--brand-080m: #5c2e0e; /* Тёмно-коричневый */ --brand-080m: #432f1e; /* Тёмно-коричневый · rgb(67,47,30) */
--brand-white: #ffffff; /* Белый */ --brand-white: #ffffff; /* Белый */
/* UI брендбука */ /* UI брендбука */
--bb-sidebar-bg: ... /* Фон сайдбара */ --bb-sidebar-bg: #f8f9fa;
--bb-sidebar-border: ... /* Граница сайдбара */ --bb-sidebar-border: #e5e7eb;
--bb-sidebar-text: ... /* Текст сайдбара */ --bb-sidebar-text: #374151;
--bb-sidebar-text-muted: ... --bb-sidebar-text-muted: #6b7280;
--bb-sidebar-section: .../* Заголовки секций сайдбара */ --bb-sidebar-active-bg: #dff0fa; /* светло-синий под 053M */
--bb-sidebar-active-bg: ... --bb-sidebar-active-text: var(--brand-053m);
--bb-text: ... /* Основной текст контента */ --bb-sidebar-section: #9ca3af;
--bb-text-muted: ... /* Приглушённый текст */ --bb-content-bg: #ffffff;
--bb-border: ... /* Границы */ --bb-border: #e5e7eb;
--bb-content-bg: ... /* Фон карточек */ --bb-text: #111827;
--bb-text-muted: #6b7280;
``` ```
--- ---
@@ -234,8 +234,8 @@ SVG-версия ожидается (не получена от клиники).
### 6.1 Форма сотрудников ### 6.1 Форма сотрудников
**Варианты:** **Варианты:**
- Бежевый: ткань цвета Oracal 081M, логотип Oracal 080M (коричневый), расположение — левая сторона груди - Бежевый: ткань цвета Oracal 081M (#a8885c), логотип Oracal 080M (#432f1e, коричневый), расположение — левая сторона груди
- Синий: ткань цвета Oracal 050M (тёмно-синий), логотип белый (Oracal 010), расположение — левая сторона груди - Синий: ткань цвета Oracal 050M (#1b2e5d, тёмно-синий), логотип белый (Oracal 010), расположение — левая сторона груди
**Размеры логотипа на форме:** **Размеры логотипа на форме:**
- Размеры до 46: 70 × 25,5 мм - Размеры до 46: 70 × 25,5 мм
@@ -252,7 +252,7 @@ SVG-версия ожидается (не получена от клиники).
### 6.3 Внутренняя навигация ### 6.3 Внутренняя навигация
**Материал:** оргстекло **Материал:** оргстекло
**Плёнки:** Oracal 053M (бирюзовый) и 073M (тёмный серо-голубой) **Плёнки:** Oracal 053M (#0089c3) и 073M (#53514e)
**Типы табличек:** **Типы табличек:**
- Таблички на дверях кабинетов: номер кабинета, профиль врача с фото и QR-кодом - Таблички на дверях кабинетов: номер кабинета, профиль врача с фото и QR-кодом
- Указатели по этажам: стрелки направлений + номера кабинетов - Указатели по этажам: стрелки направлений + номера кабинетов
@@ -265,9 +265,9 @@ SVG-версия ожидается (не получена от клиники).
### 6.4 Брендирование транспорта (трамвай) ### 6.4 Брендирование транспорта (трамвай)
**Зоны оклейки:** **Зоны оклейки:**
- Борта: Oracal 053M (#7ecfca) + 073M (#5b7b87) - Борта: Oracal 053M (#0089c3) + 073M (#53514e)
- Передняя часть: Oracal 066M (#5bb5ad) + 050M (#1b4c72) - Передняя часть: Oracal 066M (#00818c) + 050M (#1b2e5d)
- Акценты: Oracal 081M (#c4a882) + 080M (#5c2e0e) - Акценты: Oracal 081M (#a8885c) + 080M (#432f1e)
**Все 6 фирменных цветов присутствуют на транспорте.** **Все 6 фирменных цветов присутствуют на транспорте.**
@@ -278,16 +278,17 @@ SVG-версия ожидается (не получена от клиники).
| URL | Статус | Описание | | URL | Статус | Описание |
|-----|--------|----------| |-----|--------|----------|
| `/foundation/logo` | ✅ Готова | Логотип, варианты, охранная зона, правила | | `/foundation/logo` | ✅ Готова | Логотип, варианты, охранная зона, правила |
| `/foundation/colors` | ✅ Готова | Палитра, контраст WCAG, цвета сайта, соответствие | | `/foundation/colors` | ✅ Готова | Палитра (Oracal точные RGB), контраст WCAG, цвета сайта, соответствие |
| `/foundation/typography` | ✅ Готова | DINPro + Fira Sans, шкала стилей | | `/foundation/typography` | ✅ Готова | DINPro + Fira Sans, шкала стилей |
| `/foundation/icons` | 🔜 Скоро | Иконография | | `/foundation/icons` | 🔜 Скоро | Иконография |
| `/offline/uniform` | ✅ Готова | Форма сотрудников | | `/offline/uniform` | ✅ Готова | Форма сотрудников |
| `/offline/badges` | ✅ Готова | Бейджи | | `/offline/badges` | ✅ Готова | Бейджи |
| `/offline/navigation` | ✅ Готова | Внутренняя навигация | | `/offline/navigation` | ✅ Готова | Внутренняя навигация |
| `/offline/transport` | ✅ Готова | Брендирование транспорта | | `/offline/transport` | ✅ Готова | Брендирование транспорта |
| `/components/buttons` | ✅ Готова | Кнопки — все варианты, размеры, состояния | | `/components/buttons` | ✅ Готова | Кнопки — 4 варианта с реального сайта, размеры, состояния |
| `/components/forms` | ✅ Готова | Форм-контролы — Input, Textarea, Select, Checkbox, Radio, Toggle | | `/components/forms` | ✅ Готова | Форм-контролы — Input/Textarea/Select/Checkbox/Radio/Toggle |
| `/components/*` | 🔜 Sprint 3–4 | Карточки, бейджи, алерты, модалки, таблицы | | `/components/cards` | 🚧 Sprint 4 | Карточки — врач, услуга, новость, отзыв, цена + бейджи/теги/алерты |
| `/components/*` | 🔜 Sprint 4–5 | Модалки, таблицы, навигация |
| `/blocks/*` | 🔜 Sprint 5–8 | Hero, врачи, отзывы, новости, формы | | `/blocks/*` | 🔜 Sprint 5–8 | Hero, врачи, отзывы, новости, формы |
| `/pages/*` | 🔜 Sprint 9–11 | Главная, заболевание, врачи, цены, контакты | | `/pages/*` | 🔜 Sprint 9–11 | Главная, заболевание, врачи, цены, контакты |
@@ -299,8 +300,9 @@ SVG-версия ожидается (не получена от клиники).
- Использовать только цвета из фирменной палитры (раздел 2.1) - Использовать только цвета из фирменной палитры (раздел 2.1)
- Для digital: адаптировать к цветам сайта (раздел 2.2) - Для digital: адаптировать к цветам сайта (раздел 2.2)
- Текст на цветном фоне — минимум WCAG AA (4.5:1) - Текст на цветном фоне — минимум WCAG AA (4.5:1)
- Белый логотип на тёмных фонах (073M, 050M, 080M) - Белый текст на тёмных фонах: 073M (#53514e), 066M (#00818c), 050M (#1b2e5d), 080M (#432f1e)
- Коричневый логотип (080M) на бежевом фоне (081M) - Тёмный текст (#111827) на светлых: 053M (#0089c3), 081M (#a8885c)
- Коричневый логотип (080M) на бежевом фоне (081M) — только крупный текст (3.8:1)
### Запрещено ### Запрещено
- Использовать произвольные цвета вне палитры - Использовать произвольные цвета вне палитры
@@ -311,13 +313,13 @@ SVG-версия ожидается (не получена от клиники).
### Иерархия цветов ### Иерархия цветов
``` ```
Основной бирюзовый (053M / #7ecfca) ← главный идентификатор бренда Основной бирюзовый (053M / #0089c3) ← главный идентификатор бренда
└── Средний бирюзовый (066M / #5bb5ad) ← вторичный акцент └── Средний бирюзовый (066M / #00818c) ← вторичный акцент
└── Тёмный серо-голубой (073M / #5b7b87) ← фоны, хедер └── Тёмный серо-голубой (073M / #53514e) ← фоны, хедер
Тёмно-синий (050M / #1b4c72) ← авторитет, полиграфия Тёмно-синий (050M / #1b2e5d) ← авторитет, полиграфия
Бежевый (081M / #c4a882) ← тепло, форма Бежевый (081M / #a8885c) ← тепло, форма
└── Тёмно-коричневый (080M / #5c2e0e) ← текст на бежевом └── Тёмно-коричневый (080M / #432f1e) ← текст на бежевом
``` ```
--- ---
@@ -343,39 +345,42 @@ SVG-версия ожидается (не получена от клиники).
### Кнопки (Button) · `/components/buttons` ### Кнопки (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 класс | Фон | Текст | Граница | Применение | | Вариант | CSS класс | Фон | Текст | Граница | Border-radius | Применение |
|-----------|------------------|------------|---------|-----------|------------| |---------|------------------|----------|---------|-----------|---------------|------------|
| primary | .bb-btn-primary | #5b7b87 | #fff | #5b7b87 | Главный CTA: «Записаться», «Подтвердить» | | primary | .bb-btn-primary | #FFA39C | #fff | #FF847B | 7px, bold, shadow | Форма записи «Запишите меня!» |
| secondary | .bb-btn-secondary | прозрачный | #5b7b87 | #5b7b87 | Второстепенное действие | | outline | .bb-btn-outline | #fff | #BF9975 | #BF9975 | 7px | «Записаться на приём» |
| ghost | .bb-btn-ghost | прозрачный | #5b7b87 | нет | Третичное действие, отмена | | teal | .bb-btn-teal | #60959C | #fff | прозрачная| 7px | «Позвонить» |
| danger | .bb-btn-danger | #dc2626 | #fff | #dc2626 | Деструктивное действие | | pill | .bb-btn-pill | #E9E4D4 | #333 | #D5CFBD | 25px | «Заказать звонок» |
| Размер | CSS класс | padding | font-size | border-radius | | Размер | CSS класс | padding | font-size |
|--------|------------|------------|-----------|---------------| |--------|------------|--------------|-----------|
| sm | .bb-btn-sm | 5px 12px | 13px | 6px | | sm | .bb-btn-sm | 4px 11px | 13px |
| md | .bb-btn-md | 8px 18px | 14px | 8px | | md | .bb-btn-md | 8px 16px | 14px |
| lg | .bb-btn-lg | 12px 26px | 16px | 10px | | 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) **Состояния:** default · hover (brightness 0.9) · active (brightness 0.82) · loading (spinner) · disabled (opacity 0.5)
**Правила:** не более одной primary на экран в контексте задачи · текст — глагол или призыв · Danger только для деструктивных действий.
### Форм-контролы (Forms) · `/components/forms` ### Форм-контролы (Forms) · `/components/forms`
| Элемент | CSS класс | Тег HTML | Описание | Размеры соответствуют entityform-блокам на реальном сайте.
|----------|-----------------|----------------------------|----------|
| 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 |
**Состояния полей:** default (border #e5e7eb) · focus (border #7ecfca + box-shadow) · error (.bb-error, border #dc2626) · disabled (opacity 0.5) | Элемент | 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 |
**Toggle:** выкл → track #d1d5db · вкл → track #5b7b87 (#73M) · thumb: белый круг 20×20px. **Состояния полей:** 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.
--- ---
@@ -402,6 +407,7 @@ CSS-классы из `globals.css`. Компонент: `@/components/ui/Button
| 2.0 | 2026-03-22 | Sprint 2: типографика, оффлайн носители, цвета сайта (8 цветов) | | 2.0 | 2026-03-22 | Sprint 2: типографика, оффлайн носители, цвета сайта (8 цветов) |
| 2.1 | 2026-03-22 | Sprint 2 доп.: +3 цвета сайта (коралловый, светло-жёлтый, светло-зелёный) | | 2.1 | 2026-03-22 | Sprint 2 доп.: +3 цвета сайта (коралловый, светло-жёлтый, светло-зелёный) |
| 3.0 | 2026-03-22 | Sprint 3: кнопки (Button), форм-контролы (Input/Textarea/Select/Checkbox/Radio/Toggle), LLM-блок на логотипе | | 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 в планах |
--- ---