style guide

Typography

Font Styles

H1

Heading-1

H2

Heading-2

H3

Heading-3

H4

Heading-4

h1-ru

Lorem ipsum

h1-ru.is-accent

Lorem ipsum

h1-en

Lorem ipsum

h1-en.is-accent

Lorem ipsum

h2-ru

Lorem ipsum

h2-ru.is-accent

Lorem ipsum

h2-en

Lorem ipsum

h2-en.is-accent

Lorem ipsum

h3-ru

Lorem ipsum

h3-ru.is-accent

Lorem ipsum

h3-en

Lorem ipsum

h3-en.is-accent

Lorem ipsum

title-l

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

title-m

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

title-s

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

body-l

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

body-m

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

body-s

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

label-l

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

label-m

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

label-s

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

Font weight

font-weight-regular
This is some text inside of a div block.
font-weight-medium
This is some text inside of a div block.
font-weight-semibold
This is some text inside of a div block.

line height

line-height-m
This is some text inside of a div block.
line-height-l
This is some text inside of a div block.
line-height-xl
This is some text inside of a div block.

text colors

text-color-primary__light
This is some text inside of a div block.
text-color-secondary__light
This is some text inside of a div block.
text-color-tertiary__light
This is some text inside of a div block.
text-color-primary__dark
This is some text inside of a div block.
text-color-secondary__dark
This is some text inside of a div block.
text-color-tertiary__dark
This is some text inside of a div block.

Base icons

Buttons & links

Links

Footer link

Footer link

buttons

Button / Gradient

Button

button-primary__dark

Button

button-primary__dark.is-icon

Button

button-secondary__dark

Button

button-primary__light

Button

button-primary__light.is-icon

Button

button-secondary__light

Button

Components

Logos

logo

navigation

footer

forms

popup-contact
form
Выберите юрисдикцию
Спасибо! Ваша заявка отправлена!
Закрыть
Oops! Something went wrong while submitting the form.
Popup Get Materials
cta
cookies-consent