docs: add design system (brand colors from opora.ru), dark theme, PWA, Recharts

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. Перейти к реализации каркаса проекта.

docs/tech-design/03-screens.md

@@ -369,12 +369,12 @@
 
 ---
 
-## 17. Открытые вопросы
+## 17. Принятые решения
 
-1. **Брендбук** — есть ли гайдлайны «ОПОРА РОССИИ» (цвета, шрифты, логотип)?
+1. **Брендбук** — отсутствует; разработана дизайн-система на основе фирменных цветов opora.ru (см. `docs/design/design-system.md`).
-2. **Графики** — библиотека визуализации (Recharts / Chart.js).
+2. **Графики** — **Recharts**.
-3. **Тёмная тема** — нужна ли.
+3. **Тёмная тема** — **нужна** (CSS-переменные + переключатель).
-4. **PWA** — нужна ли установка на домашний экран.
+4. **PWA** — **нужна** (установка на домашний экран).
 
 ---