Table of content
01. Colour palette
Available in Divi as global colours.
#e82a00
Red
Buttons
#f4df3e
Gold
Decoration
#181310
Smoky Black
Headings
#545B63
Grey
Body text
#05299E
Blue
Links
#eaeaf1
Light Grey
Alternative background
#ffffff
White
Background
#021827
Rich black
Headings
Alternative background
Colour contrast ratio table
|
Background
Text
|
#CC2500
|
#F4DF3E
|
#181310
|
#021827
|
#545B63
|
#05299E
|
#EAEAF1
|
#FFFFFF
|
#000000
|
|---|---|---|---|---|---|---|---|---|---|
|
Red
#CC2500
|
Text
AA18
4
|
Text
AA18
3.3
|
Text
AA18
3.3
|
Text
AA
4.5
|
Text
AA
5.4
|
Text
AA18
3.8
|
|||
|
Gold
#F4DF3E
|
Text
AA18
4
|
Text
AAA
13.5
|
Text
AAA
13.3
|
Text
AA
5
|
Text
AAA
8.5
|
Text
AAA
15.4
|
|||
|
Smoky black
#181310
|
Text
AA18
3.3
|
Text
AAA
13.5
|
Text
AAA
15.3
|
Text
AAA
18.4
|
|||||
|
Rich black
#021827
|
Text
AA18
3.3
|
Text
AAA
13.3
|
Text
AAA
15
|
Text
AAA
18
|
|||||
|
Dark Grey
#545B63
|
Text
AA
5
|
Text
AA
5.7
|
Text
AA
6.8
|
Text
AA18
3
|
|||||
|
Blue
#05299E
|
Text
AAA
8.5
|
Text
AAA
9.6
|
Text
AAA
11.5
|
||||||
|
Light Grey
#EAEAF1
|
Text
AA
4.5
|
Text
AAA
15.3
|
Text
AAA
15
|
Text
AA
5.7
|
Text
AAA
9.6
|
Text
AAA
17.5
|
|||
|
White
#FFFFFF
|
Text
AA
5.4
|
Text
AAA
18.4
|
Text
AAA
18
|
Text
AA
6.8
|
Text
AAA
11.5
|
Text
AAA
21
|
|||
|
Black
#000000
|
Text
AA18
3.8
|
Text
AAA
15.4
|
Text
AA18
3
|
Text
AAA
17.5
|
Text
AAA
21
|
||||
|
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-H6 headings font
Roboto (free Google font)
ABCDEFGHIJKLMNOPQRSTUVXYZ
abcdefghijklmnopqrstuvxyz
1234567890
Body font
Roboto (free Google font)
ABCDEFGHIJKLMNOPQRSTUVXYZ
abcdefghijklmnopqrstuvxyz
1234567890
Heading 1
Heading 1
- Colour: smoky black
- Weight: 900
- Desktop font size: 64px (4rem)
- Desktop letter spacing: default
- Mobile font size: 40px (2.5rem)
- Mobile letter spacing: default
- Uppercase
- Skewed by -20 deg on X axis
Heading 2
Heading 2
- Colour: smoky black
- Weight: default
- Desktop font size: 48px (3rem)
- Desktop letter spacing: default
- Mobile font size: 32px (2rem)
- Mobile letter spacing: default
- Uppercase
Heading 3
Heading 3
- Colour: smoky black
- Weight: default
- Desktop font size: 32px (2rem)
- Desktop letter spacing: default
- Mobile font size: 24px (1.5rem)
- Mobile letter spacing: default
- Uppercase
Heading 4-6
Blurbs
Heading 4
- Colour: blue
- Weight: 700 (bold)
- Letter spacing: 1px
- Desktop: 18px (1.125rem)
- Mobile: 18px (1.125rem)
- Uppercase
Callout
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: dark grey
- Desktop/Mobile: 18px (1.125rem)
- Line height: 1.8em
- Weight: 500 (medium)
Link
Porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Lorem ipsum
- Colour: blue
- Underline: blue
- Hover effect: increase underline height
List
- Vivamus magna justo
- Lacinia eget consectetur sed
- Convallis at tellus
- Cras ultricies ligula sed magna dictum porta
- (Un)ordered list line height: 1.8em
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
- Lacinia eget consectetur sed
- Convallis at tellus
05. Focus indicator
A.k.a. keyboard outline.
2 pixel offset to avoid contrast issues red buttons
3 pixels wide, red, solid style.
Focused link
Focused button
Focused field
06. Blurbs
07. Forms
Thin black rounded border around fields.
Button styled like other buttons.
Placeholder text with 0.8 opacity.
Contact form