Rebrand a whole site from theme settings

Written by Erin Wiggers | Sep 8, 2026, 9:00:00 AM

Most sites drift off brand one page at a time. Someone picks a slightly different blue for a button, someone else pastes in a heading font from another tab, and a year later nobody can say what the brand colours are. Geekify stops that at the source: colours and fonts live in theme settings, and every module reads them from there.

This post walks through a full rebrand on a fresh Geekify site, in the order we do it ourselves.

Start with three colours

Open Design Manager, select the theme and choose Theme settings. Under Global colors you will find primary, secondary and tertiary. Set these three first. Buttons, links, card accents, form focus states and the background presets are all built from them, so most of the site changes the moment you save.

The neutrals (dark, light, surface, muted and slate) are there for text and backgrounds. Leave them alone on a first pass. Change them only if your brand has its own greys.

Then two fonts

Global fonts holds a primary and a secondary font. Headings use one, body copy the other, and the Typography group sets sizes and line heights for each heading level. If your brand uses a single family, set it in both slots.

Check the background presets

Background presets 1 to 5 are the gradients, patterns and glass styles that sections can paint themselves with. They are generated from your colours, so they usually look right straight away. Open a page that uses a dark preset and check the text is easy to read. If it is not, adjust the preset rather than the page.

What not to do

Do not fix a colour on one page by editing that page's module styles. It works today, and it stops that module following the next rebrand. If something looks wrong on every page, the fix belongs in theme settings. If it looks wrong on one page only, the page editor is the right place.

What to check afterwards

  • A page with each button style: primary, secondary and the light and dark variants.
  • A form, with one field in focus.
  • A dark section and a light one, for contrast.
  • The header and footer, which have their own colour settings.

That is the whole rebrand. On this demo it took one sitting, and no page needed editing by hand.