202 lines
7.7 KiB
Markdown
202 lines
7.7 KiB
Markdown
# Дизайн-система «ОПОРА РОССИИ»
|
||
|
||
**Проект:** АС «Платформа ОПОРА РОССИИ»
|
||
**Основа:** фирменные цвета с 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. Перейти к реализации каркаса проекта.
|