Browse Source
- Создан компонент components/llm/LlmBlock.tsx (use client):
LlmBlock, LlmSection, LlmTable, LlmRules — переиспользуемый
паттерн для LLM-спецификаций на всех страницах брендбука
- /foundation/colors: добавлен раздел «LLM-спецификация» (v2.1)
· таблица фирменных цветов Oracal (7 шт.)
· таблица цветов сайта oclinica.ru (11 шт., +3 новых: коралловый,
светло-жёлтый, светло-зелёный)
· таблица контрастности WCAG 2.1
· правила применения ✓/✕
· кнопка «Скопировать» — plain text для LLM
- /foundation/typography: добавлен раздел «LLM-спецификация» (v2.0)
· таблица шрифтов DINPro vs Fira Sans
· шкала DINPro (6 стилей)
· шкала Fira Sans (11 стилей, включая letter-spacing)
· применение по носителям + правила ✓/✕
- docs/LLM_CONTEXT.md: создан сводный машиночитаемый файл бренда
Версия 2.1: все цвета, типографика, логотип, оффлайн, CSS-vars,
правила — единый контекст для AI при работе с брендом клиники
- docs/TZ.md: добавлено требование ФТ-03-LLM
- docs/SPRINTS.md: задачи LLM-блоков в Sprint 3–8
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
sprint/3
AR 15 M4
1 week ago
6 changed files with 923 additions and 6 deletions
@ -0,0 +1,175 @@ |
|||||||
|
"use client"; |
||||||
|
|
||||||
|
import { useState } from "react"; |
||||||
|
|
||||||
|
interface LlmBlockProps { |
||||||
|
/** Путь страницы, например "/foundation/colors" */ |
||||||
|
path: string; |
||||||
|
/** Версия данных, например "v2.1" */ |
||||||
|
version: string; |
||||||
|
/** Плоский текст для копирования */ |
||||||
|
specText: string; |
||||||
|
/** Содержимое блока — таблицы, правила */ |
||||||
|
children: React.ReactNode; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* LlmBlock — переиспользуемый блок LLM-спецификации. |
||||||
|
* Добавляется в конец каждой страницы брендбука, содержащей дизайн-стандарты. |
||||||
|
* Требование: ФТ-03-LLM (TZ.md) · docs/LLM_CONTEXT.md |
||||||
|
*/ |
||||||
|
export function LlmBlock({ path, version, specText, children }: LlmBlockProps) { |
||||||
|
const [copied, setCopied] = useState(false); |
||||||
|
|
||||||
|
function handleCopy(e: React.MouseEvent) { |
||||||
|
e.preventDefault(); |
||||||
|
navigator.clipboard.writeText(specText); |
||||||
|
setCopied(true); |
||||||
|
setTimeout(() => setCopied(false), 2000); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<details |
||||||
|
open |
||||||
|
className="rounded-xl overflow-hidden" |
||||||
|
style={{ |
||||||
|
border: "2px dashed var(--brand-053m)", |
||||||
|
}} |
||||||
|
> |
||||||
|
{/* Заголовок */} |
||||||
|
<summary |
||||||
|
className="flex items-center justify-between px-5 py-3 cursor-pointer select-none list-none" |
||||||
|
style={{ background: "rgba(126,207,202,0.07)" }} |
||||||
|
> |
||||||
|
<div className="flex items-center gap-2 min-w-0"> |
||||||
|
<span |
||||||
|
className="shrink-0 text-[10px] font-bold px-1.5 py-0.5 rounded tracking-wider" |
||||||
|
style={{ background: "var(--brand-053m)", color: "#fff" }} |
||||||
|
> |
||||||
|
LLM |
||||||
|
</span> |
||||||
|
<span className="font-semibold text-sm" style={{ color: "var(--bb-text)" }}> |
||||||
|
LLM-спецификация |
||||||
|
</span> |
||||||
|
<span |
||||||
|
className="text-xs truncate hidden sm:inline" |
||||||
|
style={{ color: "var(--bb-text-muted)" }} |
||||||
|
> |
||||||
|
· машиночитаемые данные · docs/LLM_CONTEXT.md |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="flex items-center gap-3 shrink-0 ml-3"> |
||||||
|
<span |
||||||
|
className="text-[10px] font-mono hidden md:inline" |
||||||
|
style={{ color: "var(--bb-text-muted)" }} |
||||||
|
> |
||||||
|
{path} · {version} |
||||||
|
</span> |
||||||
|
<button |
||||||
|
onClick={handleCopy} |
||||||
|
className="text-xs px-3 py-1 rounded font-medium transition-colors shrink-0" |
||||||
|
style={{ |
||||||
|
background: copied ? "#d1fae5" : "var(--brand-053m)", |
||||||
|
color: copied ? "#065f46" : "#fff", |
||||||
|
}} |
||||||
|
> |
||||||
|
{copied ? "✓ Скопировано" : "Скопировать"} |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</summary> |
||||||
|
|
||||||
|
{/* Содержимое */} |
||||||
|
<div |
||||||
|
className="px-5 py-5 space-y-6 border-t" |
||||||
|
style={{ |
||||||
|
borderColor: "var(--brand-053m)", |
||||||
|
borderStyle: "dashed", |
||||||
|
background: "var(--bb-content-bg)", |
||||||
|
}} |
||||||
|
> |
||||||
|
{children} |
||||||
|
</div> |
||||||
|
</details> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
/* ─── Утилиты для содержимого блока ──────────────────────────── */ |
||||||
|
|
||||||
|
/** Заголовок подсекции внутри LLM-блока */ |
||||||
|
export function LlmSection({ title }: { title: string }) { |
||||||
|
return ( |
||||||
|
<p |
||||||
|
className="text-[10px] font-semibold uppercase tracking-widest pb-1 border-b" |
||||||
|
style={{ color: "var(--bb-text-muted)", borderColor: "var(--bb-border)" }} |
||||||
|
> |
||||||
|
{title} |
||||||
|
</p> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
/** Компактная таблица для LLM-блока */ |
||||||
|
export function LlmTable({ |
||||||
|
headers, |
||||||
|
rows, |
||||||
|
}: { |
||||||
|
headers: string[]; |
||||||
|
rows: (string | React.ReactNode)[][]; |
||||||
|
}) { |
||||||
|
return ( |
||||||
|
<div className="overflow-x-auto"> |
||||||
|
<table className="w-full text-xs border-collapse font-mono"> |
||||||
|
<thead> |
||||||
|
<tr style={{ background: "var(--bb-sidebar-bg)" }}> |
||||||
|
{headers.map((h) => ( |
||||||
|
<th |
||||||
|
key={h} |
||||||
|
className="text-left px-2 py-1.5 font-medium border whitespace-nowrap" |
||||||
|
style={{ color: "var(--bb-text-muted)", borderColor: "var(--bb-border)" }} |
||||||
|
> |
||||||
|
{h} |
||||||
|
</th> |
||||||
|
))} |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
{rows.map((row, ri) => ( |
||||||
|
<tr key={ri} style={{ borderTop: `1px solid var(--bb-border)` }}> |
||||||
|
{row.map((cell, ci) => ( |
||||||
|
<td |
||||||
|
key={ci} |
||||||
|
className="px-2 py-1 border" |
||||||
|
style={{ |
||||||
|
borderColor: "var(--bb-border)", |
||||||
|
color: "var(--bb-text-muted)", |
||||||
|
maxWidth: "240px", |
||||||
|
}} |
||||||
|
> |
||||||
|
{cell} |
||||||
|
</td> |
||||||
|
))} |
||||||
|
</tr> |
||||||
|
))} |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
/** Список правил ✓ / ✕ */ |
||||||
|
export function LlmRules({ rules }: { rules: { ok: boolean; text: string }[] }) { |
||||||
|
return ( |
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-0.5"> |
||||||
|
{rules.map((r) => ( |
||||||
|
<div key={r.text} className="flex items-start gap-1.5 py-0.5 text-xs font-mono"> |
||||||
|
<span |
||||||
|
style={{ color: r.ok ? "#059669" : "#dc2626", fontWeight: 700, flexShrink: 0 }} |
||||||
|
> |
||||||
|
{r.ok ? "✓" : "✕"} |
||||||
|
</span> |
||||||
|
<span style={{ color: "var(--bb-text-muted)" }}>{r.text}</span> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,376 @@ |
|||||||
|
# LLM Context — Цифровой брендбук Клиники |
||||||
|
|
||||||
|
## Клиника ухо, горло, нос им. проф. Е.Н.Оленевой |
||||||
|
|
||||||
|
**Версия контекста:** 2.1 |
||||||
|
**Дата обновления:** 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` | 🔜 Sprint 3 | Кнопки | |
||||||
|
| `/components/forms` | 🔜 Sprint 3 | Форм-контролы | |
||||||
|
| `/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 |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
## 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 цвета сайта (коралловый, светло-жёлтый, светло-зелёный) | |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
## 12. Что обновлять в этом файле |
||||||
|
|
||||||
|
При каждом спринте добавляй: |
||||||
|
- Новые компоненты и их спецификации (цвета, размеры, состояния) |
||||||
|
- Новые правила применения, выявленные при разработке |
||||||
|
- Изменения в палитре или типографике |
||||||
|
- Новые паттерны и примеры кода |
||||||
|
|
||||||
|
**Соответствующий раздел в TZ.md:** ФТ-03-LLM |
||||||
|
**Соответствующий раздел в SPRINTS.md:** задача «LLM-блок» в каждом спринте |
||||||
Loading…
Reference in new issue