Minimal Footer

Features

• The active browser design contract controls the footer; systems that specify none remain flat, and the submit button uses its changing visible label as its accessible name.
• Populated first paint: the brand block, subscribe, three nav columns, and social row ship fully rendered in the static HTML (no skeleton, no artificial fetch latency); the JS then re-renders the same content atomically over it from the in-file data arrays with no flicker
• Logo-led brand block: a crimson Tabler typography mark built at runtime beside a Fraunces display wordmark ("Kern") set at the 144 optical size with an accent full stop — the footer's whole left column
• Italic Fraunces credo beneath the wordmark with a hanging crimson opening quote and an inline closing quote — an editorial epigraph in place of a plain blurb
• Refined serif column headers: uppercase Fraunces at overline size with generous 0.18em tracking and a short hairline rule beneath each
• Compact underline subscribe with an italic serif invitation label, client-side email validation, an inline aria-live error line, a fake-latency "Subscribing…" state, and a green "Subscribed ✓" success morph that resets after 2.5s
• Three slim nav columns (Resources, Company, Legal) rendered from a data array with createElement/textContent — each an aria-labelled <nav> landmark
• Nav link hover shifts the label to ink and slides a 1px crimson underline in via transform: scaleX
• Official Tabler brand social icons (Instagram, LinkedIn, X) built at runtime, with an accent tint and a soft rose wash on hover — no movement, the icon stays put
• Tidy hairline bottom bar: auto-updating copyright left, three small social icon buttons right — no status chrome, no extra badges
• Flat editorial-minimal identity: warm paper page under a white footer plate in light, warm plum-black surfaces in dark — no glows, no halos, no gradients
• One confident accent — crimson rose #C0396B in light, lifted rose #E06E97 in dark — on the logo mark, subscribe pill, underline slides, and icon hovers

Accessibility

Landmarks

<footer> contentinfo, one aria-labelled <nav> per column, <main> page area

Form label

Visible italic <label for="subscribe-email"> above the input

Validation

aria-live="polite" error line referenced by aria-describedby, aria-invalid on the input

Social links

aria-label + rel="noopener" per link, decorative SVGs aria-hidden="true"

Focus indicators

Global :focus-visible ring, accent underline + box-shadow replacement on the input

Reduced motion

prefers-reduced-motion: reduce disables all animations

Viewport

100dvh for mobile-safe viewport height

Customise it with AI

Open Minimal Footer in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the footer is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.