Figma marketing website footers

Nobody scrolls to the footer by accident. People arrive there deliberately, usually because the page above didn't answer them: where's pricing, is there a careers page, how do I reach support. That intent makes footer visitors unusually valuable, and it's why a footer deserves actual design attention instead of whatever fits at the end of the build.

That makes the footer less of an afterthought and more of a safety net, and the 5 footer components and 192 variants above treat it that way.

What a footer is actually for

Nielsen Norman Group's footer research catalogues the jobs footers do well: utility links people expect to find there (contact, careers, legal pages), doormat navigation that restates the site's structure, and secondary engagement like social links and newsletter prompts.

The anti-pattern is the link dump, where every page ever published gets a footer slot and none of them can be found. A footer should be the curated index of your site, not its attic.

It's also the place users check for legitimacy signals: a real company address, working social links, and a current copyright year all quietly answer "is this site maintained?"

20 layouts: large, small, default, and brand

The set includes 16 large footers, the multi-column kind with grouped link lists and room for everything a grown site accumulates, and 4 small ones for products that only need a logo, a few links, and a legal line. Every layout comes in two color treatments, a neutral default and a brand-colored version, and each of those in desktop and mobile. That's the full matrix designers usually have to fake by recoloring by hand, and it means trying your footer dark, branded, or minimal is a variant flip rather than an afternoon.

The sub-components underneath, link columns, individual links, and the logo block, are themed to match, so a custom column arrangement still inherits the right colors.

Mobile footers: collapse with intent

A five-column footer can't just squeeze onto a phone, and pretending it can is how footers end up as the least usable part of otherwise responsive sites. The mobile versions here re-stack the columns deliberately, keeping the link groups scannable and the legal row at the bottom where users expect it, rather than letting five columns compress into an unreadable strip.

Because everything is built with Auto Layout, adding a link to a column pushes the layout correctly on both breakpoints instead of leaving a gap on one of them.

Contrast and the legal row

Brand-colored and dark footers are where contrast failures hide, because footer text is usually smaller and grayer than anything else on the page. WCAG's contrast minimum of 4.5:1 applies to that tiny copyright line just as much as to the headline, and the color themes in this set are built with that in mind.

The footer links also carry real hover states, a small courtesy that makes a dense footer feel navigable rather than like a printed page.

When it's time to build, the same footers exist in code. Untitled UI React footers are open source, built with Tailwind CSS, and mirror these Figma components, so the footer your designer chose is the one that ships on every page.