Table of content
01. Colour palette
Available in Divi as global colours.
#000000
Black
Headings and body text
#ffffff
White
Alternative background
#f7f5f1
Natural
Main background
#ebebe9
Grey light
Alternative background
#cddf74
Green light
Buttons (black border)
#437637
Green dark
Buttons, headings, links
#cf202f
Red dark
Errors
#971b5e
Purple dark
Keyboard outline
Colour contrast ratio table
|
Background
Text
|
#000000
|
#FFFFFF
|
#F7F5F1
|
#EBEBE9
|
#CDDF74
|
#437637
|
#CF202F
|
#971B5E
|
#666666
|
|---|---|---|---|---|---|---|---|---|---|
|
Black
#000000
|
Text
AAA
21
|
Text
AAA
19.2
|
Text
AAA
17.5
|
Text
AAA
14.4
|
|||||
|
White
#FFFFFF
|
Text
AAA
21
|
Text
AA
5.4
|
Text
AA
5.3
|
Text
AAA
7.9
|
Text
AA
5.7
|
||||
|
Background
#F7F5F1
|
Text
AAA
19.2
|
Text
AA
4.9
|
Text
AA
4.9
|
Text
AAA
7.3
|
Text
AA
5.2
|
||||
|
Background2
#EBEBE9
|
Text
AAA
17.5
|
Text
AA
4.5
|
Text
AA
4.5
|
Text
AA
6.6
|
Text
AA
4.8
|
||||
|
Green light
#CDDF74
|
Text
AAA
14.4
|
Text
AA
5.4
|
|||||||
|
Green dark
#437637
|
Text
AA
5.4
|
Text
AA
4.9
|
Text
AA
4.5
|
||||||
|
Red dark
#CF202F
|
Text
AA
5.3
|
Text
AA
4.9
|
Text
AA
4.5
|
||||||
|
Purple dark
#971B5E
|
Text
AAA
7.9
|
Text
AAA
7.3
|
Text
AA
6.6
|
Text
AA
5.4
|
|||||
|
Grey dark
#666666
|
Text
AA
5.7
|
Text
AA
5.2
|
Text
AA
4.8
|
||||||
|
AAA Pass, AAA (7+)
AA Pass, AA (4.5+)
AA18 Pass, Large Text Only (3+)
DNP Does Not Pass
|
|||||||||
02. Visuals
Logos, graphics
03. Text styles
Styles are defined in child theme stylesheet
H1-H2 headings font
Amatic SC (free Google font)
ABCDEFGHIJKLMNOPQRSTUVXYZ
abcdefghijklmnopqrstuvxyz
1234567890
H3-H4 heading and body font
Roboto (free Google font)
ABCDEFGHIJKLMNOPQRSTUVXYZ
abcdefghijklmnopqrstuvxyz
1234567890
Heading 1
Heading 1
Colour: white
Weight: 700
Desktop font size: 80px (5rem)
Desktop letter spacing: 1
Mobile font size: 48px (3rem)
Mobile letter spacing: 1
Text shadow (except on Membership pages)
Heading 2
Heading 2
Colour: Green dark
Weight: 700
Desktop font size: 48px (3rem)
Desktop letter spacing: 3.5px
Mobile font size: ?
Mobile letter spacing: ?
Heading 3
Toggle titles (h2)
Heading 3 + Toggle titles (h2)
Colour: Green dark
Weight: 700
Desktop font size: 24px (1.5rem)
Desktop letter spacing: 0
Mobile font size: ?
Mobile letter spacing: ?
Card Heading 2
Card heading 3
Blog grid
Card Heading 2 + Card Heading 3 + Blog grid
Colour: Green dark
Weight: 700
Desktop font size: 32px (2rem)
Desktop letter spacing: 1px
Mobile font size: ?
Mobile letter spacing: ?
Heading 4
Footer Heading
Heading 4 + Footer Heading
Font: Roboto Medium
Colour: Black
Weight: 500
Desktop: 16px (1rem)
Mobile:
Body
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.
Colour: Black
Desktop/Mobile: 16px (1rem)
Font: Roboto Regular (weight 400)
Link
Porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Lorem ipsum
List
- Vivamus magna justo
- Lacinia eget consectetur sed
- Convallis at tellus
- Cras ultricies ligula sed magna dictum porta
- (Un)ordered list line height: 1.7em
All in one
Heading 1
Cotton candy bear claw oat cake chocolate bar pie. Powder candy jelly chupa chups sesame snaps.
Heading 2
Chupa chups bonbon sugar plum macaroon bonbon sweet dragée. Lemon drops lemon drops brownie bear claw jelly-o cupcake candy pie. Muffin sweet roll pudding muffin jelly jujubes dessert powder.
Heading 3
Lollipop cake cupcake liquorice pudding ice cream bonbon tootsie roll. Pastry ice cream cake marzipan tart tootsie roll wafer shortbread lollipop.
Heading 3
Lollipop cake cupcake liquorice pudding ice cream bonbon tootsie roll. Pastry ice cream cake marzipan tart tootsie roll wafer shortbread lollipop.
Heading 4
Cake liquorice lemon drops liquorice sesame snaps bonbon topping marshmallow powder.
Heading 4
Cake liquorice lemon drops liquorice sesame snaps bonbon topping marshmallow powder.
Heading 4
Cake liquorice lemon drops liquorice sesame snaps bonbon topping marshmallow powder.
Pellentesque in ipsum id orci porta dapibus.
- Vivamus magna justo
05. Focus indicator
A.k.a. keyboard outline.
1 pixel offset to avoid contrast issues with dark green and black.
3 pixels wide, dark purple colour, dotted style.
Focused link
Focused button
Focused field
06. Cards
Heading: underline on hover
Image: overlay + icon on hover (remove from tab key order with jQuery)
07. Forms
Thin black rounded border around fields.
Button styled like other buttons.
Placeholder text with 0.8 opacity.
Email list signup form