Typography

H1

Open Sans

80px

Main Header

H2

Open Sans (font-weight: 600)

24px

Heading

H3

Open Sans Regular

20px

Sub Header

H4

Open Sans (font-weight: 600)

18px

Links or highlighted text
H5
Open Sans Semibold
18px
Links or highlighted text

P1

Open Sans Regular

18px

Body Text

$global-font: "opensans"

$global-font-size: "18px"

$global-lineheight: "28px"


Standard body text - 18px Open Sans
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Strong text.

Colours

Colour Value Variable Description
#bdd22f $green Primary colour
fcba00 $orange Primary colour
#754b72 $purple Secondary colour
#1aa7e2 $blue Primary colour
#26619a $navy Secondary colour
#ffffff $white Used for background and text on colour background
#727173 $mid-grey Used for text and some backgrounds
#ebebeb $light-grey Used for subtle background

Buttons

Default

Hover

Selected


Details

Dropdowns

Links

Default Hover
Default link Default link
Big Link Big Link
Bigger Link Bigger Link

Tabs

Pagination

Previous Post Lorem Ipsum dolor Electronic Register
< Next Post Lorem Ipsum dolor Electronic Register

Lists

  • Item a
  • Item b
  • Item c
  1. Item 1
  2. Item 2
  3. Item 3

Forms