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

> Discover Hallmark's 8 footer archetypes designed to replace the standard 4-column grid. Explore unique visual voices from minimalism to kinetic scrolls.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: architecture
- Published: 2026-08-14

---

**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.

```html
<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)](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.

```html
<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)](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.

```html
<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)](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.

```html
<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)](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.

```html
<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)](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.

```html
<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)](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.

```html
<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)](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.

```html
<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)](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`](https://github.com/Nutlope/hallmark/blob/main/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)](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)](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`](https://github.com/Nutlope/hallmark/blob/main/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.