Colour Palette
#1
ACCENT 1 PRIMARY
Default Accent
Buttons, links
#221143
#2
ACCENT 1 HOVER
Hover or Bright
Call to action buttons
#A5893F
REGISTER
Full Black
Darkest Text
#000000
#3
TEXT 1
Dark Gray
Default/Body Text
#333333
#4
BACKGROUND 1
Light Background
50% of Accent 1
#2C1953
#5
BACKGROUND 2
Brighter Accent
25% of Accent 1
#2C1953
#6
BACKGROUND 3
Lighter Accent
10% of Accent 1
#2C1953
#7
BACKGROUND 4
Lighter Gray
Light Background
#EFEFEF
#8
BACKGROUND 3
Lightest Gray
Lighter Background
#F9F9F9
#9
PAPER
White
Page Background
#FFFFFF
9 colour variables available in WordPress theme default panel
More swatches available at page level, managed in right sidebar
Typography &
Font Pairing
Variable Font Size Chart
H1 | 3XL | 3 rem | 48px |
H2 | 2XL | 2.5 rem | 40px |
H3 | XL | 2 rem | 32px |
H4 | LG | 1.75 rem | 28px |
H5 | MD | 1.5 rem | 24px |
H6 | SM | 1.25 rem | 20px |
Body | 1 rem | 16px |
Base Font: FONT NAME HERE
Font size: 1 rem
Line height: 150%
Font weight: 400 (normal)
Base colour: see Default Text [Color Variable 3]
Heading + Titles: FONT NAME HERE
Weight: Bold, except where indicated
Base colour: see Heading Text [Color Variable 4]
Set heading font in Heading Font Family, Page Title, Buttons and Navigation
Page Title: 3rem / 100%
300 LIGHT UPPERCASE letterspacing 2px
The title style above is used in the Page Header with an H1 tag. It has its own style that is different from regular H1 headings in the body (such as the example below). This is a paragraph using the Base Font styles. This is a link. This is a paragraph.
H1 Heading 3 rem / 115%
Heading Goes Here
H2 Heading 2.5 rem / 125%
Heading Goes Here
H3 Heading 2 rem / 125%
Heading Goes Here
H4 Heading 1.75 rem / 135%
Heading Goes Here
H5 Heading 1.5 rem / 135%
Heading Goes Here
H6 Heading 1.25 rem / 135%
Heading Goes Here
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.