From 5b098392463bcf3e2e3e1157a8449f26105408ca Mon Sep 17 00:00:00 2001 From: Kavalar Date: Sat, 26 Sep 2026 19:36:45 +0300 Subject: [PATCH] docs: add design system (brand colors from opora.ru), dark theme, PWA, Recharts --- docs/design/design-system.md | 200 +++++++++++++++++++++++++++++++++ docs/tech-design/03-screens.md | 10 +- 2 files changed, 205 insertions(+), 5 deletions(-) create mode 100644 docs/design/design-system.md diff --git a/docs/design/design-system.md b/docs/design/design-system.md new file mode 100644 index 0000000..f079ea6 --- /dev/null +++ b/docs/design/design-system.md @@ -0,0 +1,200 @@ +# Дизайн-система «ОПОРА РОССИИ» + +**Проект:** АС «Платформа ОПОРА РОССИИ» +**Основа:** фирменные цвета с opora.ru (извлечены из действующего сайта) +**Дата:** 26.09.2026 +**Статус:** черновик к согласованию + +--- + +## 1. Источник фирменного стиля + +Цвета извлечены из действующего сайта `opora.ru`: + +| Элемент | Цвет | HEX | +|---|---|---| +| Основной (шапка, логотип) | тёмно-синий | `#091C5A` | +| Акцент (ссылки, кнопки) | синий | `#0480B9` | +| Акцент-2 (заголовки) | красный | `#E30613` | +| Фон светлый | почти белый | `#F7F8FC` | +| Текст основной | тёмно-серый | `#333333` | +| Текст вторичный | серый | `#666666` | + +--- + +## 2. Палитра + +### 2.1. Бренд + +| Токен | HEX | Применение | +|---|---|---| +| `--color-primary` | `#091C5A` | шапка, основной бренд-цвет | +| `--color-primary-light` | `#1B3A8C` | hover, градиенты | +| `--color-accent` | `#0480B9` | кнопки, ссылки, активные элементы | +| `--color-accent-red` | `#E30613` | акценты, заголовки разделов | + +### 2.2. Зоны (ключевое для платформы) + +| Токен | HEX | Значение | +|---|---|---| +| `--color-zone-green` | `#2E7D32` | 🟢 динамика (положительный прирост) | +| `--color-zone-red` | `#C62828` | 🔴 «красная зона» (нет прироста) | +| `--color-zone-neutral` | `#9E9E9E` | ⚪ нейтральное состояние | + +### 2.3. Нейтральные (светлая тема) + +| Токен | HEX | Применение | +|---|---|---| +| `--bg` | `#F7F8FC` | фон страницы | +| `--surface` | `#FFFFFF` | карточки, панели | +| `--border` | `#E2E6EF` | границы | +| `--text` | `#1A1A1A` | основной текст | +| `--text-muted` | `#666666` | вторичный текст | + +### 2.4. Нейтральные (тёмная тема) + +| Токен | HEX | Применение | +|---|---|---| +| `--bg` | `#0E1220` | фон страницы | +| `--surface` | `#1A2033` | карточки, панели | +| `--border` | `#2A3350` | границы | +| `--text` | `#E8EAED` | основной текст | +| `--text-muted` | `#A0A6B5` | вторичный текст | + +### 2.5. Семантические + +| Токен | HEX | Значение | +|---|---|---| +| `--success` | `#2E7D32` | успех | +| `--warning` | `#ED6C02` | предупреждение | +| `--error` | `#C62828` | ошибка | +| `--info` | `#0480B9` | информация | + +--- + +## 3. Типографика + +| Роль | Шрифт | Размер (mobile) | Вес | +|---|---|---|---| +| H1 | Manrope / Inter | 24 px | 700 | +| H2 | Manrope / Inter | 20 px | 700 | +| H3 | Manrope / Inter | 17 px | 600 | +| Body | Inter | 15 px | 400 | +| Caption | Inter | 13 px | 400 | +| **Крупные цифры** | Inter (tabular) | 32–40 px | 700 | + +- Шрифты с поддержкой кириллицы: **Inter**, **Manrope** (оба — open-source, self-hosted). +- **Табличные цифры** (`font-variant-numeric: tabular-nums`) — для показателей, чтобы не «прыгали». +- Ключевые показатели («Точка 0», «Сейчас», «Цель») — крупно, с подписями. + +--- + +## 4. Сетка и отступы + +- Базовая сетка: **4 px**. +- Отступы: 4 / 8 / 12 / 16 / 24 / 32 px. +- Горизонтальные поля экрана: **16 px**. +- Ширина контента: 360–430 px (mobile), max 1200 px (desktop). +- Минимальная зона касания: **44×44 px**. + +--- + +## 5. Радиусы и тени + +| Токен | Значение | +|---|---| +| `--radius-sm` | 8 px | +| `--radius-md` | 12 px | +| `--radius-lg` | 16 px | +| `--shadow-sm` | `0 1px 2px rgba(9,28,90,.08)` | +| `--shadow-md` | `0 4px 12px rgba(9,28,90,.12)` | + +--- + +## 6. Компоненты + +| Компонент | Описание | +|---|---| +| **Button** | primary (accent), secondary (outline), ghost; высота 48 px | +| **Card** | surface, radius-md, shadow-sm, padding 16 px | +| **Metric** | крупная цифра + подпись + зона (цвет) | +| **Badge** | зона: 🟢/🔴/⚪ | +| **Input** | высота 48 px, label сверху | +| **BottomNav** | нижняя навигация (mobile), 4–5 пунктов | +| **List item** | иконка + заголовок + подпись + шеврон | +| **Empty state** | иллюстрация/иконка + текст + действие | +| **Skeleton** | заглушка загрузки | +| **Toast** | всплывающее уведомление | + +--- + +## 7. Цветовое кодирование зон + +| Зона | Цвет | Применение | +|---|---|---| +| Динамика | 🟢 `#2E7D32` | положительный прирост | +| Красная зона | 🔴 `#C62828` | нет прироста | +| Нейтрально | ⚪ `#9E9E9E` | нет данных | + +Используется в: рейтинге, топе регионов, красной зоне, карточке региона. + +--- + +## 8. Тёмная тема + +- Реализуется через CSS-переменные и `prefers-color-scheme` + ручной переключатель. +- Токены светлой/тёмной темы — раздел 2.3 / 2.4. +- Контраст текста — не ниже WCAG AA (4.5:1). + +--- + +## 9. Логотип + +- Используется официальный словесный знак «ОПОРА РОССИИ» (с opora.ru). +- **Требуется согласие правообладателя** на использование логотипа в интерфейсе. +- До получения — текстовый вариант «ОПОРА РОССИИ» в фирменном цвете. + +--- + +## 10. Иконки + +- Набор: **Lucide** (open-source, единый стиль, поддержка React). +- Размер: 20 / 24 px. + +--- + +## 11. Доступность + +- Контраст ≥ 4.5:1 для текста, ≥ 3:1 для крупных элементов. +- Зоны дублируются не только цветом, но и текстом/иконкой (для дальтоников). +- Фокус-состояния для клавиатуры. +- Семантическая разметка, ARIA-атрибуты. + +--- + +## 12. Технические решения + +| Область | Решение | +|---|---| +| Стили | Tailwind CSS + CSS-переменные | +| Компоненты | shadcn/ui (Radix) | +| Графики | **Recharts** (React, лёгкий, поддержка кириллицы) | +| Иконки | Lucide | +| Тёмная тема | CSS-переменные + переключатель | +| PWA | манифест + service worker (установка на домашний экран) | + +--- + +## 13. Открытые вопросы + +1. **Логотип** — получить согласие правообладателя на использование. +2. **Шрифт** — финальный выбор: Inter или Manrope (или оба). +3. **PWA-иконки** — набор размеров для установки. + +--- + +## 14. Следующие шаги + +1. Согласовать дизайн-систему. +2. Собрать UI-кит (компоненты) в коде. +3. Перейти к реализации каркаса проекта. diff --git a/docs/tech-design/03-screens.md b/docs/tech-design/03-screens.md index bd850da..0c41f08 100644 --- a/docs/tech-design/03-screens.md +++ b/docs/tech-design/03-screens.md @@ -369,12 +369,12 @@ --- -## 17. Открытые вопросы +## 17. Принятые решения -1. **Брендбук** — есть ли гайдлайны «ОПОРА РОССИИ» (цвета, шрифты, логотип)? -2. **Графики** — библиотека визуализации (Recharts / Chart.js). -3. **Тёмная тема** — нужна ли. -4. **PWA** — нужна ли установка на домашний экран. +1. **Брендбук** — отсутствует; разработана дизайн-система на основе фирменных цветов opora.ru (см. `docs/design/design-system.md`). +2. **Графики** — **Recharts**. +3. **Тёмная тема** — **нужна** (CSS-переменные + переключатель). +4. **PWA** — **нужна** (установка на домашний экран). ---