The full-catalog footer: five columns of 14px links on pure black, headed by quiet gray labels, with a status indicator and theme switcher in the bottom row. A sitemap that dresses well.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a Vercel-style mega footer.
1. Container: pure black, separated from the page by a 1px #EEEEF21A hairline. Inner max-width 1200px, 64px vertical padding.
2. Grid: brand column (logo + status pill) plus 4-5 link columns, `grid-cols-[1.5fr_repeat(4,1fr)]`, collapsing to 2 columns on mobile.
3. Column headings: 14px medium white. Links: 14px #6E6E84 that transition to white on hover over 150ms — color only, no underline.
4. Link spacing: 12px vertical gaps — mega footers die when cramped.
5. Bottom row: system status ("All systems normal" with a small blue dot), social icons at #6E6E84, and a segmented theme switcher (light/dark/system).
6. No newsletter form, no tagline paragraphs — this footer is a well-organized index.The full-catalog footer: five columns of 14px links on pure black, headed by quiet gray labels, with a status indicator and theme switcher in the bottom row. A sitemap that dresses well.
Hover the links — and try the newsletter form if this footer has one.
Hover the links — and try the newsletter form if this footer has one.