Style Guide
Colors
Primary Colors
Primary 1
#DCF3E4
Primary 2
#BBE7C9
Primary 3
#C5B9AC
Secondary Colors
Secondary 1
#000000
Secondary 2
#FFFFFF
Secondary 3
#239099
Tertiary Colors
Tertiary 1
#7D9C91
Tertiary 2
#FFFFFF
Tertiary 3
#ffffff
Typography
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
Heading style classes
Apply the following heading styles to default headings or other text to change the size to match a different heading size. For example, you could apply a h3-style class to a default h5 heading to increase the size of that default heading whilst retaining it's status as an H3.
This is useful when trying to retain a heading hierarchy without needing to use a particular heading just because it is the size you need.
h1 style heading
h1 style heading
h1 style heading
Heading 1
clr-sea-green
clr-black
clr-white
h2 style heading
h2 style heading
h2 style heading
Heading 2
clr-sea-green
clr-black
clr-white
h3 style heading
h3 style heading
h3 style heading
Heading 3
h4 style heading
h4 style heading
h4 style heading
Heading 4
clr-sea-green
clr-black
clr-white
h5 style heading
h5 style heading
h5 style heading
Heading 5
clr-sea-green
clr-black
clr-white
h6 style heading
h6 style heading
h6 style heading
Heading 6
clr-sea-green
clr-black
clr-white
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 - 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 normal - 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.
Paragraph normal - 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.
Paragraph large - 22px
Bold - Lorem ipsum dolor sit amet
text bold - 18px
- 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 (Font sizes in brackets aren't part of the class)
no-margin-bottom (gets rid of margin on the bottom of text and elements)
margin-bottom-tiny (10px)
margin-bottom-small (20px)
margin-bottom-small (20px)
margin-bottom-medium (40px)
margin-bottom-ML (50px)
margin-bottom-large (80px)
margin-bottom-XL (100px)
margin-bottom-XXL (120px)
margin-top-tiny (10px)
margin-top-small (20px)
margin-top-small (30px)
margin-top-medium (40px)
margin-top-ML (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-ML (600px)
max-width-large (800px)
max-width-XL (900px)
max-width-XXL (1000px)
Screen Size Classes (Text Align)
hidden (hides stuff)
tablet-centered
mobile-landscape-centered
mobile-centered
tablet-left-align
mobile-landscape-left-align
mobile-left-align
Buttons
Primary -button
Secondary-small