Brand Guidelines
Typography
2.7
Headings
Desktop
Mobile
H1 Heading
Overused Grotesk
76px
Medium
110% LH
0 LS
This is a H1 Heading
40px
120% LH
0 LS
Heading 1
H2 Heading
Overused Grotesk
62px
Medium
120% LH
0 LS
This is a H2 Heading
36px
120% LH
0 LS
Heading 2
H3 Heading
Overused Grotesk
48px
Medium
120% LH
0 LS
This is a H3 Heading
32px
120% LH
0 LS
Heading 3
H4 Heading
Overused Grotesk
40px
Medium
130% LH
0 LS
This is a H4 Heading
24px
150% LH
0 LS
H5 Heading
Overused Grotesk
32px
Medium
130% LH
0 LS
This is a H5 Heading
20px
150% LH
0 LS
Heading 5
H6 Heading
Overused Grotesk
26px
Medium
130% LH
0 LS
This is a H6 Heading
18px
150% LH
0 LS
Heading 6
Body Text
Body Large Strong
Inter
24px
Medium
150% LH
0.5% LS
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede.
Donec mollis hendrerit risus. Nam at tortor in tellus interdum sagittis, felis eros vehicula leo, at malesuada velit leo quis pede.
Body Large Regular
Inter
24px
Regular
150% LH
0.5% LS
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede.
Donec mollis hendrerit risus. Nam at tortor in tellus interdum sagittis, felis eros vehicula leo, at malesuada velit leo quis pede.
Body Medium Strong
Inter
22px
Medium
160% LH
0.5% LS
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede.
Donec mollis hendrerit risus. Nam at tortor in tellus interdum sagittis, felis eros vehicula leo, at malesuada velit leo quis pede.
Body Medium Regular
Inter
22px
Regular
160% LH
0.5% LS
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede.
Donec mollis hendrerit risus. Nam at tortor in tellus interdum sagittis, felis eros vehicula leo, at malesuada velit leo quis pede.
Body Regular Strong
Inter
20px
Medium
180% LH
0.5% LS
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede.
Donec mollis hendrerit risus. Nam at tortor in tellus interdum sagittis, felis eros vehicula leo, at malesuada velit leo quis pede.
Body Regular
Inter
20px
Regular
180% LH
0.5% LS
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede.
Donec mollis hendrerit risus. Nam at tortor in tellus interdum sagittis, felis eros vehicula leo, at malesuada velit leo quis pede.
Body Small Strong
Inter
18px
Medium
180% LH
0.5% LS
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede.
Donec mollis hendrerit risus. Nam at tortor in tellus interdum sagittis, felis eros vehicula leo, at malesuada velit leo quis pede.
Body Small Regular
Inter
18px
Regular
180% LH
0.5% LS
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede.
Donec mollis hendrerit risus. Nam at tortor in tellus interdum sagittis, felis eros vehicula leo, at malesuada velit leo quis pede.
Body Extra Small Strong
Inter
16px
Medium
180% LH
0.5% LS
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede.
Donec mollis hendrerit risus. Nam at tortor in tellus interdum sagittis, felis eros vehicula leo, at malesuada velit leo quis pede.
Body Extra Small Regular
Inter
16px
Regular
180% LH
0.5% LS
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede.
Donec mollis hendrerit risus. Nam at tortor in tellus interdum sagittis, felis eros vehicula leo, at malesuada velit leo quis pede.
Buttons
Button Large
Overused Grotesk
20px
Medium
120% LH
1% LS
This is a Button Large text.
Button Regular
Overused Grotesk
18px
Medium
120% LH
1% LS
This is a Button Regular text.
Button Small
Overused Grotesk
16px
Medium
120% LH
1% LS
This is a Button Small text.
Navigation Links
Navigation Large
Overused Grotesk
40px
Regular
120% LH
1% LS
This is a Navigation Large
Navigation Regular
Overused Grotesk
18px
Regular
120% LH
1% LS
This is a Navigation Regular
Navigation Small
Overused Grotesk
16px
Regular
120% LH
1% LS
This is a Navigation Small
LH = Line Height, LS = Letter Spacing
Brand Guidelines
Color
3.1
Secondary Colors
Green 1
#395937
Green 2
#425E40
Dark Green
#162015
Beige - Light 1
#C3B69F
Beige - Light 2
#C5BEB2
Beige Medium
78694D
Beige Dark
#69593C
Primary Colors
Black
#000000
White
#FFFFFF
Light Grey
#F8F9FA
Semantic Colors
Info
Blue Light
#F5F8FE
Blue Mid
#C2D6FC
Blue Dark
#315FBD
Success
Green Light
#F2FCF3
Green Mid
#C5E5CC
Green Dark
#208A3C
Warning
Yellow Light
#FFFAEB
Yellow Mid
#FED277
Yellow Dark
#FFAF0F
Danger
Red Light
#FFF7F7
Red Mid
#FAD4D8
Red Dark
#DB3B4B
Color Guide Link : https://www.youtube.com/watch?v=ewRYw4pnKQU
