Open the app

Pattern backgrounds for every section of your page

Page Patterns makes the geometric backgrounds that turn a flat block of colour into a section that looks designed. Pick a look, set your colours, and paste the result into the AI tool you build with.

Before: a flat brand colour
After: a low-poly pattern, clear behind the headline

Why it exists

AI coding tools are good at layout and copy, but they almost always reach for flat colour. They rarely add texture to a section, and when they do, they don't know where it should go, so the pattern ends up fighting the headline.

Page Patterns does that part for you. It designs the background around your content, keeps it quiet behind your text, and writes the instructions your AI tool needs to add it to the right section.

How it works

  1. Pick a look: low-poly triangles, hexagons, halftone dots, isometric cubes, Voronoi pebbles and more.
  2. Set it up for your page: your brand colours, where the pattern goes (hero, banner, section, card or footer) and where your headline sits.
  3. Paste it in: copy the prompt into Claude Code, Cursor, Lovable, Bolt or v0. It says what to add and where. Or take the SVG, HTML, React or Tailwind code yourself.
Hex vignette on teal
Halftone corner on charcoal
Isometric cubes on plum

What makes it different

  • Designed around your text. A clear zone keeps the pattern quiet behind your headline and fades it back in around it.
  • Small files you can edit. Patterns export as SVG files of a few kilobytes that recolour with a CSS variable, so you can change the colour later without coming back.
  • Private. The app runs in your browser. Your designs are never uploaded, and a share link carries the design inside the link itself.
  • No account for the editor. Open it and start. It's free.
  • Works with AI agents. An MCP server lets agents such as Claude Code design patterns for a section, show you options in your own page and add the one you pick. It needs a free key. Use it from an AI agent.

Who makes it

Page Patterns is made by Peter Claridge, a web designer and developer in the UK who builds marketing sites for software companies. Questions, bugs and ideas are welcome at [email protected].

Common questions are answered in the FAQ, and every control is explained in the help pages.