Style Guide

This style guide page contains styles and components that are to be used throughout a website. You can find out more about having a style guide here.

Typography

The different text sizes used throughout the site.

h1-A-800-left

This is a Header.

h1-A-800-center

This is a Header.

h1-A-700-left

This is a Header.

h1-A-600-left

This is a Header.

h1-800-left

This is a Header.

h1-800-left

This is a Header.

h1-700-left

This is a Header.

h1-600-left

This is a Header.

h2-800-left

This is a Header.

h2-800-center

This is a Header.

h2-700-left

This is a Header.

h2-600-left

This is a Header.

h3-800-left

This is a Header.

h3-800-center

This is a Header.

h3-700-left

This is a Header.

h3-600-left

This is a Header.

h4-800-left

This is a Header.

h4-800-center

This is a Header.

h4-700-left

This is a Header.

h4-600-left

This is a Header.

h5-800-left

This is a Header

h5-800-center

This is a Header

h5-700-left

This is a Header

h5-600-left

This is a Header
b1-20px-30px-inter

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

b2-18px-28px-inter

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

b3-16px-20px-inter

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

b4-14px-20px-inter

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

b4-12px-18px-inter

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
List
  • Heading line height is fixed
  • All buttons now have tooltips
  • Spell checker number issue fixed
Figure with caption
Example Image
An image with caption

Rich Text

Formatted rich text element used for long sections of text such as blog posts.

This is a Header.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Latest updates

  • Heading line height is fixed
  • All buttons now have tooltips
  • Spell checker number issue fixed

More about me

Example Image
An image with caption

Colors

The different weights of greys and colours used throughout the website.

Primary colours

Purple 100
#EFE6FF
Purple 200
#D8C3FA
Purple 300
#AD7FF5
Purple 400
#843DF5
Purple 500
#5C16CC
Purple 600
#320972
Blue 100
#E0ECFF
Blue 200
#BAD6FF
Blue 300
#75ACFF
Blue 400
#3E8BFF
Blue 500
#0E54BD
Blue 600
#032C6B
Green 100
#DCF2EF
Green 200
#B7EDE3
Green 300
#71D9C6
Green 400
#33C0A7
Green 500
#129981
Green 600
#129981
Red 100
#FFEBEB
Red 200
#FAC5C5
Red 300
#F58E8E
Red 400
#F45757
Red 500
#C82727
Red 600
#761414
Pink 100
#FFE8FE
Pink 200
#FBCAF9
Pink 300
#f097ec
Pink 400
#F05DEA
Pink 500
#B614AF
Pink 600
#800B7B

Greys/ Typograpghy

Contrast-4/Headings
#0f0f0f
Contrast-3
#1F1F1F
Contrast-2/Body
#2e2e2e
Contrast-1
#3D3D3D
Mid-3
#707070
Mid-2
#7F7F7F
Mid-1
#8F8F8F

Logos

The different weights of greys and colours used throughout the website.

Buttons

The different types of buttons used throughout the website.

Tags, Switches and Toggles

The different types of buttons used throughout the website.

Labels

Label
Label
See all
Label

Layout

Different grid layouts to use across your site

Spacers

Spacer elements using the 8-pt system to give sections more room to breathe.

16 px

24 px
32 px
48 PX
64 PX
80 PX
96 PX
128 PX

Text Boxes

Boxes for text elements throughout the website, e.g for a section header.

400px

500px
600px
700px
800px

Icons

Icons used across the website taken from the Prosphor Icon Pack.

Forms

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Thank you! Your message has been received!
Oops! Something went wrong. Please fill in the required fields and try again.

Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Footers

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.