Служебная страница · Дизайн-гайд

Типографика
и дизайн-система

Визуальный язык проекта: шрифты, цвета, отступы, компоненты. Эта страница скрывается в боевой сборке — здесь только для разработки и поддержки вёрстки.

Inter · UI / навигация Source Serif 4 · Основной текст

Цвета

Палитра основана на синем акцентном цвете и нейтральных тёплых оттенках. Все цвета объявлены через CSS-переменные в variables.css.

Акцент
Accent
--color-accent
#1A4F8A
Accent Hover
--color-accent-hover
#123669
Accent Light
--color-accent-light
#E3EDF8
Accent BG
--color-accent-bg
#F0F5FC
Фон и поверхности
BG
--color-bg
#FAFAF8
Surface
--color-surface
#FFFFFF
Surface Alt
--color-surface-alt
#F3F2EE
Border
--color-border
#E2E0DA
Текст
Text
--color-text
#1A1A1A
Secondary
--color-text-secondary
#5C5C5C
Muted
--color-text-muted
#8A8A8A
Visited
--color-link-visited
#5A4A7C

Шкала заголовков

Все заголовки — гарнитура Inter, жирность 600, цвет --color-accent. Размеры адаптивные через clamp().

h1 clamp(2.25rem → 3rem)

Заголовок первого уровня

h2 clamp(1.875rem → 2.5rem)

Заголовок второго уровня

h3 clamp(1.5rem → 2rem)

Заголовок третьего уровня

h4 clamp(1.25rem → 1.5rem)

Заголовок четвёртого уровня

h5 clamp(1.125rem → 1.25rem)
Заголовок пятого уровня
h6 1rem · var(--text-base)
Заголовок шестого уровня

Гарнитуры

Inter
UI / Заголовки / Навигация / Метаданные
--font-ui
АаБбВвГгДдЕеЁёЖжЗзИиЙйКкЛлМмНнОоПпРрСсТтУуФфХхЦцЧчШшЩщЪъЫыЬьЭэЮюЯя
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789
Regular 400 Medium 500 SemiBold 600 Bold 700
Source Serif 4
Основной текст / Длинные материалы / Цитаты
--font-body
АаБбВвГгДдЕеЁёЖжЗзИиЙйКкЛлМмНнОоПпРрСсТтУуФфХхЦцЧчШшЩщЪъЫыЬьЭэЮюЯя
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789
Regular 400 Italic 400 SemiBold 600 SemiBold Italic

Текстовые стили

Основной текст · --text-base · line-height 1.8

Регулирование алкогольного рынка является одной из ключевых сфер государственной политики в области охраны здоровья населения. Данный текст набран гарнитурой Source Serif 4 — удобной для длинных материалов.

Крупный текст · --text-lg · Подзаголовок / лид

Подготовлен Общественным советом при Федеральной службе по контролю за алкогольным и табачным рынками.

Мелкий текст · --text-sm · Метаданные / подписи

Источник: ВОЗ, Глобальный доклад о состоянии проблем алкоголя и здоровья населения, 2018. Данные за 2016 год.

Подпись / метка · --text-xs · Капслок

ИССЛЕДОВАНИЕ · 2026 · РОСАЛКОГОЛЬТАБАККОНТРОЛЬ

Моноширинный · --font-mono · Код и переменные

--color-accent: #1A4F8A;
--font-body: 'Source Serif 4', Georgia, serif;

Отступы и сетка

Шкала отступов построена на базовом шаге 4px (0.25rem). Переменные объявлены в variables.css.

--space-1
4px · 0.25rem
--space-2
8px · 0.5rem
--space-3
12px · 0.75rem
--space-4
16px · 1rem
--space-6
24px · 1.5rem
--space-8
32px · 2rem
--space-12
48px · 3rem
--space-16
64px · 4rem
--space-20
80px · 5rem
--space-24
96px · 6rem
Контент (статья) --content-width: 720px
Широкий блок --wide-width: 960px
Максимальная ширина --max-width: 1200px
Сайдбар (TOC) --sidebar-width: 260px
Горизонтальные поля --gutter: clamp(1rem → 2rem)

Кнопки

Два варианта: основной .btn--primary и второстепенный .btn--secondary. Общий класс .btn.

Default
Кнопка
Hover (наведите)
Кнопка hover

Контент статьи

Элементы длинного текстового контента в контексте класса .article.

Глава I. Алкогольная политика Российской Федерации

Россия за последние два десятилетия стала одним из наиболее успешных примеров в мире по снижению вредного потребления алкоголя. Это подтверждает Всемирная организация здравоохранения, называя российскую антиалкогольную стратегию образцовой.

I.I Исторические предпосылки

Модель эпизодического, но обильного потребления, которая позднее стала восприниматься как «традиционно русская», формировалась в России постепенно. Долгое время такое потребление было локальным, преимущественно городским явлением.

I.I.I Детальный подзаголовок четвёртого уровня

После Великой Отечественной войны потребление алкоголя постепенно стало расти. Рост материального благосостояния в 1960–1970-е годы сопровождался быстрым увеличением легального потребления.

ВОЗ подчёркивает: ни одна другая страна не внедрила столь полный и технологически развитый механизм контроля как ЕГАИС. Введение этой системы позволило предотвратить рост незарегистрированного потребления на фоне повышения акцизов.

Результатом стало значительное снижение потребления алкоголя, особенно крепкого и незарегистрированного.

Нумерованный и маркированный списки

  1. Изучить отечественный и зарубежный опыт государственного регулирования алкогольного рынка.
  2. Оценить социально-экономические последствия различных типов ограничительных мер.
  3. Провести систематизацию накопленных научных данных и выделить закономерности.
  • Ценовая политика и минимальные розничные цены
  • Ограничения мест и времени продажи
  • Контроль рекламы и маркетинга
  • Система ЕГАИС как инструмент прослеживаемости

Таблица

Период Потребление, л/год Меры политики
1994–1995 15–18 л Дерегулирование рынка
2005 18,7 л Начало комплексной политики
2016 11,7 л ЕГАИС, МРЦ, акцизы
2019 9,1 л Концепция 2020, полный цикл мер

Горизонтальный разделитель


Контент после разделителя. Разделитель используется для визуальной паузы между крупными смысловыми блоками.

Карточки источников

Компонент .source-card — базовый элемент страницы «Список источников».

Состояния интерактивных элементов

Все интерактивные элементы имеют явные состояния :hover, :focus-visible и :active. Фокус всегда заметен — синяя обводка 2px.

Кнопка · Primary
Default
Hover
Focus
Disabled
Кнопка · Secondary
Default
Hover
Focus
Ссылка в тексте
Карточка источника
Default
Название источника
Hover
Название источника