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
- This is a list
- 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.
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)