Дизайн-система «ОПОРА РОССИИ»
Проект: АС «Платформа ОПОРА РОССИИ»
Основа: фирменные цвета с 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. Открытые вопросы
- Логотип — получить согласие правообладателя на использование.
- Шрифт — финальный выбор: Inter или Manrope (или оба).
- PWA-иконки — набор размеров для установки.
14. Следующие шаги
- Согласовать дизайн-систему.
- Собрать UI-кит (компоненты) в коде.
- Перейти к реализации каркаса проекта.
