Colours

Colours Element

Primary color 1:

479ec1

Primary color 2:

ff6e68

Primary color 3:

fc5e48

Primary color 4:

b49968

Primary color 6:

c3d136

Primary color 5:

e1aa5e

Primary color 6:

00b9bf

Text Colours

Title text color

2c2c2c

Body text color

707070

Box text colour

9a9a9a

Typography Elements

Body text1: Jost / Font size: 18px / Line height: 30px / Colour: 707070 / Letter spacing: 10px / Font weight: 400Body text1: Jost / Font size: 16px / Line height: 28px / Colour: 707070 / Letter spacing: 10px / Font weight: 400

Heading 1

(Heading 1: Jost / Font size: 36px / colour: 2c2c2c / Letter spacing: 0px / Font weight: 400 / Line height: 40px /
Distance from title to description: 34px)

Heading 2

(Heading 2: Jost / Font size: 32px / Colour: 2c2c2c / Letter spacing: 0px / Font weight: 400 / Line height: 36px /
Distance from title to description: 34px)

Heading 3

(Heading 3: Jost / Font size: 28px / Colour: 2c2c2c / Letter spacing: 0px / Font weight: 400 / Line height: 34px /
Distance from title to description: 34px)

Heading 4

(Heading 4: Iost / Font size: 24px / Colour: 2c2c2c / Letter spacing: 0px / Font weight: Medium / Line height: 30px /
Distance from title to description: 30px)

Heading 5

(Heading 5: Jost / Font size: 22px / Colour: 2c2c2c / Letter spacing: 0px / Font weight: 400 / Line height: 30px /
Distance from title to description: 30px)

Heading 6

(Heading 6: Jost / Font size: 20px / Colour: 2c2c2c / Letter spacing: 10px / Font weight: 400 / Line height: 28px /
Distance from title to description: 30px)

Button Elements

Button colours:

Primary

Secondary

Disabled

Primary hover

Secondary hover

Button sizes:

H = 56px

H = 50px

H = 44px

H = 38px

Textlink

Textlink hover

Textlink

Text link

Filter & Tab Elements

All

Clothes
Shoes
Bags
Accessories

All

Clothes
Shoes
Bags

New Arrival

Top Review
Top Search

Alerts

Success message
Warning display
Notification text

Paginations

123

Tooltip

Quick View
Quick View
Quick View
Quick View

Text List

Level 1 hover
Level 1 default
- Level 2 hover
- Level 2 default
  - Level 3 hover
  - Level 3 default

Level 1 hover
Level 1 default
- Level 2 hover
- Level 2 default
  - Level 3 hover
  - Level 3 default

Level 1 hover
Level 1 default
- Level 2 hover
- Level 2 default
  - Level 3 hover
  - Level 3 default

Table

Employee	Salary
John Doe	$100	Because that’s all Steve Jobs needed for a salary.
John Doe	$100	Because that’s all Steve Jobs needed for a salary.
John Doe	$100	Because that’s all Steve Jobs needed for a salary.