Web Design Trends for 2027: What Is Here to Stay

Every year brings a wave of trend lists, most of them written from mood boards rather than from live sites. I prefer to look at what real companies and real designers are shipping. The gallery holds fifty live websites captured in November 2026, and when you look at them side by side, some patterns repeat often enough to call them trends.

This guide describes those patterns, explains why I think most of them will last through 2027, and points out a few that are already fading. It is written as a snapshot, so I will update it as the gallery changes.

How to read a trend

A trend is worth adopting when it solves a problem your visitors have. Big type is easier to read on a phone. A product screenshot answers “what does this do?” faster than an illustration. An interactive calculator gives an answer before asking for an email address. Those trends last because the reasons behind them do not go away.

Other trends are mostly about looking current. They spread quickly because they are easy to copy, and they date quickly for the same reason. The test I use is simple: if the trend disappeared from your site tomorrow, would visitors lose anything except novelty?

1. The product is the hero

The clearest pattern in the SaaS gallery is that software companies have stopped illustrating their products and started showing them. Linear puts a real slice of its interface under the headline. Figma stacks overlapping design files beside it. Notion crops its screenshot so tightly that it reads like a document.

The same idea appears outside software. iA Writer’s page behaves like the product, with a live writing area set in the app’s own typeface. This one will last, because it answers the visitor’s first question better than any abstract graphic.

2. Type that fills the screen

Large, expressive type is everywhere in the gallery, especially in portfolios. Mat Voyce fills the screen with his name in a huge condensed cyan face. Clément Grellier runs his name across the full width as one word. Gumroad sets “Go from 0 to $1” at 96 pixels.

Part of the reason is technical. Variable fonts, which pack many weights and widths into a single file, let designers use expressive type without loading a pile of separate font files. Part of it is practical: a big headline still reads on a phone when everything else has to shrink. Expect this to continue, with the usual caveat that big type needs short words.

3. Editorial serifs come back

For years, almost every website used the same clean sans serif. The gallery shows serifs creeping back, and not only on magazines. HubSpot sets its headline in a serif, which makes a CRM feel warmer. Passenger pairs a serif headline with a sans for its outdoor clothing. Scandinavian MIND and The New Yorker use serifs to slow the reader down in a good way.

This is part of a broader return of editorial design, where websites borrow the confidence of print: clear lead stories, generous margins and type with character. I think it will grow, because it is a way for brands to look less like a template.

4. Warm backgrounds instead of pure white

A quieter trend, but a consistent one: pure white backgrounds are giving way to off-white, cream and warm grey. Gumroad, Miro, Eduard Bodak and Zoho Mail’s landing page all use warm off-whites. Allbirds uses a warm grey. Vessel Magazine goes all the way to peach.

The appeal is easy to see. A warm background is softer on the eye than bright white and immediately makes a site feel less clinical. It costs nothing, and it is likely to stay.

5. First screens you can use

Several pages in the gallery let you do something before they ask you for anything. Airbnb’s host page shows an earnings estimate with a slider for nights per month. Miro and Semrush put an input field in the hero so the visitor starts using the product immediately.

This pattern is spreading fast, helped by AI products whose natural first screen is a prompt box. The language is spreading too: Linear, Notion and Vercel all mention agents or AI in their first screen. The interaction itself will last, because it shows value instead of describing it. The wording will date faster than the pattern.

6. Technical details as decoration

Some designers are borrowing the look of tools and documents: monospaced type, grids, labels in brackets, live clocks. Alejandro Mejias builds his page like a spec sheet, with a faint grid and a live local clock. Marga Navarro sets her whole site in a monospaced font, and Mikki Sindhunata uses one for body text that reads like a film slate.

This works well when it says something true about the person or product, as it does in all three cases. Copied onto a bakery’s website, it would just be a costume.

7. Dark designs, used with care

Dark first screens are common in the gallery, especially for software and portfolios: Linear, DigitalOcean, Jens Bosman and Clay Boan all open on black or near-black. A dark canvas makes product screenshots and bright type glow.

For reading, though, the evidence still leans the other way. Nielsen Norman Group’s review of the research found that people with normal vision usually perform better with dark text on a light background, and recommends offering a dark mode rather than forcing one. The sites that get this right use dark for impact on the first screen and keep long text readable.

What is fading

Some patterns are losing ground, or should be.

Heavy 3D and video as the whole first screen. When I captured the gallery, several portfolios built around 3D scenes showed a blank or frozen screen in a browser without graphics acceleration, and I had to replace them. Google’s guidance on Largest Contentful Paint asks for the main content to appear within 2.5 seconds for most visits. A first screen that depends on a large scene loading perfectly is a risk most sites cannot afford.

Copies of famous effects. Stripe still owns the flowing gradient that half the industry copied. On Stripe it is a signature; elsewhere it usually reads as borrowed.

Hidden navigation on desktop. Hamburger menus on wide screens save space nobody needed saved and make content harder to find.

Generic stock photography. The gallery has almost none. Real product shots, real places and real people have replaced it nearly everywhere.

How to use trends without dating your site

The safest approach is to separate the structure of your site from its surface. Structure, meaning clear hierarchy, readable type, fast pages and an obvious next step, does not go out of fashion. Surface, meaning colours, specific effects and the typeface of the moment, can change every couple of years without rebuilding anything.

If you use WordPress, block themes make that separation easier, because colours, type and spacing live in one set of global styles. The WordPress website design guide explains how. For the underlying principles, see the guides to web design elements and how to design a website.

Articles in this guide