Footers

web

Underrated real estate. A good footer is part link-map, part brand, part SEO.

Variation 01
Mega Footer
aka Sitemap Footer
stripe.com
Multi-column footer with full nav, contact, status, and legal.
When to use
Mature products. New startups should skip and use a minimal one.
Anatomy
4–5 columns of links grouped by theme
Left: logo + tagline + region switcher
Bottom strip: status pill, social icons, copyright
How the industry does it
1 examples · credited
Stripe
Dense, perfectly typed, with subtle currency/region switchers.
via stripe.com
Prompt
```
Build a mega footer. Top section: 5-column grid. Column 1 (wider): wordmark, one-line tagline, region/currency switcher. Columns 2–5: link groups (Product, Developers, Company, Legal) each with a small uppercase label and 5–7 14px links in ink-400. Below the grid: a 1px divider, then a bottom strip with: a small "All systems normal" status pill on the left (green dot), social icon row in the center, and copyright + a "Made with care" line on the right. Background subtly darker than the page. Generous vertical padding (96px top).
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 02
Minimal Footer
aka Skinny Footer
vercel.com
Single row: wordmark, three links, copyright.
When to use
Single-page sites, MVPs, very early stage.
Anatomy
Wordmark left, links center, social right
1px top border
~80px tall
How the industry does it
1 examples · credited
Vercel docs landing
Quiet, unobtrusive, gets out of the way.
via vercel.com
Prompt
```
Build a minimal footer. ~80px tall, 1px top border rgba(255,255,255,0.06). Three regions: wordmark on the left, a center row of 3 quiet links (Privacy, Terms, Contact) at 13px ink-400, and a row of social icons on the right at 14px. Everything vertically centered. Mobile: stacks into 3 rows.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 03
Newsletter Footer
aka Subscribe Footer · Email-Capture Footer
resend.com
Footer led by a newsletter email input. The page's last conversion opportunity.
When to use
Content brands, indie builders, dev tool blogs. Effective when the newsletter actually ships.
Anatomy
Big headline + one-line reassurance
Email input + subscribe button row
Per-month sender count for trust
Standard link columns beneath
How the industry does it
2 examples · credited
Resend
Quiet newsletter signup framed against a wordmark.
via resend.com
Substack
Footer-led subscribe with social proof beneath.
via substack.com
Prompt
```
Build a newsletter-led footer. Top half: a centered 32px headline 'Get the weekly drop' and a 14px muted subhead. Below: a single inline form. Email input + 'Subscribe' button. Below the form: a 12px muted line 'Joined by 14,231 builders · No spam, unsubscribe anytime'. A 1px divider, then a standard 3-column link footer (Product / Resources / Company) and a slim copyright strip with social icons. Background subtly darker than the page.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 04
Global Region Footer
aka Region-Switcher Footer · Multi-Locale Footer
stripe.com
Footer with prominent region, currency, and language switchers. The table-stakes for global SaaS.
When to use
Anyone selling internationally. Even just acknowledging region defaults builds trust with non-US buyers.
Anatomy
Region/language/currency switcher row
Per-region pricing disclaimer
Standard link columns
Compliance icons (GDPR, SOC2, etc.) bottom strip
How the industry does it
2 examples · credited
Stripe
Region + language switchers with consistent IA per locale.
via stripe.com
Apple
Country picker as a dedicated row at the bottom.
via apple.com
Prompt
```
Build a global region footer. Standard 4-column link grid at the top. Below the columns: a row with three selects. Region (globe icon + 'United States'), Language ('English (US)'), Currency ('USD $'). Each a quiet ghost button that opens a popover with searchable options. Beneath: a tiny per-region note ('Prices shown in USD. VAT calculated at checkout.'). Bottom strip: copyright on the left, compliance badges (SOC 2, GDPR, ISO 27001) on the right.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 05
Sitemap Grid Footer
aka SEO Footer · Dense Link Grid
shopify.com
A 5–6 column grid of every link on the site. Used as much for SEO crawling as for users.
When to use
Content-heavy brands, ecom catalogs, big SaaS. Don't ship for an MVP.
Anatomy
5 or 6 link columns
Each column: small uppercase label + 6–10 links
Wordmark + tagline in the first cell
Compact 13px link size
How the industry does it
2 examples · credited
Shopify
Dense sitemap footer with every link category surfaced.
via shopify.com
Vercel
Comprehensive sitemap grid as a baseline of the brand.
via vercel.com
Prompt
```
Build a sitemap-style footer. 6-column grid. First column: wordmark + 1-line tagline + region switcher. Columns 2–6: link groups (Product / Developers / Solutions / Resources / Company / Legal), each with a small uppercase 11px tracking-widest label and 6–10 links at 13px in muted color. Generous vertical padding (96px). Bottom strip: 1px top border, copyright, social icons, language picker.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 06
Brutalist / Editorial Footer
aka Display-Type Footer · Loud Footer
cosmos.so
Footer dominated by an oversized wordmark, headline, or art piece. The whole brand in one chunk.
When to use
Studios, agencies, personal sites. Wrong for SaaS. Too loud for a conversion surface.
Anatomy
Massive wordmark or headline (96–180px)
Minimal link grid below
Single 'Let's talk' CTA
How the industry does it
2 examples · credited
Cosmos
Display-size wordmark fills the footer width.
via cosmos.so
Studio Lukas Roth
Editorial typography as the only real content.
via studiolukasroth.com
Prompt
```
Build a brutalist footer. Top: a 160px serif headline 'Let's make something' filling the container width with tight tracking. Below: a single row with a 'hello@studio.com' mailto link on the left and 3 quiet social links on the right. A 1px divider. Then a bottom strip with copyright and a tiny 'Made in Tokyo' line. No standard link columns. Background full-bleed dark with a faint paper-grain noise overlay.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 07
CTA Banner Footer
aka Pre-Footer CTA · Ready-to-Start Footer
linear.app
A large 'Ready to start' card just above the standard footer. Last reminder to convert before they leave.
When to use
Most SaaS marketing pages benefit from one. Stack it directly on top of the standard footer.
Anatomy
Wide card with rounded corners
Display-sized headline + 1-line subhead
Primary + ghost CTA
Optional gradient or 3D accent
How the industry does it
2 examples · credited
Linear
'Ready to build?' card with two CTAs above the footer.
via linear.app
Vercel
Pre-footer CTA card with gradient background.
via vercel.com
Prompt
```
Build a pre-footer CTA card. A full-width rounded-3xl card with padding 80px, centered content, gradient background (radial in accent → bg). Headline at 48px serif 'Ready to ship faster?'. One-line muted subtext. Below: a primary white pill CTA 'Get started' and a ghost 'Talk to sales →' next to it. The card sits in the page's max-width container with 96px of breathing room above the standard footer below it.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 08
Status Page Footer
aka System Status Footer · Live-Status Strip
stripe.com
Footer that includes a live status pill (green/yellow/red) linked to the public status page.
When to use
Infra, dev tools, payments. Live status in the footer is reassurance + accountability in one byte.
Anatomy
Standard footer columns above
Bottom strip with status pill
Status pill: dot + label + last-checked time
Click goes to status.* subdomain
How the industry does it
2 examples · credited
Stripe
Status pill in the footer auto-updates from the status API.
via stripe.com
Cloudflare
Color-coded status pill with last-incident timestamp on hover.
via cloudflare.com
Prompt
```
Build a footer with a live system-status pill. Bottom strip of the footer renders a pill (rounded-full, 1px border) containing a 6px colored dot (green = operational, amber = degraded, red = incident), the label 'All systems normal', and a tiny last-checked timestamp. The pill is a link to status.acme.com. The status value comes from /api/status, polled every 60s; show a subtle skeleton when uninitialized.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 09
Compact App Footer
aka In-App Footer Strip · Bottom Settings Strip
linear.app
A footer for in-app surfaces (not marketing) - wordmark, status, keyboard hints, version.
When to use
Inside app shells where space is precious. Mostly for dev tools and admin UIs.
Anatomy
~32px tall
Left: wordmark + version number
Center: keyboard hint ('Press ⌘K to search')
Right: status pill + help icon
How the industry does it
2 examples · credited
Linear
Slim footer with version + keyboard help link.
via linear.app
Vercel Dashboard
Compact footer with org switcher and shortcut hints.
via vercel.com
Prompt
```
Build a compact in-app footer. 32px tall, 1px top border. Three regions, all 12px text. Left: wordmark + 'v3.2.4 · build a1c4'. Center: 'Press ⌘K to search · ? for help'. Right: status pill (small dot + 'Operational') + question-mark icon button that opens a keyboard shortcuts modal. Background slightly darker than the page. Stays in the footer of the app shell, never floats.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 10
Social-Led Footer
aka Community Footer · Discord-Forward Footer
vercel.com
Footer where the community/social channels are the primary content - Discord, X, GitHub, YouTube.
When to use
Open-source projects, indie products, community-led brands. The community is the moat.
Anatomy
Big 'Join the community' headline
Grid of channel cards: Discord, GitHub, X, YouTube
Each card shows live counts (members, stars, followers)
Standard link columns beneath
How the industry does it
2 examples · credited
Vercel
Community block with Discord member count and GitHub stars.
via vercel.com
Tailwind CSS
Social channels surfaced with live counts as social proof.
via tailwindcss.com
Prompt
```
Build a community-led footer. Top: a 32px headline 'Join the community' centered. Below: a 4-column grid of channel cards - Discord, GitHub, X, YouTube. Each card a link with the channel icon (24px), platform name, and a live count number ('12,431 members' / '24.1k stars'). On hover the card border brightens. Below the cards: a standard 4-column link grid and a bottom copyright strip.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro

Footers

Mega Footer

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Minimal Footer

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Newsletter Footer

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Global Region Footer

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Sitemap Grid Footer

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Brutalist / Editorial Footer

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

CTA Banner Footer

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Status Page Footer

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Compact App Footer

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Social-Led Footer

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion