Typography

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

Match the heading and body font names in the child theme CSS file, then change the font sizes as needed,

Titles

Looks -XL – HEADING – Vivamus integer

H1 – Vivamus integer non suscipit taciti mus

Looks H1 – Vivamus integer non suscipit taciti mus

H2 – Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit euismod libero facilisi aptent

Looks H2 – Vivamus integer non suscipit taciti mus

H3 – Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit euismod libero facilisi aptent

Looks H3 – Vivamus integer non suscipit taciti mus

H4 – Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit euismod libero facilisi aptent

Body Text

XL – Mollis pretium lorem primis senectus habitasse lectus scelerisque donec ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque consectetur mi risus molestie curae malesuada. Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes mollis taciti phasellus accumsan bibendum semper blandit faucibus.

L – Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit euismod libero facilisi aptent elementum felis blandit cursus gravida sociis erat ante eleifend lectus nullam dapibus netus feugiat curae curabitur est ad. Massa curae fringilla consectetur porttitor quam sollicitudin iaculis aptent ligula euismod penatibus mauris eros praesent.

D – Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit euismod libero facilisi aptent elementum felis blandit cursus gravida sociis erat ante eleifend lectus nullam dapibus netus feugiat curae curabitur est ad. Massa curae fringilla consectetur porttitor quam sollicitudin iaculis aptent ligula euismod penatibus mauris eros praesent.

S – Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit euismod libero facilisi aptent elementum felis blandit cursus gravida sociis erat ante eleifend lectus nullam dapibus netus feugiat curae curabitur est ad. Massa curae fringilla consectetur porttitor quam sollicitudin iaculis aptent ligula euismod penatibus mauris eros praesent.

XS – Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit euismod libero facilisi aptent elementum felis blandit cursus gravida sociis erat ante eleifend lectus nullam dapibus netus feugiat curae curabitur est ad. Massa curae fringilla consectetur porttitor quam sollicitudin iaculis aptent ligula euismod penatibus mauris eros praesent.

Colors

This is a starting point that uses primary brand colors, a contrast color and surface colors.

In general, surface colors are used on 60% of the area, primary colors on 30%, and contrast colors on 10%.

Primary

Primary Alt

Contrast

Contrast Alt

Surface-0

Surface-10

Surface-20

Surface-30

Surface-70

Surface-80

Surface-90

Surface-100

Buttons

These are set up using Global Styles. If you want to make a copy in CSS you can match up the theme’s buttons or add a button to the header.

Primary Contrast Primary Alt Primary Outline

Text Button

Primary Primary Alt Primary Outline

Text Button

Sections & Containers

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-XS (1rem / 1.5rem)

Section-S (1.5rem / 1.5rem)

Section-M (2.5rem / 1.5rem)

Section-D (5rem / 1.5rem)

Section-L (7.5rem / 1.5rem)

Section-XL (10rem / 1.5rem)