Source: https://octet-prow.app/guides/keep-landing-pages-on-brand

# How to keep every landing page on brand: colours, type and spacing

By the Octet Prow team Updated Oct 12, 2026 · 4 min read
Short answer
Write your brand’s visual rules down once (colours with their roles, two typefaces with a size scale, a spacing scale, and corner and shadow styles) and build every page from those rules instead of from the last page you made. Then check each new page against the list before it goes live. Pages drift off brand when the rules live only in someone’s head or in an old file.

## Why landing pages drift off brand

Landing pages are made quickly, by different people, for one campaign at a time. Each one starts from whatever is nearest: last month’s page, a template from the page builder, a screenshot someone liked. A few pages later the blue is slightly different, the headings use a third typeface and every section has its own padding.
None of these changes is a decision. They happen because nobody wrote down what the brand looks like in terms a page can be built from. A logo file and a mood board are not enough: they say how the brand feels, not which colour a button is or how far apart two sections sit.

## What to fix first: the five things visitors notice

Visitors do not compare hex codes, but they notice when a page feels like it comes from a different company. These are the parts that make that impression, roughly in order of how much they matter:

| Element | What to decide |
| --- | --- |
| Colour | One main brand colour, one or two accents, the background and text colours, and which colour is used for buttons and links. |
| Typefaces | One typeface for headings and one for body text, with the weights you use. More than two usually looks accidental. |
| Type sizes | A fixed set of sizes for headings, body text and small print, so the hierarchy looks the same on every page. |
| Spacing | A small scale of spacing values used for gaps inside components and between sections. |
| Shape and depth | Corner radius, borders and shadows. Sharp corners with hard shadows and round corners with soft shadows read as two different brands. |

## How to write the rules down so pages can follow them

- Give every colour a role, not just a value. “Primary button”, “page background”, “muted text” are rules; a palette of six swatches is not.
- Name the typefaces and the fallback. Include the weights and say which one is for headings.
- List the type sizes as a scale. For example, small, body, subheading, heading and display, each with a size and line height.
- List the spacing values as a scale. Use the same few values everywhere, and say which one separates sections.
- Describe corners, borders and shadows with values, and say which components use them.
- Add a few sentences on tone. Whether the brand is calm or loud, dense or airy, and what it never does (for example, no gradients or no stock-photo people).
Written this way, the rules become a small design system for landing pages: short enough to read before starting a page, specific enough to follow without guessing.

## What stays fixed and what each page can change

Keeping pages on brand does not mean making them identical. A sale page, a product page and an article-style advertorial need different layouts. The split that works:

| Stays the same on every page | Can change from page to page |
| --- | --- |
| Colours and their roles | Layout and section order |
| Typefaces and the type scale | Imagery and illustration |
| Spacing scale | How dense or open a page is |
| Corner, border and shadow style | Length and format of the copy |

If a page needs a layout you have never used, take the layout from a reference and keep your own colours and type. A reference screenshot is useful for structure, but copying its palette is how pages drift.

## How to check a page before it goes live

- Every colour on the page appears in your list, and buttons use the button colour.
- Only your two typefaces are used, at sizes from your scale.
- Sections are separated by the same spacing value throughout.
- Corners, borders and shadows match the style you wrote down.
- The page looks like your other pages when you open them side by side, on a phone as well as a desktop.
Example · Quillfern A product page built from one written design system: six colours, each with a set role, and two typefaces, a serif and a sans-serif. See the brief and structure →

## What to do when the brand itself changes

Brands change: a new accent colour, a new typeface, a softer look. Update the written rules first and give the change a version or a date, so you know which pages were built under the old rules. Then decide whether live pages should be rebuilt or left until their campaign ends. Pages that run for months are worth updating; a sale that ends next week usually is not.
Generate one with AI
Octet Prow creates a design system for your project from your brand description (colours, type, spacing, corners and depth), and every page in the project is generated from it.
AI campaign landing page generator →
Questions

## Frequently asked questions

How do I make a landing page match my brand colours and fonts?
Start from a written list of your colours with their roles and your two typefaces with a size scale, and build the page from that list rather than from an earlier page or a template. Check the finished page against the list before publishing.
Do I need a full brand guidelines document?
No. For landing pages, one page of rules is usually enough: colours and their roles, typefaces and sizes, spacing, corners and shadows, and a few sentences on tone. Long brand books tend to go unread when a page has to ship today.
Can every landing page look different and still be on brand?
Yes. Layout, imagery and copy format can change with each page. What should not change is the palette, the typefaces, the spacing scale and the shape style, because those are what make pages recognisable as one brand.

## Related guides

What a design system is for landing pages, and when you need one → What a design system for landing pages contains, how it differs from a brand kit, when it is worth making one and how to keep it up to date. How to build a landing page from a reference screenshot → Use a screenshot of a page you admire as a reference: what to take from it, what to leave, and how to keep the result in your own brand.
YOUR NEXT PAGE

## What story will your next product page tell?

Start with a clear idea. Turn it into a page you can publish.
Start creating