Premium Website Footer With AI: 3 Real Examples
How do you make a website footer look premium? Three real sites compared, prompts to rebuild one with an AI agent, and two bugs you only see in a browser.
A premium website footer does three jobs: it tells you how to reach a real person, helps you find your way, and ends the page with the brand, big and calm. Below are three real sites to steal one idea each from, plus prompts to have an AI agent rebuild it, which in our test took about two minutes.
What It Is
The strip at the bottom of every page on your site. Most people build it last, in a hurry.
Why It Matters
People who scroll all the way down usually want something: an email, an address, opening hours. A good footer answers them at a glance.
All three sites come from the front page of siteinspire, a gallery of well-made websites, recorded on 4 November 2026 in a window 1,440 pixels wide. We only describe what you can see; we don't know their numbers.
1. Komma Komma: Contact First, Name Last
Komma Komma is a web studio in Reykjavik, Iceland. Its footer is the most classic of the three.
What it is. Four columns with small grey labels: Contact Info, Navigation, Studio, Privacy Policy. At the bottom, "KOMMA KOMMA" in huge black letters, edge to edge.
Why it works. The first column has the email written out in full, ready to copy, plus a "Book a call" link. The Studio column shows "Reykjavik, IS", the local time ("14:21 GMT" when we recorded) and the coordinates: real people, in a real place. The closing name is an image as wide as the content above it (1,376 pixels).
How. Right before the footer sits a big question, "Do you have a project in mind?", with a "Let's talk" button. Then the footer comes up:
Rebuild my site's footer as four columns, each with a small grey label: Contact, Navigation, Studio, Privacy. In the first column put my email [email] written out in full as selectable text, and a "Book a call" link. In the Studio column put city, country and local time. At the bottom, the brand name in huge letters, exactly as wide as the content above. Right before the footer, a section with the question "Do you have a project in mind?" and a single button.
2. Stereoscope Coffee: The Footer as a Shop Counter
Stereoscope Coffee is a coffee roaster with stores in the Los Angeles area and in Seoul.
What it is. A grid with thin lines, like a printed form: newsletter, "Visit our store (1/7)" with one store at a time (photo, address, hours, colored dot), links, email and social. At the bottom, "STEREOSCOPE" across the whole width.
Why it works. It answers "can I go there now?". Each card ends with a dot and a word: when we recorded, Seoul showed a red dot and "CLOSED" (it was 23:24 there), Hollywood a green dot and "OPEN". And instead of a list of seven stores, two small arrows show the next one:
How. Two live clocks, "LA" and "SEOUL", each have a small count, "(3/5)" and "(0/2)" at that moment. It probably means "stores open / stores in that city", but no label says so: that's the one weak spot. Spell it out in the prompt:
In the footer, add one card per location, shown one at a time, with two small arrows to move to the next. Each card has a photo, address, opening hours and, at the end, a colored dot with the word "Open" or "Closed" next to it, based on that location's local time. If you show a count, always label what it counts.
3. House of Honey: The Logo Becomes the Art
House of Honey is an interior design studio in California. Its footer is the calmest, and the boldest.
What it is. A deep brown background, mostly filled by a big pink shape. Underneath, links, Instagram, a careers email and two addresses with phone numbers.
Why it works. That shape is the studio's logo, the little mark in the top-left corner. The page code shows the footer uses the same shape at full width (1,424 pixels). No words, and it still says "House of Honey". There are only two colors, deep brown and pale pink, the same pair as the menu bar.
How. The invitation comes just before: a pink card on a photo says "It would be a privilege to hear from you", with a "Get in Touch" link. That lets the footer stay quiet.
End the footer with my logo: the same SVG as the logo in the header, scaled to the full width and hidden from screen readers. Use only two colors, the same as the menu bar. Under the logo: page links, social, email and addresses. Right above the footer, a card inviting people to get in touch, with a single link.
The common thread. All three end with the brand, edge to edge, and the footer doesn't sell: on two of the three, the question and the button live in the section above. Freelancer or studio? Start with Komma Komma. Shop or venue? Stereoscope. A logo with a strong shape? House of Honey.
4. Rebuild It With an AI Agent
Alek gave Claude Code an empty folder and a prompt with the best ideas from all three. The agent could only read and write files and finished in about two minutes. Here's the page after two rounds of fixes:
How:
- In an empty folder, paste the prompt below into the agent with your own details.
- Open the page in a browser with the error console.
- If there's an error, paste it back to the agent as it is.
- Shrink the window to 360 pixels and widen it again: the name should always fill the width.
The prompt already includes the fixes the test needed later:
Build a small demo page with three files: one HTML, one CSS and one JavaScript. No libraries, no frameworks. The JavaScript is only for the clock. The studio is called [name] and is based in [city]. Before the footer, a "Have a project in mind?" section with a single button. The footer has three layers: four labeled columns, with contact in the first column and the email as visible text; a thin line; the giant name, filling the footer's width edge to edge on screens from 360 to 2,560 pixels. Rules: use a real footer element and a labeled navigation; show every visitor the time in [city], wherever they are, using Intl.DateTimeFormat and the [Europe/Lisbon] time zone; next to the time, a dot with the word "Open" or "Closed": open Monday to Friday, 9:00 to 18:00; the clock and dot stay hidden until the script runs; if JavaScript is off, show the opening hours written out; the giant name is an SVG hidden from screen readers with aria-hidden, because the name is already in the copyright line; measure the word with getBBox, don't guess, and measure again once the fonts have finished loading; don't name any global variable status; on phones the columns stack and every link gets extra space around it.
With the browser set to New York time, the footer still showed Lisbon time. The browser already knows every time zone, summer time included.
The two bugs. The agent couldn't run anything and said so, suggesting a check by hand.
Bug 1: the dot lied. It said "Open now" but the dot stayed grey, and a console error also froze the clock after the first minute. The cause: the badge lived in a variable called status, and browsers already own a global with that name, which turns anything into plain text. Renamed to statusBadge, the dot turned green.
Bug 2: stretched letters. The first build forced the word to an exact length, so the browser stretched every letter. The second pushed the letters apart, because with those fonts the word filled only about 84% of the space. Third round: measure, don't guess. The name is an SVG (an image that scales to any size); the script measures the word as the browser drew it, with getBBox, and sizes the SVG to match:
Small Test
Scroll to the bottom of your own site and read the footer as a stranger would. Then add one line: your city with the local time next to it, and your email as visible text.
It worked if someone who doesn't know you can tell, in five seconds, where you are, what time it is there and how to write to you.
Watch Out For
- Bugs only show when you look. The agent fixed each bug in about a minute, but a person found them by opening the page.
- Fonts differ between computers. A name set in text has to be measured. Two of the real sites use an image (the name for Komma Komma, the logo for House of Honey), which doesn't change with the visitor's fonts.
- Never color alone. A red or green dot means nothing to someone who can't tell those colors apart: always write "Open" or "Closed".
The next piece to fix? The pricing page: 3 examples to copy. To keep the agent inside clear rules: redesign an app with AI without breaking the code.
Source: Alek's piece on Medium. Thanks to Komma Komma, Stereoscope Coffee and House of Honey.
In short: A premium footer tells you how to reach a real person, helps you find your way and ends with the brand, big: the agent writes it in minutes, the bugs show only in a browser.
Newsletter
AI that actually works, in your inbox.
New pills, the tools we use and what we learn on real projects. Few emails, only when there is something useful.
