style guide

Typography

Font Styles

H1

Heading-1

H2

Heading-2

H3

Heading-3

H4

Heading-4

heading-style-h1

Lorem ipsum

heading-style-h2

Lorem ipsum

heading-style-h3

Lorem ipsum

heading-style-h4

Lorem ipsum

paragraph-50

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

paragraph-32

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

paragraph-20

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

paragraph-16

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

paragraph-14

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

mono

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

Font family

font-family_neue-machina
This is some text inside of a div block.
font-family_space-mono
This is some text inside of a div block.

Font weight

font-weight_normal
This is some text inside of a div block.
font-weight_bold
This is some text inside of a div block.
font-weight_extrabold
This is some text inside of a div block.

Buttons & links

animated by gsap

button / b-o-white / yellow
связаться
связаться
button / yellow / w-o-yellow
СВЯЗАТЬСЯ
СВЯЗАТЬСЯ
button / w-o-yellow / yellow
СВЯЗАТЬСЯ
СВЯЗАТЬСЯ
icon / yellow / w-o-yellow
button / black / b-o-black
СВЯЗАТЬСЯ
СВЯЗАТЬСЯ
button / b-o-black / black
СВЯЗАТЬСЯ
СВЯЗАТЬСЯ
icon / black / b-o-black
link-underline

Components

navigation

header

forms

popup-contact

blocks

cta

Напиши нам

Ждем твоего сообщения на helloimpulseprod@gmail.com
или в Телеграм

cookies-consent