Website style guide

Site dimensions

The current site is 1180px wide – the columns and gutters are percentages and flexible.

 

Site  colours

 

2

Font

#141827

2

Primary

#fe336a

2

Secondary

#00e195

2

Tertiary

#fee54f

2

Background

#fafbfd

2

Meta

#767676

2

Borders etc.

#eeeeee

Fonts

 

6This covers the general rule for the site, there are some size variations around the site – for example the H1 in the homepage hero section.

Font is Rubik for all text

For headings the following styles are common to all

padding-bottom: 20px;
line-height: 1.2em;
 font-weight: 500;

Heading 1

Font-size 36px; 

Heading 2

Font-size 30px; 

Heading 3

Font-size 26px

Heading 4

Font-size 20px

Heading 5

Font-size 18px

Body
Font-size 16px ; font-weight 300; line-height 1.8em

Meta and footer
font-size 14px; font-weight 300; line-height 1.4em

Paragraph

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.

Bold emphasis


List types

 

Definition list

Definition List Title
This is a definition list division.

Ordered list

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

Forms

Form Element

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.

 Radio 1

 Radio 2

 Radio 3

 Radio 1

 Radio 2

 Radio 3

 


Tables

TABLE HEADER 1TABLE HEADER 2TABLE HEADER 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3