Website Theme & Style Guide

Colour Palette

ACCENTS

#1
ACCENT 1 PRIMARY
Buttons, links
#XXX

#2
ACCENT 2 ALT
Button Hover
#XXX

#10
OPTIONAL COMPLEMENT
ACCENT 3 or BLACK
#XXX

CONTRAST

Swatch #3
STRONGEST TEXT
Dark Gray
Default/Body Text
eg #333333

#4
STRONG TEXT
Medium Gray
Heading Text
eg #666666

#5
MEDIUM TEXT
Light Gray
Lighter Text
#CCCCCC

#6
LIGHT TEXT
Lighter Gray
Light Background
#EFEFEF

BASE

Swatch #7
BRAND GOLD
Secondary Buttons
#E0CEA8
Same as Illustrator

Swatch #8
BACKGROUND 4
Overlays
10% White

Swatch #9
PAPER
Page Background
White

OTHER

#11
SUCCESS
#XXX

#12
INFO
#XXX

#13
ALERT
#XXX

#14
WARNING
#XXX

#15
RATING
#XXX

15 colour variables available in WordPress theme default panel

Colour Palette

ACCENTS

#1
ACCENT 1 PRIMARY
Buttons, links
#XXX

#2
ACCENT 2 ALT
Button Hover
#XXX

#10
OPTIONAL COMPLEMENT
ACCENT 3 or BLACK
#XXX

CONTRAST

#4
STRONGEST TEXT
Dark Gray
Default/Body Text
eg #333333

#5
STRONG TEXT
Medium Gray
Heading Text
eg #666666

#6
MEDIUM TEXT
Light Gray
Lighter Text
#CCCCCC

#7
LIGHT TEXT
Lighter Gray
Light Background
#EFEFEF

BASE

#8
SUBTLE BACKGROUND
Lighter Gray
Light Background
#EFEFEF

#9
LIGHTER BACKGROUND
Lightest Gray
Lighter Background
#F9F9F9

#10
PAPER
White
Page Background
#FFFFFF

NOTICES

#11
SUCCESS
#XXX

#12
INFO
#XXX

#13
ALERT
#XXX

#14
WARNING
#XXX

#15
RATING
#XXX

15 colour variables available in WordPress theme default panel

Typography &
Font Pairing

Heading + Titles: FONT NAME HERE
Weight: Bold, except where indicated
Base colour: see Heading Text [Color Variable 4]

Base Font: FONT NAME HERE
Font size: 1 rem
Line height: 150%
Font weight: 400 (normal)
Base colour: see Dark Text [Color Variable 3]

Lead Text: Base font with Medium size applied. Max 20px = 1.25rem

Small Font: Base font with Small size applied. Max 14px

Base Button Secondary Button
Ghost Button

H1 Heading H1 Heading H1 Heading H1 Heading

H2 Heading H2 Heading H2 Heading H2 Heading H2 Heading

H3 Heading H3 Heading H3 Heading H3 Heading H3 Heading H3 Heading H3 Heading H3 Heading

H4 Heading H4 Heading H4 Heading H4 Heading H4 Heading H4 Heading H4 Heading

H5 Heading H5 Heading H5 Heading H5 Heading H5 Heading H5 Heading H5 Heading H5 Heading H5 Heading H5 Heading
H6 Heading H6 Heading H6 Heading H6 Heading H6 Heading H6 Heading H6 Heading

Here is a paragraph of text. This is a link. Here is a paragraph of text. Here is a paragraph of text. Here is a paragraph of text. This is a link.