Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is the body copy. Here is an example of a link.

This is a blockquote.

Add citation
Contact Form Demo

Contrast

Contrast-2

Contrast-3

Base

Base-2

Base-3

Accent

Primary Button Secondary Button

preheading

pillheading

Typography

Set the “Font Family” inside the Customizer > Typography > Font Manager. Adjust the Body and Headings font settings according to the style guide. Any changes applied here won’t affect the rest of the site.

Heading font: IBM Plex Serif

Body font: IBM Plex Sans

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a paragraph.

preheading

pillheading

This is a blockquote.

Add citation

Colors

Contrast

Contrast-2

Contrast-3

Base

Base-2

Base-3

Accent

Buttons

These are setup using Global Styles. You may 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.

Primary Button Secondary Button

Forms

Form settings are controlled using WPForms plugin.

Contact Form Demo

Sections & Containers

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

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

Section XS (1rem / 1.5rem)

Section S (1.5rem / 1.5rem)

Section M (2.5rem / 1.5rem)

Section L (5rem / 1.5rem)

Section XL (10rem / 1.5rem)

Default Container Width (1280px)

var(–width-m) – 75% (960px)

var(–width-s) – 50% (640px)

var(–width-xs) – 25% (320px)