Style guide

Website

colors
txt-deep-red
#ce0e2d
txt-deep-blue
#003c5b
txt-dark-gray
#242833
txt-default-gray
#849cb5
txt-default-gray-dark
#657b92
txt-dim-gray
#595e64
txt-muted-blue
#f5f8fb
txt-muted-blue-dark
#eef3f8
txt-light-gray
#dce5ee
txt-brand-red
#aa182c
headings

Heading Fonts: Raleway Extrabold

Heading 1 (txt-h1)

Heading 2 (txt-h2)

Heading 3 (txt-h3)

Heading 4 (txt-h4)

Heading 5 (txt-h5)
text blocks

Subtitle and intro Fonts: Roboto light

Default Font: Roboto regular

This is some text inside of a div block. (txt-intro)
This is some text inside of a div block. (txt-intro--regular)
This is some text inside of a div block. (txt-subtitle)
This is some text inside of a div block. (txt-lg)
This is some text inside of a div block. (txt-md)
This is some text inside of a div block. (txt-sm)
This is some text inside of a div block. (txt-xs)
Text without margin. (txt-no-margin)
COMPLIMENTARY TEXT STYLES

Highlight and Quotes Font: Raleway Extralight

Lorem Ipsum (txt-nav)
Lorem ipsum (txt-nav--secondary)
Lorem ipsum (txt-nav--secondary-active)
Lorem ipsum (txt-nav--secondary-not-selected)
100% (txt-highlight)
lorem ipsum (txt-quote)
Text Link
Learn More

Heading 4 (txt-section-title)

Get In touch

Provide

txt-center
txt-right
txt-center-md (align center on screens below 991px)
txt-center-sm (align center on screens below 767px)
buttons

Heading Fonts: Raleway Bold

btn-mdbtn-md--fillbtn-md-with-iconbtn-smbtn-lg-fill
secondary Navigation

Know more about us

main call to action
Be a part of the story & see lives changed
Give
cta-bg
footer
Margin & Paddings
py-64 (initial padding top and bottom: 64px)
px-36 (initial padding left and right: 36px)
px-32 (initial padding left and right: 36px)
py-60 (initial padding top and bottom: 60px)
py-40 (initial padding top and bottom: 40px)
pt-24 (initial padding top: 24px)
pt-26 (initial padding top: 16px)
pb-24 (initial padding bottom: 24px)
pb-32 (initial padding bottom: 32px)
pt-32 (initial padding top: 32px)
pb-40 (initial padding bottom: 40px)
pt-40 (initial padding top: 40px)
pt-60 (initial padding top: 60px)
pb-60 (initial padding bottom: 60px)
pb-16 (initial padding bottom: 16px)
pb-8 (initial padding bottom: 8px)
mb-8 (initial margin bottom: 8px)
mb-16 (initial margin bottom: 16px)
mt-16 (initial margin top: 16px)
mt-32 (initial margin top: 32px)
mb-20 (initial margin bottom: 20px)
mb-24 (initial margin bottom: 24px)
mb-40 (initial margin bottom: 40px)
mb-52 (initial margin bottom: 52px)
mb-64 (initial margin bottom: 64px)
mt-52 (initial margin top: 52px)
mt-64 (initial margin top: 64px)
my-52 (initial margin: 52px)
my-64 (initial margin: 64px)
m-64 (initial margin: 64px)
m-40 (initial margin: 40px)
mt-40 (initial margin top: 40px)
mt-0 (initial margin top: 0px)
my-0 (initial margin top and bottom: 0px)
pl-8 (initial padding-left: 8px)
pl-16 (initial padding-left: 16px)
Containers
full-width-container (90% width)
default-width-container (max-width: 1220px)

small-width-container (max-width: 860px)

align
align center (align-center)