The font sizes are set in the customizer, with GenerateBlock Global Styles set up for the “Looks Hx” elements – this is to allow you to assign a different headline style to a headline element so that headline hierarchy can be respected.

Headline XXL

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 S

Headline PRE

Body XXL

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

This is the citation


Colors are fickle. Here’s a starting point that uses a primary brand color, a contrast color, plus surface colors.

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

Primary Alt
Contrast Alt


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 & Containers

Due to some quirks in the way GP + GB interact, sections need to be crafted in a specific way to maintain consistency throughout the site.

If you want your content “contained” (as opposed to full-width), the padding needs to go on the “Inner-Container”.

For consistency, use one of the “Global Styles” set up for Sections.

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)


Modals are done with some custom CSS and JS. It uses a specific GB layout. The master copy is saved in Local Patterns.

The custom code is located inside Code Snippets and can be deactivated if a modal is not being used.

Modal Trigger