Variation E · Footer Library

Footer archetypes, device-tested.

Six functional footer patterns spanning editorial, SaaS, e-commerce, agency, small business, and enterprise directories. Every archetype ships with a live viewport switcher — inputs, accordions, selectors, and hover states behave exactly as they will in production.

01 · Premium Editorial02 · Corporate SaaS03 · E-Commerce Mega04 · Minimal Agency05 · Small Business06 · Enterprise Hub

Not yet approved — do not build against this.

Footer is unresolved. Footer Library ships empty. Same rule as navigation — never evaluated in placeholder branding.

Record the approved choice in src/data/project-decisions.ts — the one file edited per project. Every route, library entry and export reads from it.

No entries yet

Footer options

Footer options are the footer layouts put forward for this client's approval, rendered in the approved palette and typography. Client-facing.

3 options, exactly one marked recommended.

An entry must satisfy FooterOption

export type FooterOption = {
  id: string;
  name: string;
  recommended: boolean;               // exactly one option is true
  reasoning: string;
  uxRationale: string;                // client-facing benefit framing
  archetype: string;                  // which catalog archetype it derives from
  columns: number;
  classField: string;                 // e.g. "section_is_footer jcd_band_lg jcd_width_default"
  utilities: string[];                // sitemap, legal rail, newsletter, locale switch
  fieldExposure: {
    editable: string[];
    locked: string[];
    why: string;
  };
  deviceAdaptability: string;         // client-facing
  responsive: { xl: string; lg: string; md: string };  // dev-facing, token-referenced
  audience: "client" | "dev";
};

Generator

Footer generator

Run this once per client, with the client's inputs pasted in. The shared constraints travel with it automatically when you copy.

Shared constraints

CONSTRAINTS — these apply to every option you generate. A generated option that breaks
one of these is worse than no option, because it enters the library looking finished.

- Every value references a token. No literal hex, no arbitrary px. If a token does not
  exist, say so and stop — do not invent one.
- Spacing on the 4pt scale only. A value outside it is a VIOLATION, not an extension:
  flag it and propose the nearest step.
- Naming: jcd_ SYSTEM carries the only padding and width. section_is_ SEMANTIC carries
  identity, never spacing. jcd_ui_ COMPONENT carries internal spacing only. BB Class field
  output is "<semantic class> <system classes>".
- Breakpoints are desktop-first max-width at 1200 / 992 / 768. Never min-width.
- Module vocabulary is PowerPack-first. Base BB is limited to Loop, HTML, Box, Flex
  Columns. UABB is used for five modules only: Advanced Icons, Off-Canvas, Devices, Image
  Carousel, Content Toggle. Advanced Menu is PowerPack.
- WCAG 2.1 AA is a hard gate. Compute every contrast ratio from token values and state the
  number. Body text >= 4.5:1, large text and UI >= 3:1.
- Every interactive element needs a :focus-visible state visually distinct from :hover.
- Every option carries uxRationale (why it works, tied to a named heuristic or law) and
  deviceAdaptability (benefit-framed, for the client).
- Exactly ONE option per set is marked recommended: true, with the reasoning attached.
- No lorem ipsum. Placeholder copy follows StoryBrand SB7 in the client's voice.

Footer generator

Generate 3 footer options for the Footer Library.

INPUT: the client's sitemap, contact details, and whether a newsletter or booking CTA
belongs in the footer. Render all three live in the approved palette and typography.

Vary in structure and emphasis:
  - editorial: brand blurb, link columns, generous space
  - practice details: hours, location, contact, credentials — the trust-signal footer
  - CTA-led: one strong conversion block with minimal wayfinding beneath

Each option specifies:
  - column structure and ratios, plus stacking order at each breakpoint. State the mobile
    order explicitly — BB stacks in DOM order, which is often not the reading order you
    want.
  - the legal bar: copyright and legal links at opposite ends, vertically centred
  - spacing: ONE flex gap on the column, module margins zeroed. BB adds a bottom margin to
    every module and PowerPack adds its own to headings; those stack and compound.
  - link hover and focus states matching the navigation treatment
  - if a form is included: Gravity Forms with the PowerPack Styler, always-visible labels,
    never placeholder-as-label, a visible focus ring, and a privacy note

Footers carry more low-contrast text than any other region — muted greys on tinted grounds.
Compute the ratio for every text colour used and state it. Secondary text still needs
4.5:1.

Placeholder — replace on remixRecommended

Editorial — brand blurb, three link columns

Brand blurb at 2fr, three link columns at 1fr each, legal bar beneath. No form. Present so the stacking-order and contrast format is visible before a real set lands.

BB Class field: section_is_footer jcd_band_lg jcd_width_default

Specification

Desktop (1201px+): 2fr 1fr 1fr 1fr, gap 48
xl (<=1200): Same ratios, gap steps to 32
lg (<=992): 2 columns: blurb full width, links 1fr 1fr
md (<=768): Single column
Mobile order: 1 Brand blurb · 2 Explore · 3 Services · 4 Contact · 5 Legal bar
Legal bar: Copyright left, legal links right, vertically centred
Spacing: ONE flex gap on the column; BB and PowerPack module margins zeroed
Form: None. If added: Gravity Forms + PowerPack Styler, visible labels, privacy note

Why it works

A footer sitemap is where visitors look when the nav has run out of answers — Jakob's Law again. Explicit mobile order keeps the brand statement first rather than whichever column happens to sit first in the DOM.

On every device

On a phone the columns stack in reading order instead of source order, so the visitor sees who you are, then where to go, then the legal detail last.

Why recommended

The only entry in the set. It is the safest default because it carries wayfinding without asking the visitor for anything; a generated set adds the trust-signal and CTA-led structures alongside it.

Contrast — computed from token values

Link --ink on --paper17.3:1AAA
Secondary --muted on --paper6.0:1AA
Divider --rule on --paper1.4:1FAIL

Notes

--rule appears only as a divider, never as text. Every text colour in the footer clears 4.5:1 — this is the region where muted greys on tinted grounds most often fail.
Link hover and focus match the navigation treatment exactly: underline on hover, 2px offset ring on :focus-visible.

01 · Premium Editorial

Serif wordmark, line-input newsletter, thin-divider grid.

High-whitespace, multi-tier layout. A massive serif wordmark pairs with a minimalist underline newsletter input, followed by three tidy link groups and a centered legal utility strip.

View

UX RationaleAesthetic & Minimalist Design: negative space and hairline dividers reduce visual noise, letting the wordmark and single primary action (Subscribe) command attention.

Info ChunkingMiller's Law: link taxonomy is capped at three columns of four items each — well inside the 7±2 working-memory limit.

02 · Corporate SaaS / Tech

Four link columns + dark newsletter card with status dot.

Structured five-column layout. Columns 1–4 group product, features, company, and resources; column 5 hosts a dark contrast card with newsletter opt-in, socials, and a live 'All systems operational' status indicator.

View

UX RationaleVisibility of System Status: the live status dot converts trust signals into ambient feedback, reducing anxiety for evaluators.

Info ChunkingMiller's Law: each column holds exactly four links, keeping every group scannable at a glance.

03 · E-Commerce Mega-Footer

Trust props, mobile accordions, payment cluster, locale selector.

Triple-row blueprint. Row one carries four icon-led trust props; row two exposes link columns that collapse into accordions on mobile alongside a payment gateway cluster; row three carries copyright, legal, and a currency/language selector.

View

UX RationaleJakob's Law: shoppers expect trust seals, payment logos, and a locale switcher in the footer — this pattern maps directly to their mental model.

Info ChunkingProgressive Disclosure: on mobile, link columns collapse into accordions so users only load the group they need, honoring the Doherty Threshold.

04 · Minimalist Creative Agency

Oversized CTA text-link over a single utility row.

Ultra-clean, low-density layout. A dramatic 'Let's build something together →' text-link dominates the block; a single flex row underneath carries the wordmark, social handles, and copyright.

View

UX RationaleFitts's Law: the oversized CTA is the largest, warmest target on the page, dramatically raising the odds of a click compared with a small footer link.

Info ChunkingAesthetic & Minimalist Design: only two visual layers (headline + utility row) so there is nothing to parse beyond the invitation.

05 · Small Business / Brick-and-Mortar

Address + hours, inline contact form, local trust badges.

Highly accessible information block prioritizing real-world utility: clickable address and phone, store hours, an embedded inquiry form, and a right column of local reviews, association badges, and social links.

View

UX RationaleMatch Between System & Real World: physical address, hours, and phone mirror the info visitors would look for on a storefront window, satisfying the primary local-search intent.

Info ChunkingMiller's Law: three balanced columns (Visit · Contact · Trust) create a predictable triad that maps cleanly to visitor tasks.

06 · Enterprise Content Hub / Directory

Six-column index, locale switcher, compliance badges, back-to-top.

Wide, high-density layout organizing dozens of resources into six scannable micro-text columns. Includes a full site index link, country locale switcher, WCAG + SOC 2 badges, and a sticky Back-to-top control.

View

UX RationaleFlexibility & Efficiency of Use: dense linking lets power users jump directly to any resource, while novices can fall back to the full site index.

Info ChunkingMiller's Law: each of six columns is capped at six items, keeping every category individually scannable despite the overall density.