руководство по стилю

Типографика

Стили шрифтов

H1

Заголовок-1

H2

Заголовок-2

H3

Заголовок-3

H4

Заголовок-4

заголовок-h1

Lorem ipsum

заголовок-h1 акцент

Lorem ipsum

заголовок-h2

Lorem ipsum

заголовок-h2 акцент

Lorem ipsum

заголовок-h3

Lorem ipsum

заголовок-h3 акцент

Lorem ipsum

название-l

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

название-м

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

название-s

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

тело-л

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

тело-м

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

тело-s

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

метка-l

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

метка-м

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

этикетка-s

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

Семейство шрифтов

заголовок-регулярный
Это текст внутри блока div.
заголовок-акцент
Это текст внутри блока div.
заголовок-регулярный
Это текст внутри блока div.

Шрифт

начертание шрифта-обычный
Это текст внутри блока div.
начертание шрифта-среднее
Это текст внутри блока div.
начертание-жирный
Это текст внутри блока div.

высота строки

line-height-90
Это текст внутри блока div.
line-height-100
Это текст внутри блока div.
line-height-144
Это текст внутри блока div.

цвета текста

цвет-непрозрачность-0.5
Это текст внутри блока div.
текст-цвет-вторичный
Это текст внутри блока div.

Базовые иконки

связь

связь

Кнопки и ссылки

Ссылки

Навигационная ссылка

связь

связь

Ссылка для переключения раскрывающегося списка

Навигация Переключить ссылку

Ссылка на выпадающий список

Ссылка раскрывающегося меню навигации

Ссылка нижнего колонтитула

Ссылка нижнего колонтитула

кнопки

Кнопка/Градиент

Кнопка

кнопка-первичная__темная

Кнопка

кнопка-первичная__темная.is-значок

Кнопка

кнопка-вторичная__темная

Кнопка

кнопка-первичный__свет

Кнопка

кнопка-первичный__свет.is-значок

Кнопка

кнопка-вторичный__свет

Кнопка

Компоненты

Логотипы

логотип

навигация

заголовок
нижний колонтитул

формы

всплывающий контакт
форма
Заголовок
Падать
Спасибо! Ваша заявка отправлена!
Закрыть
Упс! Что-то пошло не так при отправке формы.
Всплывающее окно Получить материалы
cta
куки-согласие