Framer

Why it works

Generous breathing room paired with interactive product demonstrations means visitors experience the tool responsiveness directly rather than reading about it. The minimal type hierarchy makes navigation frictionless while carefully orchestrated motion maintains visual interest without distraction.

Who should look at this

Founders building design-forward SaaS who need to demonstrate product capability through the website itself, not just screenshots.

Signature technique

Custom fonts loaded across multiple weights and styles, paired with abundant negative space so typography becomes the primary visual anchor — every element earns its place.

How the page is built

1. Navigation bar. Seven short links sit in the centre, with 'Log in' as plain text and 'Sign up' as the only white pill, which pops against the black.
2. Headline hero. A very large two-line headline, a short explanation and two pill buttons, 'Start for free' and 'Start with AI', let visitors choose how to begin, with a small note above naming the latest feature and when it launched.
3. Wall of real sites. A grid of screenshots of finished sites in wildly different styles shows the range of what can be made, and fades to black at the bottom.
4. Customer logo rows. Two rows of recognisable brands under the wall, including Cal.com, Miro and DoorDash, add credibility.
5. Design with an agent. Explains that an AI assistant works directly on the page, with every change visible and editable, and shows a picture of that in action.
6. CMS and code with an agent. Two further blocks, one for managing content and one for adding custom effects, each follow the same pattern of a heading, a short paragraph and a 'Start with agents' button.
7. Connect to any agent. Lists everyday places you can trigger changes from, such as Slack, a terminal or a code review, so it feels like part of an existing routine.

Look and feel

Solid black with an enormous white headline in tightly packed bold type, so the page itself acts as a dark frame. All the colour comes from the wall of example sites, which clash happily in orange, blue, yellow and purple, so the visitor sees range before reading a word.

Where it might not fit

A loud wall of different sites only works if what you have made is impressive, and a thin portfolio would look empty or messy here. The black gallery look also suits a visual showcase better than a page for a service business that has to build trust through words.

What to borrow

• Keep the page itself black or neutral and let a wall of your best work provide the colour, so the examples do the selling.
• Add a small dated line above the headline naming your latest update, so visitors can tell someone is still looking after the product.
• Place two pill buttons side by side with different jobs, one to start free and one to start with AI, so visitors choose how they want to begin.

Brief your developer

“I want a black homepage with an enormous white headline and two pill buttons side by side, then a wall of screenshots of our best work in many different styles that fades to black at the bottom, with rows of client logos underneath.”

Want a full version for your own site? Get the brief.

Is a black website background a good choice for showing off visual work?

Framer's first screen is solid black, which makes the colourful sites in its example wall stand out. The page stays neutral so the work supplies all the colour. The same choice would make a page of plain text feel heavy, so it suits a visual showcase better than a page that relies on explanations.

How can a homepage show that a product is still being worked on?

Framer puts a small line above its headline naming its latest feature and when it launched. It is tiny, but it tells a visitor that someone is looking after the product. A studio or freelancer can borrow this with a 'latest project' line or the month of the last update.