docs: add design system (brand colors from opora.ru), dark theme, PWA, Recharts
This commit is contained in:
apuc committed
1 parent
615b466c72
commit
5b09839246
2 files changed
+205
-5
No files matched your search
@@ -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. Перейти к реализации каркаса проекта.
|
||||
@@ -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** — **нужна** (установка на домашний экран).
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in new issue
Block a user