Skip to content
Genesis Help

Theme colors & typography

The Theme Colors button in the toolbar opens your site’s design system: the palette and typography that every section draws from. Change a theme color once and it updates everywhere it’s used.

Colors

Section titled “Colors”
  • Your site’s palette is listed as named colors with swatches.
  • Click any swatch to open a color picker (or type a hex value).
  • Add custom colors for the AI and style panel to use; delete ones you added.

Because sections reference theme colors rather than hard-coded values, retuning your palette here restyles the whole site coherently — no hunting through pages.

Typography

Section titled “Typography”
  • Font family — pick from Google Fonts.
  • Heading styles (H1–H6) — size, weight, line height, letter spacing per level.
  • Body text — size, weight, line height.

Theme + AI

Section titled “Theme + AI”

The theme is also what keeps AI generations consistent: new sections the AI builds use your theme tokens, so they match automatically. Two more places that feed it:

  • Visual style guide (Settings → Genesis) — your written design notes get baked into the theme on save.
  • Chat — “make the whole site feel warmer, cream background with forest green accents” updates the theme too. Use the Theme Colors panel when you want precise control, chat when you want direction.