Style Guide

Colors Style

Background Color

background-color-primary

#FFF

background-color-secondary

#FFF

background-color-tertiary

#FFF

Text Color

text-color-primary

#000

text-color-secondary

#000

text-color-alternate

#FFFFF9

Typography

Typeface 1

Font Family

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

0123456789 !@#$%^&*()

Heading Tag

H1 tag

Heading 1

H2 tag

Heading 2

H3 tag

Heading 3

H4 tag

Heading 4

H5 tag

Heading 5

H6 tag

Heading 6

Heading Style class

heading-style-large

Heading Large

heading-style-h1

Heading 1

heading-style-h2

Heading 2

heading-style-h3

Heading 3

heading-style-h4

Heading 4

heading-style-h5

Heading 5

heading-style-h6

Heading 6

Body Text

Font size:
Line height:

body-1

Font size:
Line height:

body-2

Font size:
Line height:

body-3

Font size:
Line height:

body-4

Font size:
Line height:

body-5

Text alignment

text-align-left

text-align-left

text-align-center

text-align-center

text-align-right

text-align-right

text-balance

automatically balances the lines of text

Text weights

text-weight-400

text-weight-700

Spacing Style

Global Spacing

container
padding-bottom
padding-top
margin-top
margin-bottom
padding-global
padding-section-large-120

Padding style

padding-vertical
padding-horizontal
padding-4
padding-6
padding-8
padding-10
padding-12
padding-14
padding-16
padding-18
padding-20
padding-24
padding-28
padding-32
padding-36
padding-40
padding-44
padding-48
padding-64
padding-72
padding-80
padding-100
padding-120
padding-140
padding-160

Margin Style

margin-vertical
margin-horizontal
margin-4
margin-6
margin-8
margin-10
margin-12
margin-14
margin-16
margin-18
margin-20
margin-24
margin-28
margin-32
margin-36
margin-40
margin-44
margin-48
margin-64
margin-72
margin-80
margin-100
margin-120
margin-140
margin-160