This dark mode website footer UI is a full-width footer on a deep navy background. It holds the links, social icons and newsletter signup that most business sites need at the bottom of a page.
A footer is where visitors look when they cannot find something else. This one organises links into short columns, groups legal pages together and gives social links and a newsletter signup their own space. The navy background and white text stay readable, and the lighter bottom bar separates the copyright line cleanly from the rest. It is also a handy example for showing how a dark section can sit under a light page without feeling out of place.
What you get
- A logo and a short company description on the left
- A Quick link column with Home, Templates, About us, Contact and Blog
- A Legal and Policies column with privacy, terms, copyright, support and FAQ
- Five social icons and a newsletter field with a Subscribe button
- A slightly lighter bar at the base with a copyright line
How to use it in Figma
Press copy on this page and paste into Figma with Ctrl or Cmd + V. Replace the logo and text, edit the links and add your own social icons. Set the frame to the width of your page and test it against the section above it.
Best for
- Business and portfolio websites
- SaaS and template stores
- Landing pages with a newsletter goal
- Dark theme design systems
Customisation tips
- Update the copyright year when you reuse it.
- Keep the contrast between links and the navy background clear.
- Match the top of your page with the website header design. More options live in Footers.
