Browse Source

docs: добавлены оффлайн элементы и страница логотипа в Sprint 1

По данным 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 <noreply@anthropic.com>
sprint/1
AR 15 M4 1 week ago
parent
commit
2352e99093
  1. 80
      docs/BRANDBOOK_SCOPE.md
  2. 63
      docs/SPRINTS.md
  3. 82
      docs/TZ.md

80
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)
- Темная тема (опционально, обсудить)

63
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 (после получения вектора)

82
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 |
---

Loading…
Cancel
Save