landflow

Landing page design styles: 196 directions, and how three get chosen

A design style is the set of decisions behind a page, not its colours. 196 directions, the looks and what each asks of you, and why the plan still shows three.

Landing page design styles: 196 directions, and how three get chosen

A landing page design style is more than a colour scheme: it is the set of decisions that make a page feel like it came from somewhere, from the typeface that carries the headline to how the photographs are graded. We call each of those sets a direction. There are 196 of them in landflow now, each a finished landing page you can start from, and when you describe a page instead, the plan still shows you only three.

A template usually gives you a layout and lets you change the colours. That is why template sites look like template sites: the bones are identical and the paint is different, and people can feel the bones.

We build the other way round. A direction does not only own the layout. It owns the decisions that make a layout feel like it came from somewhere: which typeface carries the headline and at what weight, how far the small capitals are tracked, whether corners exist, how a photograph is graded, and what the single accent is allowed to touch.

One page, three design styles

Take a page for a small hotel. Same sections in the same order, same photographs, three directions:

  • Riviera sets the headline in a high-contrast didone on a plaster ground, grades the photographs warm, and lets a terracotta accent touch exactly two things.
  • Nocturne keeps the structure and moves it to near-black, swaps the accent for brass, and multiplies the photographs down so they read as evening.
  • Modernist drops the serif entirely for a light geometric sans with wide tracking, removes the corner radius, leaves the photographs ungraded, and uses a muted olive once.

None of those is the same page with a new hex code. Each is a different set of decisions about the same material, which is what art direction means.

196 directions, by industry

When we first wrote this there were twenty-six. There are 196 today, filed under eleven industries: 77 for online shops, 26 for events, 19 for software, 17 for creative studios, 12 for travel and stays, 10 each for health and fitness and for professional services, and the rest across food and drink (9), property (8), education (6) and finance (2). All but one carry four colour schemes, each has a font pairing chosen for the face, and each has its own page, with screenshots of every section, in the landing page template library. The industry hubs group them by trade.

Every one of them is also a finished landing page. You can filter by industry, by look and by what the page does (sells products, runs a countdown, shows a pricing table, takes bookings), preview the real page on desktop, tablet and phone, and start from it. It opens in the editor with its layout, photos and sample text, and costs no credits. Tick one box and the AI rewrites the sample text for your business while keeping the design, for about 20.

The looks, and what each one asks of you

A look is a shorthand for a family of decisions, and most directions carry several. Across the library, 148 are light, 117 photo-led, 108 set in a serif, 91 editorial, 49 bold, 48 dark, 40 minimal, 37 luxury and 18 playful. What matters when you choose is less the label than what it asks of your material:

  • Photo-led styles need photographs good enough to carry the page. Estate Agency, dark and photo-led, asks for twenty.
  • Dark styles do some of the work photographs would otherwise do, which is why they suit a page short of images. Raw Monospace is dark, pairs Anton with IBM Plex Mono, and asks for four.
  • Minimal and luxury styles depend on restraint in the copy as much as the layout. Maison Monochrome pairs Bodoni Moda with Jost over twelve sections and seven photographs.
  • Bold styles carry a claim in the type. Gym sets Anton over Barlow in a poster layout, ten sections and eight photographs, with a pricing table.
  • Playful styles suit products bought for or by children and for fun. Family Toy Shop uses Baloo 2 and Nunito across ten sections and twenty-one photographs.

If you are unsure, read the photograph count first. A style that wants more images than you have will look unfinished, whatever its look is called.

How three get chosen out of 196

When you write a brief instead, the model reads it for industry, register and audience, then scores the directions against them. A private hotel and a payroll product do not get the same shortlist, and a waitlist page for a tasting room does not get the same shortlist as either. A brief that says what is offered, to whom and what counts as a win gives it far more to score against, as we found in four thousand briefs.

The plan shows you three, because three is the number people can compare. 196 is a menu, and a menu is a way of making someone else do your job. If none of the three is right you can let the AI choose from all of them while it draws, browse the whole library yourself, or ask it to design from scratch with no direction at all.

Switching without redrawing

Because a scheme is a set of tokens rather than a layout, changing it costs nothing. The markup does not move. Your edits survive. Your copy survives. In the editor, Colours and type swaps the scheme and every section repaints; a whole new look is one restyle, a flat 20 credits. The page you spent twenty minutes on does not have to be regenerated to be seen in another register, which means trying one is cheap enough to actually do.

That is the whole argument for keeping presentation and structure apart, and it is worth the discipline it costs us on every new section we build. It is also why the structure can stay strict, with one goal and one form on every page, while the style is free to change.