I Need Help Now
Help for you or someone important to you
More
Digital Style Guide: Mental Health Foundation
Branding
Logo
Logo Reverse
FaviconBrand Colours
Brand
Primary
#7A55AF
#7A55AF
Primary 2
#412D5A
#412D5A
Secondary
#00B0CA
#00B0CA
Secondary 2
#40CBDC
#40CBDC
Tertiary
#2B2B30
#2B2B30
Tertiary 2
#D3D4D9
#D3D4D9
Alternative 1
#9B9FA8
#9B9FA8
Alternative 2
#9273BE
#9273BE
Support 1
#F7F7F7
#F7F7F7
Support 2
#BBA4DC
#BBA4DC
Support 3
#D8E9FF
#D8E9FF
Support 4
#DBEBC7
#DBEBC7
Sub-Brands
Education
#EC8A89
#EC8A89
Workplaces
#00A7CE
#00A7CE
Fundraising
#522499
#522499
Suicide Prevention
#70E0CE
#70E0CE
Adapted Colours
Active
Primary
Brand Primary
Brand Primary
Primary Over
Darken (Primary, 5%)
Darken (Primary, 5%)
Secondary
Brand Secondary
Brand Secondary
Secondary Over
Darken (Secondary, 5%)
Darken (Secondary, 5%)
Text
Text
Brand Tertiary
Brand Tertiary
Text Light
Lighten (Text, 40%)
Lighten (Text, 40%)
Text Dark
Darken (Text, 5%)
Darken (Text, 5%)
Backgrounds & Other
BG
Brand Support 1
Brand Support 1
BG Dark
Darken (BG, 10%)
Darken (BG, 10%)
Border
Brand Tertiary 2
Brand Tertiary 2
Border Dark
Darken (Border, 10%)
Darken (Border, 10%)
BG Default
Brand Support 1
Brand Support 1
BG Purple
Brand Support 2
Brand Support 2
BG Blue
Brand Support 3
Brand Support 3
BG Green
Brand Support 4
Brand Support 4
Colour Bar
The Colour Bar is created by starting with Brand Primary, followed by each Sub-Brand colour.
Typography
Font Body: HK Nova, Century Gothic, Verdana, sans-serif;
color: $col-text; font-weight: 400; line-height: 1.8em; margin-bottom: 1em;
Font Headings: Asap, Calibri, Tahoma, sans-serif;
color: $col-text-dark; font-weight: 600; line-height: 1.5em; margin-bottom: 1em;
Heading 1
font-family: $font-headings; font-size: 58px; font-style: italic;
Heading 2
font-family: $font-headings; font-size: 50px; font-style: italic;
Heading 3
font-family: $font-body; font-size: 30px;
Heading 4
font-family: $font-body; font-size: 22px; font-weight: 500;
Heading 5
font-family: $font-body; font-size: 20px; font-weight: 400;
Heading 6
font-family: $font-body; font-size: 13px; font-weight: 300;
Body Copy. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
font-family: $font-body; font-size: 17px;
Icons
