Style guide

Colors

#000000
#ffffff
#f3f3f3
#767676
#b8b6b6
#df1b82 to #ff7529
#009bdf to #72bf44

Typography

Display text

Heading Level One

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading Level Two

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading Level Three

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading Level Four

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading Level Five

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading Level Six

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

  1. Duis cursus
  2. Mi quis viverra ornare
  3. eros dolor interdum nulla

Ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-small: This is some text inside of a div block.

Spacers

top and bottom margins

margin top-bottom 4px / 0.25rem
margin top-bottom 8px / 0.5rem
margin top-bottom 12px / 0.75rem
margin top-bottom 16px / 1rem
margin top-bottom 24px / 1.5rem
margin top-bottom 32px / 2rem
margin top-bottom 40px / 2.5rem
margin top-bottom 64px / 4rem
margin top-bottom 96px / 6rem
margin top-bottom 120px / 7.5rem

top margin only

margin top only 4px / 0.25rem
margin top only 8px / 0.5rem
margin top only 12px / 0.75rem
margin top only 14px / 0.875rem
margin top only 16px / 1rem
margin top only 20px / 1.25rem
margin top only 24px / 1.5rem
margin top only 32px / 2rem
margin top only 40px / 2.5rem
margin top only 48px / 3rem
margin top only 56px / 3.5rem
margin top only 96px / 6rem
margin top only 120px / 7.5rem

bottom margin only

margin bottom only 4px / 0.25rem
margin bottom only 8px / 0.5rem
margin bottom only 12px / 0.75rem
margin bottom only 14px / 0.875rem
margin bottom only 16px / 1rem
margin bottom only 20px / 1.25rem
margin bottom only 24px / 1.5rem
margin bottom only 32px / 2rem
margin bottom only 40px / 2.5rem
margin bottom only 48px / 3rem
margin bottom only 56px / 3.5rem
margin bottom only 96px / 6rem
margin bottom only 120px / 7.5rem

margin - all around

margin 24px / 1.5rem
margin 32px / 2rem
margin 48px / 3rem
margin 96px / 6rem

padding - all around

padding 24px / 1.5rem
padding 32px / 2rem
padding 48px / 3rem
padding 96px / 6rem
padding 4%

Borders

border-solid: solid 1px #767676

container-text: 900px max width w/ 3% padding

container-small: 840 max width

container-medium: 1240 max width

container-large: 1440px max width

border-radius: 2px

Button Text