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.

You can change font sizes in the CSS child theme as needed.

Lookalike Fonts

Global styles are added for the lookalike fonts so you can change the heading font size but keep the same page seo structure.

⚠️ If you change the clamp functions in your stylesheet, you need to change the global style lookalike fonts

Headline XL

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

Body XL

Body L

Body Default (Gutenberg)

Body Default (GenerateBlocks)

Body S

Body XS

Paragraph Looks Headline

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

This is a block quote

Colors

Here’s a starting point that uses the default GeneratePress naming convention:

  • accent (brand colors)
  • base colors (background colors)
  • contrast colors (text/border colors)

Base colors should be used on 60% of the area.

Accent colors should be used on 30% of the area.

Contrast colors should be used on 10% of the area.

accent

accent-2

accent-3

accent-4

base

base-2

base-3

base-4

contrast

contrast-2

contrast-3

contrast-4

Buttons

These are set up in the Global Styles.

On light theme, button hover colors go from dark to light

On dark them they go from light to dark.

Primary Contrast Primary Alt Primary Outline Primary Ghost
Primary On Dark Primary Alt on Dark Primary outline on Dark Primary Ghost on Dark

Sections & Containers

You need 2 containers to add elements to a page or post:

  • outer container: will have no styling on it
  • innner container
    • global max width
    • padding on all sides
    • Left & Right auto margin to center everything

There are two Global Styles for this.

  • gbp-padding-xs to gbp-padding-xl for outer container
  • gpb-width-d, gpb-width-m, gpb-width-s, gpb-width-xs for inner container

Padding global styles

The gpb-padding-xs to gpb-padding-xl global style adjusts padding on all 4 sides with the clamp() function.

The LR is the same for all sizes, but the top and bottom padding changes every size.

Width Global Styles

The gpb-width-xs to gpb-width-d global style adds auto to margin LR & sets the global max width

⚠️ You need to adjust max width manually in the gbp-width-default global style in the inner container if you change the container width in customizer.

Padding XS (Top & Bottom: 1rem, Left & Right: 1.5rem)

Padding S (Top & Bottom: 1.5rem, Left & Right: 1.5rem)

Padding M (Top & Bottom: 2.5rem, Left & Right: 1.5rem)

Padding D (Top & Bottom: 5rem, Left & Right: 1.5rem)

Padding L (Top & Bottom: 7.5rem, Left & Right: 1.5rem)

Padding XL (Top & Bottom: 10rem, Left & Right: 1.5rem)

Padding XXL (Top & Bottom: 12.5rem, Left & Right: 1.5rem)

Width Default (width 1280px/margin LR auto)

Width Medium (width 64rem, margin LR auto)

Width Small (width 48rem/margin LR auto)

Width XS (40rem/margin LR auto)