Brand Kit Worksheet for Theming HighLevel

Theming goes faster when every decision is made before you open an editor. This worksheet lists what to gather and what to decide. Copy it into a document, fill in each blank, and keep it with your brand files so the next theme, or the next person on your team, starts from the same answers.

1. Logo files

A platform uses your logo in more places and sizes than a website does. Collect these first:

• Horizontal logo: [file name]. For headers and the sign-in page. SVG if you have it, otherwise a transparent PNG at least twice the size it will display.

• Square mark or icon: [file name]. For collapsed sidebars, app icons and other small spaces.

• Light version: [file name]. A white or light logo for dark backgrounds.

• Dark version: [file name]. A dark logo for light backgrounds.

• Favicon: [file name]. A simple mark that is still recognizable at 16 and 32 pixels. Test it at that size, because fine detail disappears.

• Clear space rule: [for example, a margin of at least a quarter of the mark's width on every side].

Check every file on both a white and a black background. A transparent PNG with a dark logo disappears on a dark sidebar.

2. Colors

Write down exact hex values, not "our blue".

• Primary brand color: #[______]. Main buttons and the active menu item.

• Accent color (optional): #[______]. Highlights only. One accent is usually enough.

• Light theme background: #[______]

• Dark theme background: #[______]

• Card or panel color: #[______]. Usually a shade off the background.

• Main text: #[______]

• Secondary text: #[______]. Labels, hints and timestamps.

• Borders and dividers: #[______]

• Status colors: success, warning and error already mean something to users. Write down the ones you will keep, and keep them recognizable.

3. Light or dark

• Default theme: [light / dark]

• Reason: [for example, it matches our website, or our clients work in the platform all day]

• Logo version for this theme: [light file / dark file]

• Offer the other one too? [yes / no]

A light theme is familiar to most client teams and is the easier one to keep readable. A dark theme can suit brands whose website is already dark. Whichever you choose, test it on the busiest screens, such as contacts, conversations and the pipeline, not only the dashboard.

4. Fonts

• Heading font: [name]. Available as a web font? [yes / no]

• Body font: [name]. Check it at 13 to 14 pixels, because tables and forms use small text.

• Fallback: [for example, the system sans-serif]

• License: [confirm the font license allows web use on your platform domain]

Thin or tightly spaced display fonts look good in a headline and tire people out in a contact table. If your brand font is decorative, use it for headings and pick a plain, readable font for body text.

5. Contrast checks

Run each pair through a contrast checker and write down the ratio. WCAG asks for at least 4.5:1 for normal text, and 3:1 for large text and for interface parts such as input borders and icons.

• Main text on the light background: [ratio]

• Main text on the dark background: [ratio]

• Secondary text on its background: [ratio]

• Main text on the card color: [ratio]

• Button label on the primary color: [ratio]

• Menu text on the sidebar color, normal and active: [ratio] / [ratio]

• Links on the page background: [ratio]

If the label on your primary color fails, try black text instead of white, or use a deeper shade of the color for buttons only.

6. Naming and menu

• Platform name clients will see: [name]

• Menu items to rename: [current name] to [new name]

• Menu items clients do not need: [list]

• Support contact shown in the app: [email address or link]

7. Sign-off

• Approved by: [name] on [date]

• Files stored at: [folder link]

• Next review: [date, or "when the brand changes"]

Once this sheet is complete, the theme itself is mostly data entry. In Theme Studio you can start from one of 20 ready-made themes or describe your brand to Brand AI, then set the values from this worksheet.