Style Guide

Grid System

THE TABLE OF GRID SYSTEM SIZES

Device Width
992px
< 992px
< 767px
<479px
Max Container Width
1170px
100%
100%
100%

Spacing System

SPACING - DESKTOP

Spacing System Desktop and 
Tablet Image
130px
40px
130px

- Paddings Tops and Bottom for blocks - 130px
- Inside of Blocks (between headlines and inside a
content block) -40px

SPACING - TABLET

Spacing System Desktop and 
Tablet Image
100px
40px
100px

- Paddings Tops and Bottom for blocks - 100px
- Inside of Blocks (between headlines and inside a
content block) -40px

SPACING - MOBILE

60px
30px
60px

- Paddings Tops and Bottom for blocks - 60px
- Inside of Blocks (between headlines and inside a
content block) -30px

Color Palette

PRIMARY

#8be9e1

#3ae2d3

#5d21d2

#763de7

#301c6b

#040222

#242230

#0a2440

#425466

#ffffff

SECONDARY

#ddd4f5

#f0ecfc

#fcf1ff

#f4effb

#f7f4fd

#f1f3ff

Typography

HEADERS - DESKTOP

font-family: Noto Sans;

Heading 1

38px/86px;

Heading 2

36px/44px;

Heading 3

26px/36px;

Heading 4

20px/30px;

Heading 5

18px/23px;

Heading 6

14px/18px;

HEADERS - TABLET

font-family: Noto Sans;

Heading 1

38px/72px;

Heading 2

36px/44px;

Heading 3

26px36px;

Heading 4

20px/30px;

Heading 5

18px/23px;

Heading 6

14px/18px;

HEADERS - MOBILE

font-family: Noto Sans;

Heading 1

38px/72px;

Heading 2

28px/34px;

Heading 3

24px/32px;

Heading 4

18px/28px;

Heading 5

18px/23px;

Heading 6

14px/18px;

BODY - DESKTOP

font-family: Nunito Sans;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl leo, porttitor ut tortor et, efficitur vehicula ipsum.

23px/39px;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl leo, porttitor ut tortor et, efficitur vehicula ipsum.

18px/26px;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl leo, porttitor ut tortor et, efficitur vehicula ipsum.

18px/30px;

BODY - TABLET

font-family: Nunito Sans;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl leo, porttitor ut tortor et, efficitur vehicula ipsum.

23px/39px;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl leo, porttitor ut tortor et, efficitur vehicula ipsum.

18px/26px;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl leo, porttitor ut tortor et, efficitur vehicula ipsum.

18px/30px;

BODY - MOBILE

font-family: Nunito Sans;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl leo, porttitor ut tortor et, efficitur vehicula ipsum.

18px/30px;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl leo, porttitor ut tortor et, efficitur vehicula ipsum.

18px/26px;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl leo, porttitor ut tortor et, efficitur vehicula ipsum.

18px/27px;

Primary / Dark / Light Button Text

font-family: Nunito Sans;

Button text semi bold

16px/20px;

Arrow Button Text

font-family: Open Sans;

Button text normal

15px/20px;

List

LIST - DIST

  • Email ticketing
  • Customer Management
  • Mobile Apps
  • Email Support

spacings: 12px;
bullet size: 8px;

LIST - DIST

  • Email ticketing
  • Customer Management
  • Mobile Apps
  • Email Support

spacings: 12px;
bullet size: 8px;

Quote

"It is really refreshing to work with this software which is truly helpful in the client’s preferences."

Rebecca Calderon

Head of marketing, Apple Inc.

Icon Set

SOCIAL ICONS

Platform ICONS

Buttons

font: Nunito Sans
16px/20px;
paddings: 14px 24px;
margin: 10px

background: #8be9e1;
text color: #301c6b;
background (hover): #3ae2d3;

background: #5d21d2;
text color: #ffffff;
background (hover): #301c6b;

color: #8be9e1;
text color (hover): #301c6b;
background (hover): #3ae2d3;

color: #5d21d2;
color (hover): #301c6b;

Dark With Arrow

background: #8be9e1;
text color: #301c6b;
background (hover): #3ae2d3;

Dark With Arrow

background: #5d21d2;
text color: #ffffff;
background (hover): #301c6b;

Arrow Button

color: #5d21d2;
color(hover):#763de7;

Arrow Button

color: #5d21d2;
color(hover):#763de7;

Buy this Template