Style Guide

GRID SYSTEM

THE TABLE OF GRID SYSTEM SIZES

Device Width
1025px
< 1024px
< 767px
<479px
Container Width
1170px
100%
100%
100%

SPACING SYSTEM

SPACING - DESKTOP

spacing tablet
130px
60px
130px

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

SPACING - TABLET

spacing tablet
100px
60px
100px

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

SPACING - MOBILE

spacing mobile
60px
40px
60px

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

COLOR PALETTE

PRIMARY

#24adb6

#2e3842

#505393

SECONDARY

#ebebeb

#ffffff

#505393

TYPOGRAPHY

HEADERS - DESKTOP

font-family: Montserrat;

Heading 1

80px/90px;

Heading 2

45px/54px;

Heading 3

35px/42px;

Heading 4

25px/32px;

Heading 5

18px/28px;

Heading 6

13px/22px;

HEADERS - TABLET

font-family: Montserrat;

Heading 1

65px/73px;

Heading 2

45px/54px;

Heading 3

35px/42px;

Heading 4

25px/32px;

Heading 5

18px/28px;

Heading 6

13px/22px;

HEADERS - MOBILE

font-family: Montserrat;

Heading 1

45px/55px;

Heading 2

35px/44px;

Heading 3

25px/35px;

Heading 4

20px/32px;

Heading 5

18px/28px;

Heading 6

13px/22px;

BODY - DESKTOP

font-family: Montserrat;

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

15px/1.7em;

BODY - TABLET

font-family: Montserrat;

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

15px/1.7em;

BODY - MOBILE

font-family: Montserrat;

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

15px/1.7em;

LINKS - DESKTOP

Lorem ipsum dolor sit amet.

LINKS - TABLET

Lorem ipsum dolor sit amet.

LINKS - MOBILE

Lorem ipsum dolor sit amet.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

LIST

LIST - DIST

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Quisque purus lorem nibh
  • Sed aliquam nibh aliquam

spaces inside: 10px;
bullet size: 7px;

LIST - DECIMAL

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Quisque purus lorem nibh
  4. Sed aliquam nibh aliquam

spaces inside: 10px;

QUOTE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

JOHN DOE

Designer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

JOHN DOE

Designer

ICON SET

NAVIGATION ICONS

SOCIAL ICONS

BUTTONS

Dimensions

font: Montserrat 500
16px/1.15em;
paddings: 20px 35px;

Primary Burron

background: #24adb6;
color: #ffffff;
background (hover): #dc0d06;

Dark Burron

background: #131c21;
color: #ffffff;
background (hover): #2f434e;

Light Button

background: #ffffff;
color: #ff3f39;
background (hover): #ff3f39;
color (hover): #ffffff;

Light Button

color: #ff3f39;
color(hover):#dc0d06;