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.
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.