Style Guide

Style Guide

Style Guide

Desktop Version

Desktop Version

Desktop Version

Heading1
Heading1
Heading1

Bricolage Grotesque

ExtraBold

82px

/

98px

The quick brown fox jumps over the lazy dog.

Heading2
Heading2
Heading2

Bricolage Grotesque

ExtraBold

64px

/

68px

The quick brown fox jumps over the lazy dog.

Heading3
Heading3
Heading3

Bricolage Grotesque

Bold

48px

/

58px

The quick brown fox jumps over the lazy dog.

Heading4
Heading4
Heading4

Bricolage Grotesque

Bold

36px

/

43px

The quick brown fox jumps over the lazy dog.

36-semi bold
36-semi bold
36-semi bold

Bricolage Grotesque

Semi Bold

36px

/

43px

The quick brown fox jumps over the lazy dog.

Heading5
Heading5
Heading5

Bricolage Grotesque

Bold

28px

/

34px

The quick brown fox jumps over the lazy dog.
28-regular
28-regular
28-regular

Bricolage Grotesque

Regular

28px

/

34px

The quick brown fox jumps over the lazy dog.
Heading6
Heading6
Heading6

Bricolage Grotesque

Bold

22px

/

26px

The quick brown fox jumps over the lazy dog.
22-regular
22-regular
22-regular

Bricolage Grotesque

Regular

22px

/

32px

The quick brown fox jumps over the lazy dog.

Paragraph Text

Paragraph Text

Paragraph Text

Para-18 Regular
Para-18 Regular
Para-18 Regular

Lexend

Regular

18px

/

28px

The quick brown fox jumps over the lazy dog.

Paragraph
Paragraph
Paragraph

Lexend

Regular

16px

/

26px

The quick brown fox jumps over the lazy dog.

Sub Paragraph
Sub Paragraph
Sub Paragraph

Lexend

Regular

15px

/

24px

The quick brown fox jumps over the lazy dog.

Mobile Version

Mobile Version

Heading1
Heading1

Bricolage Grotesque

ExtraBold

40px

/

48px

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Heading2
Heading2

Bricolage Grotesque

ExtraBold

34px

/

40px

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Heading3
Heading3

Bricolage Grotesque

Bold

30px

/

37px

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Heading4
Heading4

Bricolage Grotesque

Bold

26px

/

32px

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

36-semi bold
36-semi bold

Bricolage Grotesque

Semi Bold

26px

/

32px

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Heading5
Heading5

Bricolage Grotesque

Bold

22px

/

28px

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
28-regular
28-regular

Bricolage Grotesque

Regular

22px

/

28px

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Heading6
Heading6

Bricolage Grotesque

Bold

18px

/

23px

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
22-regular
22-regular

Bricolage Grotesque

Regular

18px

/

23px

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

Paragraph Text

Paragraph Text

Para-18 Regular
Para-18 Regular

Lexend

Regular

16px

/

26px

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Paragraph
Paragraph

Lexend

Regular

15px

/

24px

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Sub Paragraph
Sub Paragraph

Lexend

Regular

15px

/

24px

The quick brown fox jumps over the lazy dog.

Primary

Primary

Primary

Primary updated

#036147

rgb(3, 97, 71)

hsl(163, 94, 20)

Title coor

#036147

rgb(3, 97, 71)

hsl(163, 94, 20)

Body color

#3A5949

rgb(58, 89, 73)

hsl(149, 21, 29)

primary-light

#CCDFDA

rgb(204, 223, 218)

hsl(164, 23, 84)

Hero section bg color ligjt

#FBF7F0

rgb(251, 247, 240)

hsl(38, 58, 96)

Section bg 1

#FFF8EB

rgb(255, 248, 235)

hsl(39, 100, 96)

Section bg 2

#ECE9E1

rgb(236, 233, 225)

hsl(44, 22, 90)

Action

Action

Action

White color

#FFFFFF

rgb(255, 255, 255)

hsl(0, 0, 100)

Primary button color

#434645

rgb(67, 70, 69)

hsl(160, 2, 27)

Action color

#97DF7E

rgb(151, 223, 126)

hsl(105, 60, 68)

Secondary

Secondary

Secondary

Secondary updated

#CE452C

rgb(206, 69, 44)

hsl(9, 65, 49)

Section border

#C2CCC9

rgb(194, 204, 201)

hsl(162, 9, 78)

Border line

#EBD1AB

rgb(235, 209, 171)

hsl(36, 62, 80)

Footer

#E2DDD5

rgb(226, 221, 213)

hsl(37, 18, 86)

Primary

Learn More

Learn More

Learn More

No Icon Primary

Learn More

Learn More

Learn More

Small Primary

Learn More

Learn More

Learn More

Primary

Free Quote

Free Quote

Free Quote

No Icon Primary

Free Quote

Free Quote

Free Quote

Small Primary

Free Quote

Free Quote

Free Quote