Colors

Primary Colors

Black

#000000

White

#ffffff

Blue

#512db8

Secondary Colors

Dark purple

#291e59

Light purple

#d5c0e9

Red

#eb2c37

Neutral Colors

Neutral 1

#000000

Neutral 2

#000000

Neutral 3

#000000

Typography

This is heading text

Stroke text 1- 72px

This is heading text

Stroke text 2- 56px

This is heading text

Heading 1 - 72px

This is heading text

Heading 2 - 56px

This is heading text

Heading 3 - 40px

This is heading text

Heading 4 - 32px

This is heading text

Heading 5 - 24px

This is heading text

Heading 6 - 20px

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 - 14px

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 normal - 20px

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 large - 22px

Link - Lorem ipsum dolor sit amet

text link - 16px

Bold - Lorem ipsum dolor sit amet

text bold - 18px

Italic - Lorem ipsum dolor sit amet

text italic - 18px

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

block quote

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

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

Structure

Container 1200px

Centered Container 850px max width

2-col-grid

3-col-grid

4-col-grid

Global Classes

These are global classes that be added to any element. The values can be changed to suit your project. Feel free to add your own and expand what already exists e.g padding top, padding bottom etc.

light-text

Margin Classes

margin-bottom-tiny (10px)

margin-bottom-small (20px)

margin-bottom-medium (40px)

margin-bottom (default 50px)

margin-bottom-large (80px)

margin-bottom-XL (100px)

margin-bottom-XXL (120px)

margin-top-tiny (10px)

margin-top-small (20px)

margin-top-medium (40px)

margin-top (default 50px)

margin-top-large (80px)

margin-top-XL (100px)

margin-top-XXL (120px)

Max Width Classes

max-width-tiny (300px)

max-width-small (400px)

max-width-medium (500px)

max-width-default (default 600px)

max-width-large (800px)

max-width-XL (900px)

max-width-XXL (1000px)

Screen Size Classes

hidden (hides stuff)

tablet-centered

mobile-landscape-centered

mobile-centered

tablet-left-align

mobile-landscape-left-align

mobile-left-align

Icons

Forms

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.