To begin, navigate to your page editor and select Edit > Theme. This opens the Global Theme Styles panel for the Generator theme. Once loaded, select Colors from the top navigation to enter the color settings.
Generator uses four foundational colors that cascade through your entire theme:
Primary Color — Used by font styles and the Primary Button. Set this to a dark color for contrast and readability.
Secondary Color — Typically set to a light color to complement the Primary.
Highlight Color — Controls the background of the Highlight Button and any elements you want to visually pop. Choose a color that draws attention without clashing with Primary and Secondary.
Body Background Color — Sets the background color of all pages. For a dark theme, set this to a dark color and adjust your other colors accordingly.
When you first load Generator, these four colors are automatically pulled in from your HubSpot Brand Kit. If you've already configured your Brand Kit colors, they will appear here without any manual setup.
You are not limited to Brand Kit colors — you can override any of these values at the theme level to match your specific design needs.
The color system is designed so elements work harmoniously out of the box. For example, the Highlight Button's background color automatically inherits from the Highlight Color setting. You can override this at the component level, but using the theme-level color ensures consistent styling across your site.