From 2352e990935013485e631d4e404e0fac0104099c Mon Sep 17 00:00:00 2001 From: AR 15 M4 Date: Sun, 22 Mar 2026 16:27:13 +0500 Subject: [PATCH] =?UTF-8?q?docs:=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D1=8B=20=D0=BE=D1=84=D1=84=D0=BB=D0=B0=D0=B9=D0=BD?= =?UTF-8?q?=20=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD=D1=82=D1=8B=20=D0=B8=20?= =?UTF-8?q?=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B0=20=D0=BB=D0=BE?= =?UTF-8?q?=D0=B3=D0=BE=D1=82=D0=B8=D0=BF=D0=B0=20=D0=B2=20Sprint=201?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit По данным PDF-брендбука клиники: BRANDBOOK_SCOPE.md: - Типографика: добавлен DINPro как фирменный шрифт бренда (DINPro = оффлайн/печать, Fira Sans = веб) - Логотип: иерархия версий («Общий» и «Основной»), правила, размеры на форме - Новый раздел 6: Оффлайн элементы (форма, бейджи 70×30мм, навигация Oracal, трамваи, печать) TZ.md: - ФТ-01: добавлен раздел «Оффлайн элементы» в навигацию - ФТ-15–17: требования к странице «Логотип» (PNG в Sprint 1, вектор позже) - ФТ-20–22: уточнена типографика — оба шрифта с правилами применения - ФТ-43–49: полные требования к разделу «Оффлайн элементы» - Стек: DINPro добавлен в таблицу технологий - ОВ-05: закрыт (логотип в Sprint 1), добавлен ОВ-06 (HEX-коды Oracal) SPRINTS.md: - Sprint 1: добавлены 9 задач по странице «Логотип» (PNG, иерархия, охранная зона, правила) - Sprint 2: добавлены задачи по DINPro + 5 страниц раздела «Оффлайн элементы» - Сводная таблица обновлена Co-Authored-By: Claude Sonnet 4.6 --- docs/BRANDBOOK_SCOPE.md | 80 +++++++++++++++++++++++++++++++++++----- docs/SPRINTS.md | 63 +++++++++++++++++++++---------- docs/TZ.md | 82 +++++++++++++++++++++++++++++++++++------ 3 files changed, 184 insertions(+), 41 deletions(-) diff --git a/docs/BRANDBOOK_SCOPE.md b/docs/BRANDBOOK_SCOPE.md index 74f46ab..2ede0f2 100644 --- a/docs/BRANDBOOK_SCOPE.md +++ b/docs/BRANDBOOK_SCOPE.md @@ -16,21 +16,37 @@ - Примеры сочетаний (color pairs) с проверкой контрастности (WCAG AA) ### 1.2 Типографика -- Шрифт: **Fira Sans** (веса 300, 400) -- Шкала размеров: h1–h6, body, caption, label, overline + +**Фирменный шрифт (бренд, офлайн, печать):** +- Шрифт: **DINPro** — основной шрифт фирменного стиля (логотип, навигация, носители) +- Используется во всех оффлайн-носителях: форма, бейджи, таблички, наружная реклама + +**Веб-шрифт (цифровые носители, сайт):** +- Шрифт: **Fira Sans** (веса 300, 400) — шрифт сайта oclinica.ru + +**В брендбуке отображается:** +- Оба шрифта с полной шкалой размеров: h1–h6, body, caption, label, overline - Межстрочный интервал, межбуквенный интервал для каждого стиля -- Правила использования: жирный, курсив, caps -- Примеры живого текста (заголовки, абзацы, списки) +- Правила применения: где DINPro, где Fira Sans +- Живые примеры текста на обоих шрифтах ### 1.3 Логотип -- Основная версия (светлый фон) -- Инвертированная версия (тёмный фон) -- Монохромная версия + +**Структура и иерархия (из PDF-брендбука):** +- **«Общий» логотип** — версия сети клиник, применяется в онлайн и оффлайн коммуникациях с клиентами, во внутренней документации, допустимо на общем сайте +- **«Основной» логотип** — локальные версии по направлениям (ЛОР, аллергология и др.), применяется в точках контакта с клиентами, допустимо на лендинге/сайте направления +- Логотип не подлежит изменениям и не сочетается ни с каким дополнительным текстом + +**В брендбуке отображается:** +- Обе версии на светлом фоне +- Инвертированные версии (на тёмном фоне) +- Цветовые варианты на форме (коричневый / белый) - Охранная зона (минимальные отступы) -- Минимальные размеры +- Минимальные размеры для печати (70×25,5 мм / 90×32,8 мм) - Недопустимые варианты использования - Скачивание файлов (SVG, PNG) -> ⏳ Логотип будет добавлен после получения вектора + +> ⚠️ Вектор логотипа будет предоставлен позже. В Sprint 1 страница отображается с PNG-версией из PDF и полным текстовым описанием правил. ### 1.4 Иконография - Принципы выбора иконок @@ -171,7 +187,51 @@ --- -## 6. Технические требования брендбука +## 6. Оффлайн элементы (Offline Brand Elements) + +> Раздел содержит документацию по всем физическим носителям фирменного стиля клиники. +> Страницы в брендбуке — справочные (не интерактивные): изображение носителя + правила применения. + +### 6.1 Форма сотрудников +- Бежевый костюм: коричневый логотип, левая сторона груди +- Синий костюм: белый логотип, левая сторона груди +- Размеры логотипа на форме: + - До 46 размера: 70 × 25,5 мм + - От 48 размера: 90 × 32,8 мм +- Фотографии обоих вариантов формы +- Цвета ткани: 080M (тёмно-коричневый) / 010 (белый/светлый) + +### 6.2 Бейджи сотрудников +- Размер: 70 × 30 мм +- Серый бейдж: имя + должность + степень +- Белый бейдж с логотипом: имя + должность + степень +- Правила размещения текста и логотипа +- Фотографии реальных бейджей + +### 6.3 Внутренняя навигация (таблички) +- Навигационные таблички по этажам (указатели кабинетов) +- Таблички на дверях кабинетов (номер + врач + специализация + QR-код) +- Материал: оргстекло, наклейки из плёнок Oracal +- Цвета Oracal: 053M (бирюзовый), 073M (тёмно-серый) +- Шрифт: DINPro +- Фотографии реальных табличек, установленных в клинике +- Шаблоны с размерами и отступами + +### 6.4 Брендирование транспорта +- Брендирование трамваев (полная оклейка борта) +- Применяемые цвета: 053M, 073M, 066M, 050M, 081M, 080M +- Правила размещения логотипа и текста +- Примеры готовых макетов (боковой вид, фрагменты) + +### 6.5 Печатные материалы +- Листовки / флаеры (двусторонние) +- Визитные карточки сотрудников (с QR-кодом на профиль врача) +- Промо-материалы Telegram-бота (@OLENEVA CLINIC BOT) +- Для каждого носителя: изображение макета + размеры + технические требования к печати + +--- + +## 7. Технические требования брендбука - Адаптивность: desktop (1440px), tablet (768px), mobile (375px) - Темная тема (опционально, обсудить) diff --git a/docs/SPRINTS.md b/docs/SPRINTS.md index 54760f4..4515add 100644 --- a/docs/SPRINTS.md +++ b/docs/SPRINTS.md @@ -14,39 +14,62 @@ --- -## Sprint 1 — Инициализация проекта +## Sprint 1 — Инициализация проекта + страница «Логотип» -**Цель:** Рабочее окружение, monorepo, базовая архитектура. +**Цель:** Рабочее окружение, monorepo, базовая архитектура, первая живая страница брендбука — «Логотип». -### Задачи +### Задачи — инфраструктура - [ ] FE: Инициализация Next.js (App Router) в `apps/web` - [ ] BE: Инициализация NestJS в `apps/api` - [ ] DB: Подключение PostgreSQL + Prisma, базовая схема - [ ] Настройка Docker Compose для локальной разработки - [ ] Настройка monorepo (pnpm workspaces) - [ ] Создание `.env.example` -- [ ] Git: инициализация репозитория, ветки `main` и `develop` -- [ ] FE: Базовая структура брендбука (layout, навигация по секциям) -- [ ] FE: Подключение шрифта Fira Sans - -**Результат спринта:** Запускается `pnpm dev` — открывается пустой брендбук с навигацией. +- [ ] Git: создание веток `develop` и `sprint/1` +- [ ] FE: Базовая структура брендбука (layout, боковая навигация по разделам) +- [ ] FE: Подключение шрифта Fira Sans (веб) + подготовка к DINPro (бренд) + +### Задачи — страница «Логотип» (первый контент брендбука) +- [ ] Design: Экспорт PNG логотипа из PDF для использования как placeholder +- [ ] FE: Страница `/foundation/logo` в брендбуке +- [ ] FE: Отображение обеих версий логотипа: «Общий» и «Основной» +- [ ] FE: Секция «Иерархия»: описание применения каждой версии +- [ ] FE: Секция «Цветовые варианты»: основной / инвертированный / на форме +- [ ] FE: Секция «Охранная зона» с визуализацией отступов +- [ ] FE: Секция «Минимальные размеры» (таблица: до 46 р. и от 48 р.) +- [ ] FE: Секция «Недопустимые варианты» — правило не менять и не сочетать с текстом +- [ ] FE: Placeholder-блок «Скачать вектор» (кнопка неактивна до получения SVG) + +**Результат спринта:** Запускается `pnpm dev`, открывается брендбук с навигацией. Раздел «Логотип» полностью заполнен контентом и правилами. --- -## Sprint 2 — Цвета и типографика (Brand Foundation) +## Sprint 2 — Цвета, типографика и оффлайн элементы (Brand Foundation) -**Цель:** Секция «Фундамент бренда» — цвета и шрифты живые в брендбуке. +**Цель:** Секция «Фундамент бренда» — цвета, оба шрифта, а также первый оффлайн-раздел. -### Задачи -- [ ] Design: Получить и зафиксировать все цвета из файла брендбука клиники +### Задачи — цвета +- [ ] Design: Зафиксировать HEX-эквиваленты всех цветов бренда (053M, 073M, 066M, 050M, 081M, 080M) - [ ] FE: Создать CSS-переменные / дизайн-токены для всей цветовой палитры -- [ ] FE: Страница «Цвета» — отображение палитры с hex/RGB/HSL, копирование в клик -- [ ] FE: Страница «Типографика» — все стили текста (h1–h6, body, caption и т.д.) -- [ ] FE: Живые примеры типографики с Fira Sans +- [ ] FE: Страница «Цвета» — палитра с кодами Oracal/Pantone, HEX, RGB, HSL, копирование в клик +- [ ] FE: Проверка контрастности пар цветов (WCAG AA/AAA) - [ ] FE: Экспорт токенов в JSON (Figma-compatible) -- [ ] Design: Согласование охранных зон и правил применения цветов -**Результат спринта:** Раздел «Фундамент» полностью готов (без логотипа). +### Задачи — типографика +- [ ] FE: Страница «Типографика» — раздел DINPro (бренд/оффлайн) + раздел Fira Sans (веб) +- [ ] FE: Шкала размеров для обоих шрифтов: h1–h6, body, caption, label, overline +- [ ] FE: Чёткое указание: где DINPro, где Fira Sans +- [ ] FE: Живые примеры текста обоими шрифтами + +### Задачи — оффлайн элементы (справочный раздел) +- [ ] FE: Раздел «Оффлайн элементы» в навигации брендбука +- [ ] FE: Страница «Форма сотрудников» — фото, правила размещения логотипа, таблица размеров +- [ ] FE: Страница «Бейджи» — размеры 70×30 мм, варианты, состав текста +- [ ] FE: Страница «Внутренняя навигация» — шаблоны табличек, материалы, цвета Oracal +- [ ] FE: Страница «Брендирование транспорта» — макет трамвая, цветовая схема +- [ ] FE: Страница «Печатные материалы» — листовки, визитки, Telegram-бот + +**Результат спринта:** Разделы «Цвета», «Типографика» и «Оффлайн элементы» полностью готовы. --- @@ -224,8 +247,8 @@ | Спринт | Тема | Ключевой результат | |--------|---------------------------------------|-----------------------------------------| -| 1 | Инициализация | Запускается пустой брендбук | -| 2 | Цвета и типографика | Раздел «Фундамент» готов | +| 1 | Инициализация + Логотип | Брендбук запускается, страница Логотипа готова | +| 2 | Цвета, Типографика, Оффлайн элементы | Фундамент + оффлайн раздел готовы | | 3 | Кнопки и форм-контролы | Базовые компоненты готовы | | 4 | Карточки | Все карточки задокументированы | | 5 | Hero и CEO-текст | Ключевые блоки страниц готовы | @@ -246,4 +269,4 @@ - Drag-and-drop конструктор страниц - История версий экспериментальных компонентов - Мультиязычность (если потребуется) -- Раздел «Логотип» (после получения вектора) +- Раздел «Логотип»: активация кнопки скачивания SVG (после получения вектора) diff --git a/docs/TZ.md b/docs/TZ.md index 91b6623..7bf71a9 100644 --- a/docs/TZ.md +++ b/docs/TZ.md @@ -137,10 +137,11 @@ ### 5.1 Навигация и структура брендбука **ФТ-01.** Брендбук имеет постоянную левую (или верхнюю) навигацию с разделами: -- Фундамент → Цвета, Типографика, Логотип +- Фундамент → Логотип, Цвета, Типографика, Иконография - Компоненты → Кнопки, Форм-контролы, Карточки, Бейджи, Алерты, Модальные окна, Таблицы, Навигация - Блоки → Hero, CEO-текст, Наши врачи, Отзывы, Новости, Формы контакта, Контакт, Услуги - Страницы → Главная, Заболевание, Все врачи, Врач, Цены, Контакты +- Оффлайн элементы → Форма сотрудников, Бейджи, Внутренняя навигация, Транспорт, Печать - Эксперименты **ФТ-02.** Навигация поддерживает прямые URL для каждого раздела (deep linking). @@ -165,17 +166,35 @@ --- -### 5.3 Раздел «Типографика» +### 5.3 Раздел «Логотип» -**ФТ-20.** Отображаются все текстовые стили: h1–h6, body-large, body, body-small, caption, label, overline. +**ФТ-15.** Страница «Логотип» присутствует в брендбуке с Sprint 1 — с PNG-версией из PDF и полным описанием правил (вектор добавляется позже). -**ФТ-21.** Для каждого стиля показаны: font-family, font-weight, font-size, line-height, letter-spacing. +**ФТ-16.** На странице отображаются: +- Обе версии логотипа: «Общий» (сеть) и «Основной» (направление) +- Иерархия и область применения каждой версии +- Цветовые варианты: основной, инвертированный (на тёмном фоне), на форме (коричневый / белый) +- Охранная зона с визуализацией отступов +- Минимальные размеры для печати (70×25,5 мм и 90×32,8 мм) +- Запрещённые варианты использования -**ФТ-22.** Живые примеры текста отображаются шрифтом Fira Sans с реальным контентом. +**ФТ-17.** После получения вектора — кнопки скачивания файлов (SVG, PNG с прозрачным фоном). --- -### 5.4 Компоненты — общие требования +### 5.4 Раздел «Типографика» + +**ФТ-20.** Отображаются оба фирменных шрифта: +- **DINPro** — шрифт бренда (оффлайн, логотип, носители) +- **Fira Sans** (веса 300, 400) — веб-шрифт сайта + +**ФТ-21.** Для каждого шрифта отображается полная шкала стилей: h1–h6, body-large, body, body-small, caption, label, overline с параметрами: font-family, font-weight, font-size, line-height, letter-spacing. + +**ФТ-22.** Чётко указано, где применяется каждый шрифт: DINPro — оффлайн и носители, Fira Sans — сайт и digital-коммуникации. + +--- + +### 5.5 Компоненты — общие требования **ФТ-30.** Каждый компонент отображается со всеми своими вариантами и состояниями одновременно на одной странице. @@ -185,7 +204,7 @@ --- -### 5.5 Страницы +### 5.6 Страницы **ФТ-40.** Каждая страница брендбука показывает полноразмерный макет, собранный из утверждённых блоков. @@ -195,7 +214,46 @@ --- -### 5.6 Экспериментальная секция +### 5.7 Раздел «Оффлайн элементы» + +> Раздел является справочным — содержит только изображения носителей и правила применения без интерактивных компонентов. Доступен обеим ролям (viewer и editor). + +**ФТ-43.** Раздел «Оффлайн элементы» содержит подразделы: +- Форма сотрудников +- Бейджи +- Внутренняя навигация +- Брендирование транспорта +- Печатные материалы + +**ФТ-44.** Каждый подраздел содержит: +- Изображение носителя (фото или макет) +- Технические параметры: размеры, цвета (коды Oracal/Pantone и их HEX-эквиваленты), шрифт, отступы +- Текстовые правила применения + +**ФТ-45.** Для носителей, использующих цвета бренда, отображаются плашки цветов со ссылкой на соответствующий токен из раздела «Цвета». + +**ФТ-46.** Страница «Форма сотрудников» содержит: +- Бежевый вариант: коричневый логотип, левая сторона груди, размеры по таблице размеров (до 46: 70×25,5 мм; от 48: 90×32,8 мм) +- Синий вариант: белый логотип, левая сторона груди +- Цветовые коды: 080M (коричневый) / 010 (белый) + +**ФТ-47.** Страница «Бейджи» содержит: +- Размер: 70 × 30 мм +- Серый бейдж и белый бейдж с логотипом +- Состав текста: имя, должность, учёная степень + +**ФТ-48.** Страница «Внутренняя навигация» содержит: +- Шаблоны навигационных табличек (этажные указатели, таблички на двери) +- Материал: оргстекло, плёнки Oracal 053M и 073M +- Пример с QR-кодом на профиль врача + +**ФТ-49.** Страница «Брендирование транспорта» содержит: +- Макет оклейки трамвая (боковой вид) +- Применяемые цвета: 053M, 073M, 066M, 050M, 081M, 080M + +--- + +### 5.8 Экспериментальная секция **ФТ-50.** В разделе «Эксперименты» отображается список экспериментальных компонентов: - Для `viewer`: только со статусом `approved` @@ -223,7 +281,7 @@ --- -### 5.7 Авторизация +### 5.9 Авторизация **ФТ-60.** При входе на защищённые страницы неавторизованный пользователь перенаправляется на `/login`. @@ -341,7 +399,8 @@ | ORM | Prisma | 5.x | Type-safe запросы, миграции, seed | | Стилизация | CSS Modules | — | Изоляция стилей, нет рантайм-зависимостей | | Дизайн-токены | CSS Custom Properties | — | Нативно поддерживается всеми браузерами | -| Шрифт | Fira Sans | — | Google Fonts, кириллица, веса 300 и 400 | +| Шрифт (бренд) | DINPro | — | Фирменный шрифт бренда, оффлайн-носители | +| Шрифт (веб) | Fira Sans | — | Google Fonts, кириллица, веса 300 и 400, сайт | | Авторизация | JWT + httpOnly cookie | — | Безопасное хранение токена | | Пакетный менеджер | pnpm | 9.x | Monorepo workspaces, скорость | | Контейнеризация | Docker + Compose | — | Единообразное окружение dev/prod | @@ -455,7 +514,8 @@ oclinica-brandbook/ | ОВ-02 | Параметры хостинга для production-деплоя | Клиника | TBD | | ОВ-03 | Нужна ли страница «Заболевание» как отдельный тип, или это подвид страницы «Услуга»? | Клиника | Sprint 9 | | ОВ-04 | Список иконок — какую стороннюю библиотеку утвердить? (Lucide, Heroicons, и др.) | Совместно | Sprint 2 | -| ОВ-05 | Нужен ли раздел «Логотип» в v1.0 или ждём вектор? | Клиника | Sprint 2 | +| ОВ-05 | ~~Нужен ли раздел «Логотип» в v1.0 или ждём вектор?~~ **Закрыт:** страница логотипа реализуется в Sprint 1 с PNG-версией; вектор будет добавлен позже | — | Закрыт | +| ОВ-06 | HEX-эквиваленты цветов Oracal (053M, 073M, 066M, 050M, 081M, 080M) для использования в токенах | Совместно | Sprint 2 | ---