Style Guide

Colors

Primary

Almond

#DDDAD7

Turquoise

#66D7D1

Flax

#E5D282

Coral

#E86140

Plum

#756999

Charcoal

#2D4052

Light

Almond

#F5F4F1

Turquoise

#A8E6E4

Flax

#F0E3AC

Coral

FF7B59

Plum

#9083b2

Charcoal

3F576E

Dark

Almond

#C4BFBB

Turquoise

#4DA39F

Flax

#AB9D61

Coral

#AD4930

Plum

#564f78

Charcoal

#22303D

Typography

Heading 1 - 65px // 36px

This is a header

Heading 2 - 46px // 28px

This is a header

Heading 3 - 32px // 20px

This is a header

Heading 4 - 22px // 16px

This is a header

Heading 5 - 20px // 18px

This is a header

Subtitle - 22px // 14px

This is a subtitle

Paragraph Normal - 18px // 16px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

Paragraph Small - 15px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

text link - 15px

Link Style →

text bold - 18px

Bold - Lorem ipsum dolor sit amet

text italic - 18px

Italic - Lorem ipsum dolor sit amet

Bullet list

  • Lorem ipsum dolor sit amet consectetur.
  • Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales.
  • Sapien in tempus lectus lorem quis est.

numbered list

  1. Lorem ipsum dolor sit amet consectetur.
  2. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales.
  3. Sapien in tempus lectus lorem quis est.

Structure

Container 1200px

Centered Container 850px max width

2-col-grid

3-col-grid

4-col-grid

Global Classes

light-text

dark-text

Margin Classes

margin-bottom-10 (10px)

margin-bottom-20 (20px)

margin-bottom-30 (30px)

margin-bottom-40 (40px)

margin-bottom (default 50px)

margin-bottom-80 (80px)

margin-bottom-100 (100px)

margin-bottom-120 (120px)

margin-top-10 (10px)

margin-top-20 (20px)

margin-top-30 (30px)

margin-top-40 (40px)

margin-top (default 50px)

margin-top-80 (80px)

margin-top-100 (100px)

margin-top-120 (120px)

Max Width Classes

max-width-tiny (300px)

max-width-small (400px)

max-width-medium (500px)

max-width (default 600px)

max-width-large (800px)

max-width-XL (900px)

max-width-XXL (1000px)

Text Alignment Classes

text-left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

text-center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

text-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

text-justify

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

Mobile Screen Size Classes

mobile-text-left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

mobile-text-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

tablet-left-align (??)

tablet-centered  (??)

mobile-landscape-left-align  (??)

mobile-landscape-centered  (??)

mobile-centered  (??)

hidden (hides stuff)  (??)

Buttons

Primary

Button

Secondary (??)

Button

Tertiary (??)

Button

Other