# Brand Your HubSpot Theme: Settings Sheet (any theme)

**What this is:** a fill-in sheet for putting your brand into your HubSpot theme *before* you ask AI to build pages with it. It works with any theme, free or from the marketplace.

**Why it matters:** AI builds HubSpot pages from your theme's modules, and those modules take their colors and fonts from **theme settings**. Your brand kit doesn't change them. If your theme is still on its defaults, every page comes out in the theme's default colors, however good your prompt is.

**Where the settings live:** Content → Themes → *your theme* → **Edit theme settings**. When you're done, click **Publish**, not just Save.

**Time it takes:** 10 to 20 minutes, once.

---

## How to use this with Claude

Every theme names its settings differently ("Primary color", "Base color 1", "Accent 3"…). Claude can do the mapping for you:

1. Open your theme settings and take screenshots of each panel (colors, fonts, buttons, forms), or copy the setting names.
2. Give Claude this sheet, your screenshots, and your brand colors and fonts (or your brand guidelines).
3. Paste the prompt at the [end of this sheet](#prompt).
4. Claude fills in the table below **using your theme's own setting names**, checks the colors are readable, and gives you the list in the order you'll click through.
5. You enter the values in HubSpot and click **Publish**.

---

## Step 1: Find the settings that control everything

Most well-built themes build almost every color from a small set of **global** or **base** settings. Find these first; they do most of the work.

| What to look for | Usually called | What it controls | Your theme's setting | Your brand |
|---|---|---|---|---|
| Text color | Primary, Base color, Text, Dark | Body text, headings, form labels | | |
| Page background | Background, Base color, Light, White | Main page and section background | | |
| Alternate background | Accent, Light section, Secondary background | Tinted sections, cards, forms | | |
| Dark background | Dark, Accent, Footer | Footer and dark sections | | |
| Button / link color | CTA, Primary button, Accent, Link | The color you want people to click | | |
| Button / link hover | Hover, CTA hover | What buttons and links turn on hover | | |
| Highlight | Secondary, Tertiary, Accent | Icons, badges, small highlights | | |

**A good sign:** when you change one of these, many parts of the page change with it. That's a theme built to carry your brand everywhere.

---

## Step 2: Fonts

| What to look for | Usually called | Your theme's setting | Your brand |
|---|---|---|---|
| Heading font | Heading, Primary, Display, H1–H6 | | |
| Body font | Body, Base, Paragraph, Secondary | | |

**Watch for:**
- **Names that don't mean what they say.** In some themes "Primary" font is the *heading* font and "Secondary" is the *body*. Check which text each one changes.
- **No single heading switch.** Some themes make you set H1, H2, H3 and so on one at a time.
- **Weights by name.** HubSpot shows weights as names: Regular 400 · Medium 500 · Semi-bold 600 · Bold 700 · Extra-bold 800.

---

## Step 3: Buttons and forms

| Setting | Check | Your brand |
|---|---|---|
| Primary button: fill, text, hover | Text is readable on the fill; hover is a slightly darker fill | |
| Secondary button: border, text, hover | Usually an outline: border and text the same color | |
| Button shape | Pill, rounded or square | |
| Form fields: border, background, placeholder | Field edges visible (at least 3:1 against the background); placeholder readable | |
| Form submit button | Matches your primary button | |

**Watch for:** fields that only appear for some styles. If a button has no fill, you won't see a fill-color setting; if its border is 0, you won't see a border-color setting.

---

## Step 4: Hunt the leftovers

These are the settings that **ignore your global colors** and keep the theme's original palette. After steps 1 to 3, build one test page and look for any color that isn't yours. The usual hiding places:

- [ ] Button **hover** states (all button types)
- [ ] Tags and badges
- [ ] Form field borders and placeholder text
- [ ] Card borders, and dark card styles
- [ ] Caption or small-label text colors
- [ ] Quote / blockquote backgrounds
- [ ] Section background presets (light, dark, alternate)

**Tip:** in a free theme, expect to find more of these. HubSpot's Elevate theme has around 20 settings with its own purple and blue built in. A well-built marketplace theme may have one or two.

---

## Step 5: Logo, header and footer (global content)

These aren't theme settings. They're edited once in the editor (click the header or footer → **Edit global content**) and apply to every page.

- [ ] Logo in the header and footer (and its size)
- [ ] Footer copyright line, links and social icons. Remove the theme's demo links.
- [ ] Check the logo isn't set as a heading (H1), which can give a page two H1s

---

## Prompt

```
Here's my brand: [paste your colors with hex codes, your fonts, and a line on how
each color is used, or attach your brand guidelines].

Here are screenshots (or a list) of my HubSpot theme's settings: [attach].

Using the attached "Brand Your HubSpot Theme" sheet:
1. Fill in the "Your theme's setting" and "Your brand" columns for steps 1 to 3,
   using my theme's exact setting names. If a setting isn't in my theme, say so.
2. Explain in one line why each of my colors goes in each setting.
3. Check readability for every text-on-background pair (at least 4.5:1, and 3:1
   for form field borders) and suggest fixes for any that fall short.
4. Suggest a hover color (a slightly darker version of my button color) if I
   don't have one.
5. From my screenshots, list any settings that look like step 4 "leftovers"
   (colors that won't follow my global colors).
6. Give me the final list in the order I'll click through my theme settings.
```

---

## Check when you're done
- [ ] Clicked **Publish** on the theme settings
- [ ] Hovered over every button on a test page. No leftover colors?
- [ ] Looked at a form, a dark section and a card
- [ ] *Then* asked AI to build your page, with: **"Use only this theme's modules and theme settings. Don't set custom colors or write custom code."**

*Fill the bread once. Run it as many times as you want.*