AR 15 M4
0855892643
- components/ui/Button.tsx — компонент Button (primary/secondary/ghost/danger, sm/md/lg, loading/disabled) - components/ui/CodeCopy.tsx — компонент копирования кода (clipboard API) - components/ui/Toggle.tsx — тумблер (client component, bb-toggle-track/thumb) - globals.css — CSS-классы: bb-btn, bb-input/textarea/select, bb-checkbox/radio, bb-toggle, @keyframes bb-spin - app/components/buttons/page.tsx — страница «Кнопки» (варианты, размеры, состояния, code copy, LLM-блок) - app/components/forms/page.tsx — страница «Форм-контролы» (Input/Textarea/Select/Checkbox/Radio/Toggle, LLM-блок) - foundation/logo/page.tsx — добавлен LLM-блок v1.0 - Sidebar: убраны «скоро» с Кнопок и Форм-контролов, версия Sprint 3 · v0.3.0 - docs/LLM_CONTEXT.md → версия 3.0, добавлена секция 9a с компонентами Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
418 lines
26 KiB
Markdown
418 lines
26 KiB
Markdown
# LLM Context — Цифровой брендбук Клиники
|
||
|
||
## Клиника ухо, горло, нос им. проф. Е.Н.Оленевой
|
||
|
||
**Версия контекста:** 3.0
|
||
**Дата обновления:** 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`:
|
||
|
||
```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` | ✅ Готова | Кнопки — все варианты, размеры, состояния |
|
||
| `/components/forms` | ✅ Готова | Форм-контролы — Input, Textarea, Select, Checkbox, Radio, Toggle |
|
||
| `/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
|
||
|
||
---
|
||
|
||
## 9a. Базовые компоненты (Sprint 3)
|
||
|
||
### Кнопки (Button) · `/components/buttons`
|
||
|
||
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 класс | 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 |
|
||
|
||
**Состояния:** default · hover (brightness 0.9) · active (brightness 0.82) · loading (spinner + opacity 0.5) · disabled (opacity 0.5)
|
||
|
||
**Правила:** не более одной primary на экран в контексте задачи · текст — глагол или призыв · Danger только для деструктивных действий.
|
||
|
||
### Форм-контролы (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 |
|
||
|
||
**Состояния полей:** default (border #e5e7eb) · focus (border #7ecfca + box-shadow) · error (.bb-error, border #dc2626) · disabled (opacity 0.5)
|
||
|
||
**Toggle:** выкл → track #d1d5db · вкл → track #5b7b87 (#73M) · 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-блок на логотипе |
|
||
|
||
---
|
||
|
||
## 12. Что обновлять в этом файле
|
||
|
||
При каждом спринте добавляй:
|
||
- Новые компоненты и их спецификации (цвета, размеры, состояния)
|
||
- Новые правила применения, выявленные при разработке
|
||
- Изменения в палитре или типографике
|
||
- Новые паттерны и примеры кода
|
||
|
||
**Соответствующий раздел в TZ.md:** ФТ-03-LLM
|
||
**Соответствующий раздел в SPRINTS.md:** задача «LLM-блок» в каждом спринте
|