Style Guide

Typography

Heading 01

Size: 64px/120% Letter-spacing: -4%

Heading 02

Size: 48px/120% Letter-spacing: -4%

Heading 03

Size: 48px/120% Letter-spacing: -4%

Heading 04

Size: 32px/130% Letter-spacing: -2%
Heading 05
Size: 24px/140% Letter-spacing: -3%
Heading 06
Size: 20px/140% Letter-spacing: 0%

Body XL

Size: 24px/140% Letter-spacing: -3%

Body Large Medium

Size: 18px/150% Letter-spacing: 0% Font-weight: 500

Body Large

Size: 18px/150% Letter-spacing: 0%

Body Medium

Size: 16px/150% Letter-spacing: 0%

Body Small

Size: 12px/150% Letter-spacing: 0%

caption

Size: 12px/140% Letter-spacing: 4%

Caption

Size: 12px/120% Letter-spacing: -4%

Color palette

Primary color

Primary-700 #2E4E3A
Primary-600 #375B44
Primary-500 #40684E
Primary-400 #6DA47E
Primary-300 #97BEA7
Primary-200 #B6D1C0
Primary-100 #D2E3D8
Primary-50 #EDF5F0

Secondary color

Secondary-700 #794986
Secondary-600 #8B5E9B
Secondary-500 #9D72AE
Secondary-400 #A466CA
Secondary-300 #B788D6
Secondary-200 #CCA9E2
Secondary-100 #E0CCED
Secondary-50 #F2EAF7

Tertiary color

Tertiary-700 #9E2746
Tertiary-600 #AC425F
Tertiary-500 #BA5B78
Tertiary-400 #C77991
Tertiary-300 #D597AA
Tertiary-200 #E1B6C4
Tertiary-100 #EAD1DC
Tertiary-50 #F9F1F4

Base

Black #000000
White #ffffff

Button

md

lg

Shop now
Shop now
Shop now
Shop now
Shop now
Shop now
Shop now
Shop now
Shop now
Shop now

Spacing

Spacing Scale

0

1

2

4

8

12

16

20

24

28

32

Default Margins/Paddings (px)

0

2

4

8

16

24

32

40

48

56

64

2
4
8
16
24
32
40
48
56
64

Vertical padding Desktop top and bottom—64px

Vertical padding Mobile top and bottom—32px

Container

Desktop Layout Container Fluid Max width - 1312px Column Gap - 24px

Mobile Layout Container Fluid 390px Max width - 340px Column Gap - 24px Gutter - 24px

Container

Forms