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
80px
‍
40px
‍
80px
‍

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

SPACING - MOBILE

spacing mobile
60px
‍
20px
‍
60px
‍

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

COLOR PALETTE

PRIMARY

#fc8e44

#222222

#5e5e5e

TYPOGRAPHY

HEADERS - DESKTOP

font-family: Playfair Display;

Heading 1

80px/90px; letter-spg.: 5px;

font-family: Karla;

HEADERS - DESKTOP

Heading 2

40px/48px; letter-spg.: -0.5px;

Heading 3

30px/40px; letter-spg.: -0.5px;

Heading 4

24px/30px; letter-spg.: -0.5px;

Heading 5

20px/26px; letter-spg.: 0px;

Heading 6

16px/20px; letter-spg.: 2.7px;

HEADERS - TABLET

font-family: Playfair Display;

Heading 1

80px/90px; letter-spg.: 5px;

font-family: Karla;

Heading 2

40px/48px; letter-spg.: -1px;

Heading 3

30px/40px; letter-spg.: -0.5px;

Heading 4

24px/30px; letter-spg.: -0.5px;

Heading 5

20px/26px; letter-spg.: 0px;

Heading 6

16px/20px; letter-spg.: 2.7px;

HEADERS - MOBILE

font-family: Playfair Display;

Heading 1

40px/56px; letter-spg.: 2px;

font-family: Karla;

Heading 2

30px/35px; letter-spg.: -1px;

Heading 3

22px/30px; letter-spg.: -0.5px;

Heading 4

20px/24px; letter-spg.: -0.5px;

Heading 5

18px/26px; letter-spg.: 0px;

Heading 6

16px/16px; letter-spg.: 2.7px;

BODY - DESKTOP

font-family: Karla;

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

16px/24px; letter-spg.: 0px;

BODY - TABLET

font-family: Karla;

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

16px/24px; letter-spg.: 0px;

BODY - MOBILE

font-family: Karla;

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

16px/24px; letter-spg.: 0px;

ICON SET

SOCIAL ICONS

NAVIGATION ICONS

BUTTONS

Primary


‍
Primary Small
Default
Hover
Default
Hover
Dimensions

font-family: Karla;
font-size: 700;
text-transform: uppercase;
14px/14px;
color: #ffffff;
paddings: 22px 38px;
background-color: #fc8e44;
border-color: #fc8e44;
border: 1px solid;
letter-spg.: 1px;

Dimensions

font-family: Karla;
font-size: 700;
text-transform: uppercase;
14px/14px;
color: #fc8e44;
paddings: 22px 38px;
background-color: transparent;
border-color: #fc8e44;
border: 1px solid;
letter-spg.: 1px;

Button Text

font-family: Karla;
font-size: 700;
text-transform: uppercase;
14px/14px;
color: #ffffff;
paddings: 15px 33px;
background-color: #fc8e44;
border-color: #fc8e44;
border: 1px solid;
letter-spg.: 1px;

Donate

font-family: Karla;
font-size: 700;
text-transform: uppercase;
14px/14px;
color: #fc8e44;
paddings: 15px 33px;
background-color: transparent;
border-color: #fc8e44;
border: 1px solid;
letter-spg.: 1px;

Primary Ghost


‍
Hover
Default
Button Text

font-family: Karla;
font-size: 700;
text-transform: uppercase;
14px/14px;
color: #fc8e44;
paddings: 22px 38px;
background-color: #ffffff;
border-color: #eeeeee;
border: 1px solid;
letter-spg.: 1px;

Dimensions

font-family: Karla;
font-size: 700;
text-transform: uppercase;
14px/14px;
color: #ffffff;
paddings: 22px 38px;
background-color: #5e5e5e;
border-color: #5e5e5e;
border: 1px solid;
letter-spg.: 1px;

Secondary

Hover
Default
Button Text

font-family: Karla;
font-size: 700;
14px/14px;
color: #ffffff;
paddings: 22px 38px;
background-color: #5e5e5e;
border-color: #5e5e5e;
border: 1px solid;
letter-spg.: 1px;

Dimensions

font-family: Karla;
font-size: 700;
14px/14px;
color: #ffffff;
paddings: 22px 38px;
background-color: #5e5e5e, 0.5;
border-color: #5e5e5e;
border: 1px solid;
letter-spg.: 1px;

Secondary Ghost

Hover
Default
view detail

font-family: Karla;
font-size: 700;
16px/16px;
color: #222222;
paddings: 14px 38px;
background: transparent;
border-color: #5e5e5e, 0.5;
border: 1px solid;
letter-spg.: 1px;

View Detail

font-family: Karla;
font-size: 700;
16px/16px;
color: #ffffff;
paddings: 14px 38px;
background: #5e5e5e;
border-color: #5e5e5e, 0.5;
border: 1px solid;
letter-spg.: 1px;

Text Button

Hover
Default
view all pastors

font-family: Karla;
font-size: 700;
14px/22px;
color: #fc8e44;
margins: 8px 13px;
background: transparent;
letter-spg.: 1px;

view all pastors

font-family: Karla;
font-size: 700;
14px/22px;
color: #fc8e44;
margins: 8px 13px;
background: transparent;
letter-spg.: 1px;