Colors

Primary Colors

Cream-Primary

#fff5cf

Green-Primary

#1a3c34

Red-Primary

#a12b2a

Secondary Colors

Cream-Secondary

#f1e4b2

Green-Secondary

#1a5632

Red-Secondary

#ea0029

Neutral Colors

White

#ffffff

Black

#000000

Grey

#949494

Typography

This is heading text

Heading 1 - 5rem - Number Two

This is heading text

Heading 2 - 2.75rem - Catalogue

This is heading text

Heading 3 - 2.25rem - Catalogue

This is heading text

Heading 4 - 1.5rem - catalogue

This is heading text

Heading 5 - 1rem - Catalogue

This is heading text

Heading 6 - 0.8rem - catalogue

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 - 0.8rem - Akkurat Mono

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 - 1rem - Akkurat Mono

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 - 1.5rem - Akkurat Mono

Link - Lorem ipsum dolor sit amet

text link - 1rem - Akkurat Mono

Bold - Lorem ipsum dolor sit amet

text bold - 1rem - Akkurat Mono

Italic - Lorem ipsum dolor sit amet

text italic - 1rem - akkurat mono

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 - 1.2rem - Catalogue

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

Bullet list - 1rem - Akkurat mono

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

numbered list - 1rem - akkurat mono

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 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.