Style Guide

Desktop Version

Heading1

Bricolage Grotesque

ExtraBold

82px

/

98px

The quick brown fox jumps over the lazy dog.

Heading2

Bricolage Grotesque

ExtraBold

64px

/

68px

The quick brown fox jumps over the lazy dog.

Heading3

Bricolage Grotesque

Bold

48px

/

58px

The quick brown fox jumps over the lazy dog.

Heading4

Bricolage Grotesque

Bold

36px

/

43px

The quick brown fox jumps over the lazy dog.

36-semi bold

Bricolage Grotesque

Semi Bold

36px

/

43px

The quick brown fox jumps over the lazy dog.

Heading5

Bricolage Grotesque

Bold

28px

/

34px

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

Bricolage Grotesque

Regular

28px

/

34px

The quick brown fox jumps over the lazy dog.
Heading6

Bricolage Grotesque

Bold

22px

/

26px

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

Bricolage Grotesque

Regular

22px

/

32px

The quick brown fox jumps over the lazy dog.

Paragraph Text

Para-18 Regular

Lexend

Regular

18px

/

28px

The quick brown fox jumps over the lazy dog.

Paragraph

Lexend

Regular

16px

/

26px

The quick brown fox jumps over the lazy dog.

Sub Paragraph

Lexend

Regular

15px

/

24px

The quick brown fox jumps over the lazy dog.

Mobile Version

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

Bricolage Grotesque

ExtraBold

34px

/

40px

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

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

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

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

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

Bricolage Grotesque

Regular

22px

/

28px

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

Bricolage Grotesque

Bold

18px

/

23px

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

Bricolage Grotesque

Regular

18px

/

23px

The quick brown fox jumps over the lazy dog.

Paragraph Text

Para-18 Regular

Lexend

Regular

16px

/

26px

The quick brown fox jumps over the lazy dog.

Paragraph

Lexend

Regular

15px

/

24px

The quick brown fox jumps over the lazy dog.

Sub Paragraph

Lexend

Regular

15px

/

24px

The quick brown fox jumps over the lazy dog.

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

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 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

Cat Food

Cat Food

Cat Food

No Icon Primary

Cat Food

Cat Food

Cat Food

Small Primary

Cat Food

Cat Food

Cat Food

Primary

Dog Food

Dog Food

Dog Food

No Icon Primary

Dog Food

Dog Food

Dog Food

Small Primary

Dog Food

Dog Food

Dog Food