Cart 0 x

Style Guide

Colours

Colours Element

Primary color 1:

479ec1

Primary color 2:

ff6e68

Primary color 3:

fc5e48

Primary color 4:

b49968

Primary color 5:

e1aa5e

Primary color 6:

c3d136

Primary color 6:

00b9bf

Text Colours

Title text color

2c2c2c

Body text color

707070

Box text colour

9a9a9a

Typography Elements

Body text1: Apercu Pro / Font size: 18px / Line height: 26px / Colour: 707070 / Letter spacing: 0px / Font weight: Regular

Body text1: Apercu Pro / Font size: 16px / Line height: 24px / Colour: 707070 / Letter spacing: 0px / Font weight: Regular

Caption text: Apercu Pro / Font size: 14px / Line height: 20px / Colour: 9a9a9a / Letter spacing: 0px / Font weight: Regular / The distance from the photo is 15px

Error text: Apercu Pro / Font size: 14px / Line height: 20px / Colour: bf0d12 / Letter spacing: 0px / Font weight: Regular / The distance from the box is 15px

Heading 1

(Heading 1: Apercu Pro / Font size: 34px / colour: 2c2c2c / Letter spacing: -10px / Font weight: Medium / Line height: 36px / Distance from title to description: 30px)

Heading 2

(Heading 2: Apercu Pro / Font size: 30px / Colour: 2c2c2c / Letter spacing: -10px / Font weight: Medium / Line height: 32px / Distance from title to description: 30px)

Heading 3

(Heading 3: Apercu Pro / Font size: 26px / Colour: 2c2c2c / Letter spacing: -10px / Font weight: Medium / Line height: 30px / Distance from title to description: 30px)

Heading 4

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

Heading 5

(Heading 5: Apercu Pro / Font size: 20px / Colour: 2c2c2c / Letter spacing: 0px / Font weight: Medium / Line height: 26px / Distance from title to description: 22px)

Heading 6

(Heading 5: Apercu Pro / Font size: 18px / Colour: 2c2c2c / Letter spacing: 0px / Font weight: Medium / Line height: 24px / Distance from title to description: 20px)

Button Elements

Button sizes:

Textlink

Textlink hover

Textlink 

Textlink 

Textlink 

Filter & Tab Elements

All

Alerts

Paginations

1 2 3

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.

Definition Lists

Definition List Title

Definition list division.

Startup

A startup company or startup is a company or temporary

Checkbox & Radio Button

Input & Dropdown

Image Size

Image 1

170 x 230
270 x 364
370 x 500
470 x635
370 x 500

Image 2

170 x 170
270 x 270
370 x 370
470 x 470
570 x 570

Image 3

170 x 108
270 x 172
370 x236
470 x 300
570 x364
X