Design System · v0.1
Дизайн-система ОрГМУ
Единый визуальный язык для флагманского сайта и подсайтов. Токены, типографика и библиотека блоков — источник правды для реализации на Next.js.
Roboto Condensed + Inter
Адаптив desktop → mobile
Темизация подсайтов
01
Цвет
Синяя палитра — ядро бренда. Системный «светофор» используется для статусов. Каждый цвет привязан к CSS-переменной.
{{ grp.name }}
02
Типографика
Inter — крупные заголовки и дисплей. Roboto Condensed — заголовки разделов, UI и текст. Плотная гарнитура держит много контента на казённых страницах.
03
Отступы · радиусы · тени
Spacing · 4px
{{ sp.name }} · {{ sp.px }}
Radii
{{ r.name }}
Elevation
{{ sh.name }}
04
Элементы
Кнопки
Формы и поля
05
Блоки
Из этих блоков собираются страницы. Подсайты используют те же блоки в другом наборе и порядке.
Шапка + мега-меню — наведите на пункт
Карточка новости
Карточка новости · текстовая
Объявления — срочные / важные, со сроком жизни
Карточка мероприятия — афиша
Плитки-ярлыки
Баннеры
Боковая панель
Подвал
06
Экраны
Собраны из блоков выше. Открываются как отдельные страницы.
Главная
Шапка, плитки, баннеры, лента новостей, подвал
Новости
Хлебные крошки, фильтры, сетка карточек, пагинация
Страница отдела
Боковое меню раздела + контент (пример подсайта)
★ Основной шаблон
Универсальная внутренняя страница: текст, таблицы, файлы, FAQ. База для любой страницы и подсайта
Страница новости
Полный текст статьи, «поделиться», похожие новости
Афиша мероприятий
Витрина событий с фильтрами по категориям
Страница мероприятия
Афиша: программа, дата/место, регистрация
Описание приложения
Куда ведёт «Подробнее»: возможности, шаги, вход
Карта сайтов
Все разделы и подсайты · сюда ведёт «Посмотреть все»
Приложения вуза
МФЦ · ЭИОС · Цифровой ID · из боковой панели
Настройки доступности
Версия для слабовидящих · живой предпросмотр