Design prompts for website footers

A good footer is a navigation safety net. When someone scrolls to the bottom of a page, it should hand them the next step: a scannable sitemap grouped by intent, a way to stay in touch, the social and legal links they expect, and contact details one glance away. The prompts below are the most-copied website footer designs in the Superdesign library, from dark dev-tool mega footers to editorial serif, neo-brutalist and frosted-glass variants. Open any one to see the exact prompt behind it, then change the columns, copy and brand colors and generate your own editable version in seconds.

How to prompt a website footer that looks designed, not generated

An AI design agent has a strong default for a footer, and most of those defaults waste the slot: one centered link row, no newsletter, a lone copyright line, an indigo gradient and the Inter typeface. A good prompt is really a list of constraints that override those defaults. Here is each default to override, the words that do it, and a template that bakes them all in.

Design a [dark or light] full-bleed website footer for [the product] that sends visitors to their next step.
Sitemap: [3 to 5] titled columns grouped by intent, for example Product (Features, Pricing, Changelog), Developers (Docs, API, Status), Company (About, Careers, Contact), Legal. Use real labels, not "Resources".
Newsletter: a minimal email-only capture with a clear heading and an action-specific button like "Get product updates", not "Submit".
Brand and contact: a logo or wordmark, a one-line description, and contact details so people can reach you.
Social and legal bar: a real social icon row, plus a legal bar with the copyright, privacy, terms and cookie links.
Responsive: columns stack on tablet and collapse into accordions on mobile, with a tap target on each section.
Style: a neutral base with one [accent] color used only for links and the newsletter button. Typeface [name], not the default. No indigo gradient, no frosted-glass unless asked.
Accessibility: wrap it in a native footer landmark, and keep link text at a readable contrast.

Structure and grouping

Default: It drops one cramped centered row of ungrouped links with vague labels, so the footer is hard to scan and points nowhere in particular.

Constrain it: Ask for a multi-column sitemap grouped by intent, each column with a clear title and real link labels like Pricing, Docs, Changelog and Contact.

Newsletter capture

Default: It leaves out any signup, so the footer captures nothing and gives a returning reader no way to stay in touch.

Constrain it: Ask for a minimal email-only newsletter capture with a clear heading and an action-specific button, not a generic "Submit".

Social row and legal bar

Default: It prints a lone copyright line and skips the social links and the privacy, terms and cookie links a real footer needs.

Constrain it: Ask for a real social icon row plus a legal bar with the copyright, privacy, terms and cookie links laid out clearly.

Color and type

Default: Left alone it reaches for an indigo-to-purple gradient and the Inter typeface, with color used as decoration rather than to guide the eye.

Constrain it: Name a typeface and one accent color on a neutral base, and reserve that accent for links and the newsletter button.

Responsive reflow

Default: It builds a desktop-only grid that does not reflow, so the footer becomes a cramped, unreadable block on a phone.

Constrain it: Ask for the columns to stack on tablet and collapse into accordions on mobile, with a tap target on each section.

Frameless full-bleed

Default: It floats a boxed footer inside page margins, so it reads as a detached card rather than the foot of the page.

Constrain it: Ask for a frameless, full-bleed footer that spans edge to edge and anchors the bottom of the layout.

Frequently asked questions

What should a website footer include?

A scannable sitemap grouped into titled columns by intent, contact details, a legal bar with copyright, privacy, terms and cookie links, real social links, and usually a minimal newsletter signup. Treat it as a navigation safety net for anyone who scrolls to the bottom, not just a place to park a copyright line.

What is a mega footer?

A mega footer, sometimes called a fat footer, is an expanded footer with several organized columns of the most important links plus extras like a newsletter capture, contact info and social links. It works well for larger sites because it acts like a second global navigation, as long as the columns are grouped and clearly titled rather than stuffed with every link.

How many columns should a footer have?

Three to five titled columns is the common sweet spot. Fewer forces awkward grouping, and many more turns the footer into a wall that nobody can scan. If you genuinely have a lot of links, collapse the less-used sections or move them to a dedicated sitemap page rather than cramming everything in.

How do you make a footer responsive on mobile?

Let the desktop columns stack vertically on tablet, then collapse the dense sections into tap-to-open accordions on mobile so the footer does not become an endless scroll. Keep one consistent interaction style, give each section a clear header, and make sure the tap targets and text stay large enough to use on a phone.

Why does my AI-generated footer look generic?

Because a vague prompt gets the model defaults: an indigo-to-purple gradient, the Inter typeface, one cramped centered link row, generic Product and Resources columns with placeholder links, and a lone copyright line. Name your real sections and labels, ask for a newsletter capture and a proper legal bar, set one accent color on a neutral base, and pick a named typeface, and it stops reaching for the average.

How do you write a prompt to generate a website footer?

Describe the job, not the vibe: the real sitemap columns and labels, a newsletter capture, the social and legal links, how it should reflow on mobile, and one accent color on a neutral base with a named typeface. The template above walks through each part, and you can open any example here to see a full prompt that works. Stuck on something? Ping us and we will sort it out together.