Typography

Set the “Font Family” inside the Customizer > Typography > Font Manager. Use the HTML for the body font, and the All Headings for the headings font.

Open the child theme CSS file and match up the heading and body font names, then change the font sizes as needed.

Headline Display

Headline H1

Looks H1

Headline H2

Looks H2

Headline H3

Looks H3

Headline H4

Looks H4

Headline H5

Looks H5

Headline H6
Looks H6

Headline Pre Primary

Headline Pre Accent

Paragraph Looks Headline

Body XL

Body L

Body Default (p)

Body S

Body XS

  • This is a list
  • This is a list
  1. This is a list
  2. This is a list

This is a block quote

This is the citation

Colors

Here’s a starting point that uses a primary brand color (1/2), a contrast color (5), text colors (3/4), and background colours (7/8/9).

In general, background colors should be used on 60% of the area, primary colors should be used on 30% of the area, and accent colors should be used on 10% of the area.

Primary 1

Primary 1

Primary 2

Heading Text 3

Body Text 4

Accent 5

Background Dark 6

Background Medium 7

Background Light 8

Background None 9

Buttons

These are set up using Global Styles, though you might want to make a copy in CSS in case you need to match up the theme’s buttons or add a button to the header.

Sections

The Global Styles for sections should be applied to the outer container, with the inner container controlling the max-width.

These Global Styles control the padding in the section and are available in XXL, XL, L, D, M, S, XS.

Section XXS (.38rem / 1.25rem)

Section XS (.75rem / 1.88rem)

Section SM (1.13rem / 2.5rem)

Section MD (1.5rem / 3.75rem)

Section LG (2.25rem / 5rem)

Section XL (3rem / 7.5rem)

Section XXL(4.5rem / 10rem)

Section 3XL (6rem / 12.5rem)

Section 4XL (7.5rem / 15rem)

Section 5XL (9rem / 17.5rem)