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

Spacing System Mobile Image

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

72px/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

60px/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

40px/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;

LINKS - DESKTOP

font-family: Nunito Sans;

Lorem ipsum dolor sit amet.

18px;

LINKS - TABLET

font-family: Nunito Sans;

Lorem ipsum dolor sit amet.

18px;

LINKS - MOBILE

font-family: Nunito Sans;

Lorem ipsum dolor sit amet.

18px;

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;

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

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

Boost Your Webflow with Pro Apps! Get 20% Off with Code WEBFLOW20

Buy this Template