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!
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
- List Item 1
- List Item 2
- 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
- List Item 1
- List Item 2
- 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.
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
- List Item 1
- List Item 2
- 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
- List Item 1
- List Item 2
- 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.
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:
- Set Icon to a plus
- Set Active Icon to a minus
- Set alignment in the style tab to “after”
Apply class to container: blue_section
Apply class to container: green_section
Toggles
No class needed
Apply class to container: blue_section
Apply class to container: green_section
