Source: https://octet-prow.app/guides/landing-page-from-reference-screenshot

# How to build a landing page from a reference screenshot

By the Octet Prow team Updated Oct 12, 2026 · 3 min read
Short answer
Treat a reference screenshot as a brief for layout and feel, not as a page to copy. Note what you like about it (the order of sections, the spacing, the treatment of borders, shadows and images), then rebuild those ideas with your own words, images and brand colours and fonts.

## Why start from a reference

Describing a look in words is hard. “Clean, editorial, a bit premium” means something different to every designer. A screenshot settles the question in seconds: everyone can point at the same thing and say “like this”.
A reference is most useful when you already know what the page has to say and only need help with how it should look. If the content is still unclear, sort that out first; a borrowed layout will not fix a page that does not know its message.

## What to take from the screenshot

Look at the screenshot as a set of design decisions, not as a picture. Write down the decisions you want to keep:
- Structure. The order of sections and roughly how much space each one gets.
- Density. Generous white space and few elements, or a busy page with lots to scan.
- Surface treatment. Hairline borders or none, soft or hard shadows, sharp or rounded corners.
- Image style. Full-bleed photography, product cut-outs, illustrations or no images at all.
- Decoration. Dividers, labels, badges, background textures and other small details that set the tone.
Colours and fonts are a separate question. If you have a brand, they should come from your brand, not from the screenshot (see the section on keeping it yours below).

## Where a reference ends and copying begins

Layouts and visual styles are shared freely across the web: nobody owns “a large photo on the left, text on the right”. The words, images and brand marks on someone else’s page are a different matter.

| Fine to take | Do not take |
| --- | --- |
| The order and rhythm of sections | Their headlines, body copy or slogans |
| Spacing, borders, shadows and corners | Their photos, illustrations or icons |
| The general type of image they use | Their logo, product names or trademarks |
| The idea of a comparison table or a testimonial strip | Their reviews, quotes, figures or claims |

A good test: if someone who knows the original saw your page, they might think “similar style”, but they should never think it is the same company.

## How to build the page, step by step

- Write the content first. Headline, sections and the main action, in your own words.
- Pick one or two references. More than that and the page ends up as a mix of styles that do not fit together.
- List the decisions you are borrowing, using the categories above.
- Apply your own colours and fonts to those decisions.
- Use your own images, or images you have the right to use.
- Compare the result side by side with the reference. Check that the feel carried over and that none of their content did.

## Keeping the result in your brand

The risk with references is that every new page looks like a different company. The fix is to separate the two layers: let the reference shape the layout and surface details of one page, and let your brand decide the colours and type on every page.
If you do not have written brand rules yet, see what a design system is for landing pages and how to keep every landing page on brand.
Example · Quillfern A product page built in one brand’s own colours and fonts. A reference screenshot can change its layout and details without changing those. See the brief and structure →
Generate one with AI
In Octet Prow you can attach up to four reference images when you create a page. Layout, spacing and details follow the images; colours and fonts stay in your project’s design system.
AI campaign landing page generator →
Questions

## Frequently asked questions

Is it legal to use another website as a design reference?
Taking inspiration from a layout or visual style is common practice. Copying someone else’s text, images, logos or trademarks is not, and can infringe their rights. If you are unsure about a specific case, ask a lawyer.
Should I use a competitor’s page as my reference?
It is usually better to look outside your category. A page from a different industry gives you fresh ideas, and your result is less likely to be confused with a direct competitor.
How many reference screenshots should I use?
One or two is usually enough. With more, the styles start to pull in different directions and the page loses a clear look.

## Related guides

How to keep every landing page on brand: colours, type and spacing → How to make every landing page match your brand’s colours, fonts and spacing: what to fix first, what to write down, and how to check a page before launch. 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.
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