Book a free consultation

Style guide

This style guide explains colors, fonts, layouts, and rules to keep your website consistent, professional, and visually appealing everywhere.

Colors

brown

#2a2515

green-dark

#1d2520

gray-dark

#4e4848

green-light

#74745f

yellow

#fff4ad

gray-light

#d6d4c7

neutral-2

#ece8d7

neutral

#f6f4e8

white

#ffffff

Typography

Text-style-huge

Bdogrotesk - Bold

Size 6 rem

Line-height 100%

Heading-style-h1

Bdogrotesk - Medium

Size 3.6 rem

Line-height 116%

Heading-style-h2

Bdogrotesk - Medium

Size 2.4 rem

Line-height 130%

Heading-style-h3

Bdogrotesk - Medium

Size 1.8 rem

Line-height 120%

Heading-style-h4

Bdogrotesk - Medium

Size 1.25 rem

Line-height 150%

Heading-style-h5

Bdogrotesk - Medium

Size 1.25 rem

Line-height 150%

Heading-style-h6

Bdogrotesk - Medium

Size 1.25 rem

Line-height 150%

text-style-large

Bdogrotesk - Medium

Size 1.25 rem

Line-height 150%

text-style-regular

Bdogrotesk - Medium

Size 1.125 rem

Line-height 150%

text-style-nav

Bdogrotesk - Medium

Size 2.4 rem

Line-height 120%

Letter spacing 0.6 px

text-style-badge

Bdogrotesk - Regular

Size 0.9 rem

Line-height 100%

Letter spacing 1 px

Typography Color

Text-color-primary

Text-color-secondary

Text-color-brand

Text-color-on-inverse

Typography Color

Spacer-tiny

Spacer-xxsmall

Spacer-xsmall

Spacer-small

Spacer-medium

Spacer-large

Spacer-xlarge

Spacer-xxlarge

Spacer-huge

Spacer-xhuge

Spacer-xxhuge

Text-color-brand