Hallmark Footer Archetypes: Understanding the Single "Colophon" Pattern Behind 8 Theme Footers

Hallmark uses one footer archetype—the "colophon"—for all 8 theme footers, with only the theme name changing between instances while structural rules remain identical.

The Hallmark design system by Nutlope implements a single footer archetype that powers every theme footer in the collection. Rather than maintaining 8 separate footer designs, the codebase uses template cloning and dynamic content injection to render theme-specific instances of the same "colophon" structure. This article breaks down the 8 footer archetype rules in Hallmark and how the colophon pattern works under the hood.

What Are the 8 Footer Archetypes in Hallmark?

Hallmark technically has 8 footer instances—one for each active theme in the showcase—but these are not 8 distinct archetypes. All 8 footers derive from the single "colophon" archetype, defined in site/index.html and instantiated via JavaScript in site/js/main.js.

The 8 footers appear across themes including specimen, newsprint, hum, garden, and others. Each footer instance follows identical structural rules, with only the "Currently in <Theme>" line changing to reflect the active theme.

The 8 Rules of the Hallmark Colophon Footer Archetype

The colophon footer archetype enforces these consistent design rules across all 8 theme instances:

1. Template ID Convention

The footer markup lives in <template id="footer-colophon"> in site/index.html. This template serves as the single source of truth for all footer instances.

2. Component Class Structure

Every footer instance uses the BEM-style class foot foot--colophon on its root element, ensuring consistent styling across themes.

3. Brand Masthead Display

The footer includes the Hallmark word-mark and version number as fixed branding elements. In site/index.html (lines 89-92), this appears as static markup that never changes between theme switches.

4. Dynamic Theme Indicator

The "Currently in <Theme>" line (line 97) pulls the theme name from data-theme-current-foot, which swapArchetypes() populates with the active theme value from the COPY object.

5. Catalog Statistics Block

Every footer displays identical catalog metrics: 20 themes · 21 macrostructures · 57 gates (lines 103-107). These static stats represent the full Hallmark system scope.

6. Navigation Links

The footer contains three fixed navigation elements (lines 111-115):

• Link to the GitHub repository
• Install command reference
• "Back to top" anchor link

7. Attribution Footnote

A fixed credits line acknowledges Together AI and notes the MIT license (lines 121-122), appearing identically in all 8 footer instances.

8. Dynamic Content Injection

The swapArchetypes() function in site/js/main.js (lines 74-88) handles cloning, interpolation, and DOM insertion. This rule ensures all 8 footers follow the same instantiation pipeline.

How Hallmark Maps Themes to the Colophon Archetype

The ARCHETYPES object in site/js/main.js (lines 71-90) explicitly maps every theme's footer slot to "colophon":

const ARCHETYPES = {
  specimen: { hero: "marquee", footer: "colophon" },
  newsprint: { hero: "split", footer: "colophon" },
  hum: { hero: "marquee", footer: "colophon" },
  garden: { hero: "split", footer: "colophon" },
  // ... all 20 themes map footer → "colophon"
};

This mapping confirms that no theme uses a different footer archetype—the colophon is universal.

The Footer Injection Process

When a user selects a theme, applyTheme(theme) triggers swapArchetypes(), which executes this flow:

// Simplified from site/js/main.js lines 78-89
function swapArchetypes(theme) {
  const archetype = ARCHETYPES[theme].footer; // always "colophon"
  const template = document.getElementById(`footer-${archetype}`);
  const clone = template.content.cloneNode(true);
  
  // Interpolate theme-specific copy
  clone.querySelector('[data-theme-current-foot]').textContent = COPY[theme].foot.current;
  
  // Inject into slot
  document.querySelector('[data-slot="footer"]').replaceChildren(clone);
}

The COPY object supplies theme-specific strings—primarily the theme name for the "Currently in..." line—while the HTML structure remains fixed.

Practical Implementation Example

To render any of the 8 footers programmatically:

<!-- Footer slot in your markup -->
<footer data-slot="footer"></footer>

<script type="module">
  import { applyTheme } from './site/js/main.js';
  
  // Renders the colophon footer with "Garden" theme indicator
  applyTheme('garden');
</script>

This call injects the colophon template with "Garden" populated in data-theme-current-foot, producing one of the 8 functionally identical footer instances.

Source Files for the Hallmark Footer Archetype

File	Purpose
site/index.html (lines 85-125)	Defines the footer-colophon template markup
site/js/main.js (lines 71-90)	ARCHETYPES object mapping all themes to "colophon"
site/js/main.js (lines 74-88)	swapArchetypes() cloning and injection logic
site/js/main.js (COPY object)	Theme-specific copy including footer text

Summary

• Hallmark has 1 footer archetype, not 8—the "colophon" pattern serves all themes
• 8 footer instances exist—one per theme, differentiated only by the injected theme name
• Template cloning enables consistency—footer-colophon template in site/index.html defines universal structure
• swapArchetypes() handles all instantiation—the same JavaScript function powers every footer render
• The ARCHETYPES object enforces the pattern—all 20 theme entries map footer to "colophon"

Frequently Asked Questions

Does Hallmark really have 8 different footer designs?

No. Hallmark has 8 footer instances but one footer archetype. The colophon structure never changes—only the theme name displayed in the "Currently in..." line varies between the 8 active theme footers.

Where is the Hallmark footer archetype defined?

The colophon footer archetype is defined in site/index.html within the <template id="footer-colophon"> element (lines 85-125). This template contains all structural markup, branding, navigation links, and attribution that appear in every footer instance.

How does Hallmark swap footers when changing themes?

The swapArchetypes() function in site/js/main.js (lines 74-88) clones the colophon template, interpolates theme-specific copy from the COPY object, and inserts the result into the [data-slot="footer"] element. This same function handles all 8 footer instances identically.

Can I create a custom footer archetype in Hallmark?

You would need to: (1) define a new <template> in site/index.html, (2) add an entry to the ARCHETYPES object mapping a theme's footer property to your new archetype name, and (3) ensure swapArchetypes() can locate and process your template. Currently, all themes use "colophon" exclusively.

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