# Дизайн-система «ОПОРА РОССИИ»

**Проект:** АС «Платформа ОПОРА РОССИИ»
**Основа:** фирменные цвета с 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** | 24 px | 700 |
| H2 | **Manrope** | 20 px | 700 |
| H3 | **Manrope** | 17 px | 600 |
| Body | **Inter** | 15 px | 400 |
| Caption | **Inter** | 13 px | 400 |
| **Крупные цифры** | **Inter** (tabular) | 32–40 px | 700 |

- **Заголовки — Manrope, текст — Inter** (оба — 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. Логотип

- Будет предоставлен **отдельный логотип** проекта.
- До его получения используется текстовый вариант «ОПОРА РОССИИ» в фирменном цвете.
- После получения — подключить как SVG/PNG в шапку и PWA-иконки.

---

## 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. **Шрифты** — Manrope (заголовки) + Inter (текст).
3. **Логотип** — будет предоставлен отдельно; до этого текстовый вариант.
4. **Тёмная тема** — да. **PWA** — да. **Графики** — Recharts.

---

## 14. Следующие шаги

1. Согласовать дизайн-систему.
2. Собрать UI-кит (компоненты) в коде.
3. Перейти к реализации каркаса проекта.