Hallmark's Footer Archetypes: How to Choose the Right One for Your Page

Hallmark's design system defines eight distinct footer archetypes (Ft1–Ft8), each encoding a specific visual structure, tone, and information hierarchy that must match the page genre while adhering to the diversification rule preventing reuse across consecutive builds.

The Nutlope/hallmark repository provides a comprehensive design system that standardizes footer implementations through these eight distinct patterns. Each archetype is documented in the Component Cookbook with specific markup requirements and genre mappings to ensure visual consistency across editorial, modern-minimal, atmospheric, and other page types.

The Eight Footer Archetypes Explained

Ft1 · Mast-headed

The mast-headed archetype anchors a word-mark, tagline, and short link row in a single horizontal band. This pattern appears in skills/hallmark/references/components/ft1-mast-headed.md and serves as the default for editorial pages.

Use this for heavy-content pages requiring a quiet, singular footer. According to the routing table in skills/hallmark/references/component-cookbook.md (lines 53-62), this is the default selection for editorial genres.

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

Ft2 · Inline Rule Single Line

The inline rule archetype represents the most minimal option, using a hair-line rule with a one-line list of credits, address, and copyright. This serves as the default for modern-minimal sites.

Deploy this when the page already carries strong visual weight elsewhere. The markup provides the quietest possible closing without competing with main content.

<footer class="foot-inline">
  <p class="inline-rule">Studio Name · © 2026 · All rights reserved</p>
</footer>

Ft3 · Index Style Category List

This archetype presents 3-4 short columns, each headed by a category in small caps containing multiple links. It functions as a genuine sitemap for hub pages requiring organized navigation hierarchies.

Select this for documentation or reference sites. The docs/reference genre defaults to this archetype according to the routing table.

<footer class="foot-index">
  <div class="col">
    <h4>Product</h4>
    <ul>
      <li><a href="#">Features</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Docs</a></li>
    </ul>
  </div>
  <div class="col">
    <h4>Company</h4>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Careers</a></li>
      <li><a href="#">Blog</a></li>
    </ul>
  </div>
</footer>

Ft4 · Dense Typographic

Featuring a dense block of text in a small monospace font, this archetype delivers an editorial colophon vibe suitable for technical documentation. The terminal genre defaults to this pattern.

Apply this to terminal-style pages or dense textual content requiring extensive credits, references, or licensing information.

<footer class="foot-dense">
  <p class="dense-text">
    Studio Name • 2026 • Built with Hallmark • MIT Licence • © 2026 All rights reserved
  </p>
</footer>

Ft5 · Statement

A large display sentence dominates the footer, with the word-mark and minimal links sitting beneath in muted type. This provides a strong closing line that reinforces brand voice.

Use this for atmospheric or playful pages requiring emotional impact. The atmospheric genre defaults to this archetype.

<footer class="foot-statement">
  <p class="statement">Design that feels human, not AI-generated.</p>
  <p class="meta">Studio Name • © 2026</p>
</footer>

Ft6 · Letter Close

This archetype closes the page like a letter ("Yours, the team.") with optional post-script, creating a narrative, personal tone throughout the site.

Deploy this for editorial or long-form documents where the site reads as personal correspondence. It serves as an acceptable alternative for modern-minimal and editorial genres under the diversification rule.

<footer class="foot-letter">
  <p class="signoff">Yours, the team.</p>
  <p class="postscript">P.S. Keep an eye on our blog for updates.</p>
</footer>

Ft7 · Newsletter First

The newsletter form (label, input, submit) serves as the primary element, with word-mark and copyright beneath. This prioritizes lead capture at the page bottom.

Select this for playful or community-focused pages where email conversion is critical. The markup emphasizes form hierarchy over traditional footer content.

<footer class="foot-newsletter">
  <form class="newsletter-form">
    <label for="email">Stay in the loop</label>
    <input type="email" id="email" placeholder="you@example.com">
    <button type="submit">Subscribe →</button>
  </form>
  <p class="meta">Studio Name • © 2026</p>
</footer>

Ft8 · Marquee Scroll

An infinite-scroll line of repeating tagline and dot separator creates kinetic energy. This suits fashion lookbooks and brand-forward agency sites.

Use this for playful or visual-centric pages requiring movement. The playful genre defaults to this archetype, documented in skills/hallmark/references/components/ft8-marquee-scroll.md.

<footer class="foot-marquee">
  <div class="marquee">
    Studio Name · 2026 · Studio Name · 2026 · Studio Name · 2026 …
  </div>
</footer>

How to Choose the Right Footer Archetype

The selection process follows a specific workflow defined in skills/hallmark/references/component-cookbook.md to ensure genre-appropriate placement and intentional variation across builds.

1. Identify the page genre. Hallmark maps genres to default footers in the routing table (lines 53-62). Editorial pages default to Ft1, modern-minimal to Ft2, atmospheric to Ft5, playful to Ft8, terminal to Ft4, and docs/reference to Ft3.

2. Apply the diversification rule. Consecutive Hallmark builds in the same project must not repeat the same footer archetype (lines 64-66). If the default would be reused, select an acceptable alternative from the routing table. For example, modern-minimal pages can alternatively use Ft1, Ft5, Ft6, Ft7, or Ft8.

3. Match visual and tonal requirements. Review each archetype's structural voice to align with the brief. Heavy-content editorial pages demand Ft1's quiet authority, while lead-capture landing pages require Ft7's form-first approach.

4. State the decision in the macrostructure stamp. Before writing markup, record your choice in the CSS comment block: /* Hallmark · macrostructure: Bento Grid · Ft5 Statement archetype · ... */.

5. Implement the markup. Copy the HTML snippet from the specific archetype file (e.g., ft1-mast-headed.md) and adapt the content (word-mark, links, tagline) to your project.

Summary

• Hallmark defines eight footer archetypes (Ft1–Ft8) documented in the Component Cookbook under the "Footers" section.
• Each archetype corresponds to specific page genres: editorial (Ft1), modern-minimal (Ft2), atmospheric (Ft5), playful (Ft8), terminal (Ft4), and docs/reference (Ft3).
• The diversification rule (lines 64-66 in skills/hallmark/references/component-cookbook.md) mandates that consecutive builds must not reuse the same archetype.
• Selection requires checking the routing table (lines 53-62), matching visual requirements, and documenting the choice in the macrostructure stamp.
• Implementation uses semantic HTML classes specific to each archetype (e.g., foot-mast, foot-statement, foot-marquee).

Frequently Asked Questions

What happens if I use the same footer archetype on consecutive pages?

The diversification rule in skills/hallmark/references/component-cookbook.md (lines 64-66) explicitly prohibits reusing the same footer archetype across consecutive builds in a project. This prevents visual monotony and ensures each page feels distinct. If the genre-default would cause a repeat, you must select an acceptable alternative from the routing table.

How do I know which footer archetype is the default for my page type?

The routing table in skills/hallmark/references/component-cookbook.md (lines 53-62) maps each genre to its default footer. Editorial pages default to Ft1 (Mast-headed), modern-minimal to Ft2 (Inline Rule), atmospheric to Ft5 (Statement), playful to Ft8 (Marquee Scroll), terminal to Ft4 (Dense Typographic), and docs/reference to Ft3 (Index Style).

Can I customize the content within a footer archetype?

Yes. While you must preserve the structural HTML classes (e.g., foot-statement, wordmark, tagline) to maintain the visual integrity of the archetype, you should replace placeholder content with your project's specific word-mark, links, copyright dates, and taglines. The component files (e.g., ft1-mast-headed.md) provide the markup template.

Where does the footer archetype fit in the overall page structure?

According to skills/hallmark/references/macrostructures.md (lines 19-22), each macrostructure implies both a navigation and footer archetype. The footer selection works in conjunction with the page's overall shape (macrostructure) to create a coherent visual system from header to footer.

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