Hallmark's 8 Footer Archetypes: Beyond the 4-Column Grid

Hallmark replaces the generic "AI footer" four-column grid with eight purpose-built footer archetypes (Ft1–Ft8), each encoding a distinct visual voice from mast-headed minimalism to kinetic marquee scrolls.

The Hallmark design system, maintained at Nutlope/hallmark, treats the footer as a narrative closing element rather than an afterthought. Each archetype swaps the default "AI-footer"—a four-column index of links—for a semantically appropriate pattern that matches editorial intent and brand voice. Here are all eight archetypes defined in the source code, with their use cases and implementation details.

Ft1 – Mast-Headed: Quiet Authority

The mast-headed footer places a wordmark and tagline on a single horizontal band with sparse ancillary links. It suits heavy-content pages that need a restrained, singular exit point.

<footer class="foot-mast">
  <p class="wordmark">Studio Name</p>
  <p class="tagline muted">Designs that don't look generated.</p>
  <p class="links muted">Imprint · Privacy · Contact</p>
</footer>

Source: [skills/hallmark/references/components/ft1-mast-headed.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/ft1-mast-headed.md)

Ft2 – Inline-Rule Single Line: Editorial Afterthought

The inline-rule footer uses a thin hairline rule above a single line of credits. No columns, no hierarchy—just essential metadata for pages where the footer should disappear.

<footer class="foot-line">
  <p>© 2026 · 137 Marlow Street · MIT licensed</p>
</footer>

Source: [skills/hallmark/references/components/ft2-inline-rule-single-line.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/ft2-inline-rule-single-line.md)

Ft3 – Index-Style Category List: Classic Sitemap

The index-style footer resurrects the multi-column pattern, but with tighter semantic structure: caps headings and short, scannable link lists. Use this for documentation hubs and product directories that genuinely need organized navigation.

<footer class="foot-index">
  <div><p class="caps">Product</p><ul>…</ul></div>
  <div><p class="caps">Company</p><ul>…</ul></div>
  <div><p class="caps">Resources</p><ul>…</ul></div>
</footer>

Source: [skills/hallmark/references/components/ft3-index-style-category-list.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/ft3-index-style-category-list.md)

Ft4 – Dense Typographic: The Colophon

The dense typographic footer packs credits, licenses, and addresses into a single monospace block. Editorial brands use this as a type-driven sign-off that rewards close reading.

<footer class="foot-dense mono">
  <p>Hallmark v0.2.0. Built with The Future, Fraunces, IBM Plex Mono. MIT licensed. 137 Marlow Street, 2026.</p>
</footer>

Source: [skills/hallmark/references/components/ft4-dense-typographic.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/ft4-dense-typographic.md)

Ft5 – Statement: Manifesto Close

The statement footer dominates with a bold, display-size closing line. The wordmark and minimal metadata sit beneath, making this ideal for atmospheric or manifesto-oriented pages.

<footer class="foot-stmt">
  <p class="foot-stmt__line">Build something they'll remember.</p>
  <div class="foot-stmt__meta">
    <span class="wordmark">Studio</span>
    <span class="muted">© 2026 · MIT</span>
  </div>
</footer>

Source: [skills/hallmark/references/components/ft5-statement.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/ft5-statement.md)

Ft6 – Letter Close: Personal Sign-Off

The letter close footer mimics handwritten correspondence with a "Yours," closing and optional post-script. Deploy this for warm, editorial-quiet voices like Garden or Atelier genres.

<footer class="foot-letter">
  <p class="foot-letter__close">Yours,<br><span class="foot-letter__sign">— Studio</span></p>
  <p class="foot-letter__ps muted">P.S. — letters back welcome at <a href="mailto:hello@studio">hello@studio</a>.</p>
</footer>

Source: [skills/hallmark/references/components/ft6-letter-close.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/ft6-letter-close.md)

Ft7 – Newsletter-First: Subscription Priority

The newsletter-first footer elevates the subscription form above metadata. This archetype serves Substack-style sites where newsletter conversion is the primary footer goal.

<footer class="foot-news">
  <form class="foot-news__form" action="/subscribe" method="post">
    <label for="foot-email">Letters from the studio · monthly</label>
    <div class="foot-news__row">
      <input id="foot-email" name="email" type="email" required placeholder="you@domain">
      <button type="submit" class="cta-fill">Subscribe</button>
    </div>
  </form>
  <p class="foot-news__meta muted">Studio · © 2026 · <a href="/imprint">Imprint</a></p>
</footer>

Source: [skills/hallmark/references/components/ft7-newsletter-first.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/ft7-newsletter-first.md)

Ft8 – Marquee Scroll: Kinetic Manifesto

The marquee scroll footer creates infinite horizontal motion with a repeating tagline and dot separators. Reserved for loud, playful, or sport-brand voices that demand kinetic energy.

<footer class="foot-marquee" aria-label="Footer">
  <div class="foot-marquee__track" aria-hidden="true">
    <span>STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 · </span>
    <span>STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 · </span>
  </div>
  <p class="visually-hidden">Studio · 2026 · MIT licensed</p>
</footer>

Source: [skills/hallmark/references/components/ft8-marquee-scroll.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/ft8-marquee-scroll.md)

How Archetypes Replace the AI-Footer

The default "AI-footer"—a four-column grid of links—appears in skills/hallmark/references/anti-patterns.md as a pattern to avoid. The component cookbook at [skills/hallmark/references/component-cookbook.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/component-cookbook.md) maps each genre to its preferred archetype, ensuring genre-aware footer selection. Structural guidance in [skills/hallmark/references/structure.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/structure.md) explains why the footer functions as the page's "closing gesture" rather than mere utility.

Summary

• Ft1 (Mast-headed) and Ft2 (Inline-rule) provide minimal exits for content-heavy pages
• Ft3 (Index-style) preserves multi-column navigation when genuinely needed
• Ft4 (Dense typographic) and Ft6 (Letter close) serve editorial, type-driven voices
• Ft5 (Statement) and Ft8 (Marquee scroll) deliver bold, atmospheric closes
• Ft7 (Newsletter-first) optimizes for subscription conversion
• All eight archetypes are defined in individual markdown files under skills/hallmark/references/components/

Frequently Asked Questions

What is the default "AI-footer" that Hallmark replaces?

The AI-footer is a generic four-column grid of links that Hallmark identifies as an anti-pattern in skills/hallmark/references/anti-patterns.md. It lacks semantic purpose and visual voice, so Hallmark substitutes one of eight genre-appropriate archetypes instead.

How do I choose between Ft3 and the anti-pattern four-column grid?

Select Ft3 (Index-style) only when your page genuinely requires categorized navigation—documentation roots, product hubs, or sitemap-heavy sites. The anti-pattern grid fails because it applies four columns indiscriminately; Ft3 applies structural rigor with caps headings and constrained link sets.

Which footer archetype works best for a newsletter-focused site?

Use Ft7 (Newsletter-first). It foregrounds the subscription form with clear labeling and a dedicated input row, placing ancillary metadata below. This matches the Substack-style priority of email capture over traditional footer content.

Does Hallmark provide CSS for these footer archetypes?

Yes. Each archetype's markdown file in skills/hallmark/references/components/ contains embedded CSS rules alongside the HTML markup. The mono, muted, caps, and wordmark utility classes appear consistently across archetypes for cohesive styling.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}