Style Guide 2.0

Use this page to get the right styles

Fonts

Default fonts:

This is how fonts will appear by default. If you’re creating a section that uses a white or grey background, no action is needed. Simply set your HTML tag and that’s it!

Headings

Body Text

H1

H2

H3

H4

H5
H5

Body Copy: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

UL

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

OL

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

H1

H2

H3

H4

H5
H5

Body Copy: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

UL

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

OL

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

Font colour variations:

Fonts need to have different colours when on a green or blue background. In order to do that, apply the classes listed below to the section or column that you have the colour applied to.

Apply class to container: blue_section

H1

H2

H3

H4

H5
H5

Body Copy: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

UL

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

OL

  1. List Item 1
  2. List Item 2
  3. List Item 3
Apply class to container: green_section

H1

H2

H3

H4

H5
H5

Body Copy: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

UL

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

OL

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

Colours

Background Colours

We want the site to look as consistent as possible, for background colours please use the approved colours listed below.

Primary background colours

Use these whenever possible

Use global colour:
FB – Teal

  • #3db792
  • hsl(162,50%,48%)
  • rgb(61,183,146)

Use global colour:
FB – White

  • #ffffff
  • hsl(0,0%,100%)
  • rgb(255,255,255)

Use global colour:
FB – Grey

  • #eaeae8
  • hsl(60,5%,91%)
  • rgb(234,234,232)

Use global colour:
FB – Dark Blue

  • #07485b
  • hsl(194,86%,19%)
  • rgb(7,72,91)

Secondary background colours

Use these when you need a little extra flexibility in the design

Use global colour:
FB – Mid Blue

  • #0d6986
  • hsl(194,82%,29%)
  • rgb(13,105,134)

Use global colour:
FB – Green

  • #1c745e
  • hsl(165,61%,28%)
  • rgb(28,116,94)

Use global colour:
FB – Dark Green

  • #182e28
  • hsl(164,31%,14%)
  • rgb(24,46,40)

Buttons

How to use buttons

There are different button styles for different kinds of buttons. Primary buttons should only be used when directing users to the pickup or donate pages. Secondary buttons are used to direct people to other pages on the site. Tertiary buttons are for when you want to direct people away from the page if they want to learn more but don’t have it, such as directing them to a blog post for more information. 

Primary button
Use class: primary_button
Seconday Button
*no class needed
Tertiary Button
Use class: tertiary_button

Button Colour options

Buttons need to have different colours when on a green or blue background. In order to do that, apply the classes listed below to the section or column that you have the colour applied to.

Apply class to container: blue_section

Apply class to container: green_section

Toggles

How to use Toggles

Toggles have been mostly set up to look the way they do below by default however there are some things that you’ll need to set eveytime:

Things to do:

  1. Set Icon to a plus
  2. Set Active Icon to a minus
  3. Set alignment in the style tab to “after”

No class needed

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Apply class to container: blue_section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Apply class to container: green_section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Toggles

No class needed

$ 0 %
Cool Number

Apply class to container: blue_section

$ 0 %
Cool Number

Apply class to container: green_section

$ 0 %
Cool Number