Дизайн-система Сайта ГВС

Основы

Зачем система

Сайт ГВС — рабочий стол травматолога-ортопеда. Визуальный язык: официальный, светлый, институциональный синий поверх белой бумаги — как у профильных площадок МЗ / ЦИТО.

Бренд

Знак и имя

В шапке — эмблемы МЗ РФ, АТОР и ЦИТО им. Н.Н. Приорова. Собственный геометрический знак не используется.

• В шапке слева — три партнёрских знака, без слова «Сайт ГВС».
• Слоган на герое гостя становится H1. В подвале имя остаётся текстом.
• Знаки не перекрашивать и не обводить рамкой.

Сайт ГВС
Профессионалы встречаются здесь

Токены

Цвет

Холодная белая бумага, стальной navy, синий акцент ЦИТО. Не используйте произвольные hex в JSX.

Шрифт

Типографика

Заголовки и интерфейс — Manrope, цифры и версии — IBM Plex Mono.

Макет

Сетка и ритм

Контейнер max-w-7xl, горизонтальный padding 16px. Колонки 12: кабинет врача — 3+6+3, каталог — 3+9.

mx-auto max-w-7xl px-4
grid lg:grid-cols-12 gap-6

Форма

Радиусы и тени

Карточки не имеют обводки: только shadow-border. Hover поднимает тень, не красит бордер.

Компонент

Кнопки

На белом фоне CTA — accent blue. На герое — стеклянные кнопки, как у официальной витрины.

<Button variant="primary">Сохранить</Button>
<Button variant="copper">Регистрация</Button>
<Button variant="line">Отмена</Button>

<Link className={buttonVariants({ variant: "outline", size: "lg" })}>

Компонент

Поля

Высота 44px, фон ivory, тень как у карточки, фокус — outline copper. Лейбл сверху, не placeholder вместо лейбла.

<input className="mt-1 h-11 w-full rounded-md bg-ivory px-3 shadow-[var(--shadow-border)] outline-none focus:outline-2 focus:outline-copper" />

Компонент

Чипы и бейджи

Фильтры каталога — Chip. Бейджи типа, НМО и Live — маленькие плашки поверх медиа, не чипы.

<Chip active={type === id} onClick={() => setType(id)}>{label}</Chip>

Компонент

Карточки

Контент — вертикальная карточка с кадром 16:9. Событие — горизонтальная, слева navy-календарь.

КР2 балла НМО

Перелом проксимального отдела бедренной кости

Клинические рекомендации: диагностика, выбор метода остеосинтеза или эндопротезирования, ведение в раннем послеоперационном периоде.

ТБСv202424 мин

Видео4 балла НМО

Прямой передний доступ при первичном ЭТБС

Пошаговый видеоразбор DAA: укладка, интервал Hueter, защита LFCN, установка компонентов.

ТБС42 мин

16сен

LiveОнлайн

Перипротезная инфекция: разбор сложных случаев

Санкт-Петербург·13:00

11дек

Очно12 баллов НМО

XIII Всероссийский съезд травматологов-ортопедов

Казань·09:00

Compact-режим карточки контента — без кадра, с мета-строкой типа и анатомии. Используется в плотных лентах.

КР·ТБС

Перелом проксимального отдела бедренной кости

Клинические рекомендации: диагностика, выбор метода остеосинтеза или эндопротезирования, ведение в раннем послеоперационном периоде.

ТБСv202424 мин

Компонент

Кольцо НМО

Годовой прогресс врача. Медная дуга по cream-треку, подпись — tabular-nums. Цель по умолчанию 50 баллов.

<NmoRing value={18} max={50} />

Компонент

Баннеры

Тёмно-синяя полоса — юридический статус платформы. Live — единственный красный элемент интерфейса.

Каркас

Навигация

Десктоп — текстовое меню в шапке. Мобильная нижняя панель из пяти пунктов, высота 56px.

Паттерны

Загрузка, пусто, ошибка

Скелетон — cream-прямоугольники той же сетки, не спиннер по центру. Пустое состояние — карточка с одной фразой и следующим шагом.

Дисциплина

Делать / не делать