WOOF Fonts + Colours
For external designers:
- Update fonts and colours // add more as needed
- Use module settings to:
- Update font sizing // if required, add sizing for mobile vs desktop // add elements as needed
- Update button colours // add more variations as needed
Fonts + Colours
- Primary font: Source Sans Pro (for body copy, buttons, menus,...)
- Secondary font: Angkor (for heading 1 & 2)
- Text dark: #464646
- Text light: #ffffff
- Button primary orange: #f9a61a
- Button secondary mid grey: #8e8e8e
- Button hover dark grey: #636466
- Bg light grey: #f5f5f5
- Bg dark grey: #3f3f3f
Fonts on mobile - base font size: 16px
Body copy - 16px or 1rem, regular
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Large body copy - 20px or 1.25rem, semi-bold
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Tagline / subtitle (not a heading) - 20px or 1.25rem, semi-bold, uppercase
Heading 1 - 34px or 2.125rem, bold
Heading 2 - 28px or 1.75rem, bold
Heading 3 - 24px or 1.5rem, bold
Heading 4 - 20px or 1.25rem, bold
Heading 5 - 18px or 1.125rem, bold
Heading 6 - 16px or 1rem, bold
Fonts on desktop - base font size: 18px
Body copy - 18px or 1rem, regular
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Body copy - 22.5px or 1.25rem, semi-bold
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Tagline / subtitle (not a heading) - 22.5px or 1.25rem, semi-bold, uppercase