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

> Discover the single colophon archetype powering Hallmark's 8 theme footers. Understand the rules behind this consistent footer pattern to streamline your web design.

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

---

**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`](https://github.com/Nutlope/hallmark/blob/main/site/index.html) and instantiated via JavaScript in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) (lines 71-90) explicitly maps every theme's footer slot to `"colophon"`:

```javascript
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:

```javascript
// 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:

```html
<!-- 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`](https://github.com/Nutlope/hallmark/blob/main/site/index.html) (lines 85-125) | Defines the `footer-colophon` template markup |
| [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) (lines 71-90) | `ARCHETYPES` object mapping all themes to `"colophon"` |
| [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) (lines 74-88) | `swapArchetypes()` cloning and injection logic |
| [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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.