Style guide

Colors

Primary background

Secondary background

Tertiary background

White color

Border color

Hover color

Black color

CTAs

Button primary

Get In Touch

Button secondary

Get In Touch

Button with icon

drinkavaline.com

Link

Link with class .link

Typography

H1 GT Super Display Desktop: 54/62px Mobile: 44/52px Tag/class name: h1, .h1

Desktop: The quick brown fox jumps over the lazy dog. Description

Mobile: The quick brown fox jumps over the lazy dog. Description

H2 GT Super Display Desktop: 44/56px Mobile: 34/44px Tag/class name: h2, .h2

Desktop: The quick brown fox jumps over the lazy dog. Description

Mobile: The quick brown fox jumps over the lazy dog. Description

H3 GT Super Display Desktop: 40/56px Mobile: 28/38px Tag/class name: h3, .h3

Desktop: The quick brown fox jumps over the lazy dog. Description

Mobile: The quick brown fox jumps over the lazy dog. Description

H4 GT Super Display Desktop: 30/38px Mobile: 26/32px Tag/class name: h3, .h3

Desktop: The quick brown fox jumps over the lazy dog. Description

Mobile: The quick brown fox jumps over the lazy dog. Description

H5 Messina Sans Desktop: 14/20px Mobile: 12/16px Tag/class name: h5, .h5

Desktop: The quick brown fox jumps over the lazy dog. Description

Mobile: The quick brown fox jumps over the lazy dog. Description

.body-1 Messina Sans Desktop: 24/30px Mobile: 21/28px Tag/class name: .body-1

Desktop: The quick brown fox jumps over the lazy dog. Description

Mobile: The quick brown fox jumps over the lazy dog. Description

.body-2 Messina Sans Desktop: 20/26px Mobile: 18/24px Tag/class name: .body-2

Desktop: The quick brown fox jumps over the lazy dog. Description

Mobile: The quick brown fox jumps over the lazy dog. Description

.body-2-bold Messina Sans Desktop: 20/26px Mobile: 18/24px Tag/class name: .body-2-bold

Desktop: The quick brown fox jumps over the lazy dog. Description

Mobile: The quick brown fox jumps over the lazy dog. Description

.body-3 Messina Sans Desktop: 14/20px Mobile: 14/20px Tag/class name: body-3

Desktop: The quick brown fox jumps over the lazy dog. Description

Mobile: The quick brown fox jumps over the lazy dog. Description

.body-3-bold Messina Sans Desktop: 14/20px Mobile: 14/20px Tag/class name: .body-3-bold

Desktop: The quick brown fox jumps over the lazy dog. Description

Mobile: The quick brown fox jumps over the lazy dog. Description

.body-3-semibold Messina Sans Desktop: 14/20px Mobile: 14/20px Tag/class name: .body-3-semibold

Desktop: The quick brown fox jumps over the lazy dog. Description

Mobile: The quick brown fox jumps over the lazy dog. Description