# Hallmark Navigation and Footer Archetypes: A Complete Guide to N1-N13 and Ft1-Ft8

> Explore Hallmark navigation and footer archetypes N1-N13 and Ft1-Ft8. Understand UI patterns and avoid AI-generated designs with this comprehensive guide.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: how-to-guide
- Published: 2026-08-05

---

**Hallmark provides 13 navigation archetypes (N1-N13) and 8 footer archetypes (Ft1-Ft8) that must be deliberately selected and varied across builds to avoid recognizable AI-generated UI patterns.**

Every Hallmark page is constructed from **macrostructures**—page-level shapes like hero sections, feature grids, and CTAs—that automatically require both a **navigation archetype** and a **footer archetype**. These archetypes form the structural "chrome" that gives each page its distinctive fingerprint. The [Nutlope/hallmark](https://github.com/Nutlope/hallmark) repository codifies these patterns to help designers break free from the repetitive layouts that mark AI-generated interfaces.

## What Are Navigation and Footer Archetypes?

Archetypes in Hallmark are predefined structural patterns rather than visual themes. Each archetype specifies a distinct arrangement of elements—how the wordmark sits, where links cluster, whether the navigation floats or fixes, and how the footer closes the page. The system exists to enforce **structural variety**; no two consecutive Hallmark builds may share the same navigation or footer archetype.

The complete archetype inventory lives in [`component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/component-cookbook.md) with individual specifications stored in the `components/` directory.

## Navigation Archetypes (N1-N13)

Hallmark defines thirteen distinct navigation patterns, ranging from minimal wordmarks to complex command-palette interfaces.

| Code | Name | Description | Source File |
|------|------|-------------|-------------|
| `N1` / `N1a` | Wordmark + 2 minimal links | The most minimal viable nav; explicitly deprioritized | [`components/n1-wordmark-2-links.md`](https://github.com/Nutlope/hallmark/blob/main/components/n1-wordmark-2-links.md) |
| `N1b` | SaaS three-section bar | Canonical pattern: wordmark left, link cluster center, CTA right | [`components/n1b-saas-three-section.md`](https://github.com/Nutlope/hallmark/blob/main/components/n1b-saas-three-section.md) |
| `N2` | Floating chip | Fixed corner chip with compact actions | [`components/n2-floating-chip.md`](https://github.com/Nutlope/hallmark/blob/main/components/n2-floating-chip.md) |
| `N3` | Side-rail | Vertical strip with rotated wordmark | [`components/n3-side-rail.md`](https://github.com/Nutlope/hallmark/blob/main/components/n3-side-rail.md) |
| `N4` | Hidden ⌘K | Navigation accessible only via command palette | [`components/n4-hidden-behind-k.md`](https://github.com/Nutlope/hallmark/blob/main/components/n4-hidden-behind-k.md) |
| `N5` | Floating pill | Detached rounded container with backdrop blur | [`components/n5-floating-pill.md`](https://github.com/Nutlope/hallmark/blob/main/components/n5-floating-pill.md) |
| `N6` | Newspaper masthead | Full-width masthead with issue date line | [`components/n6-newspaper-masthead.md`](https://github.com/Nutlope/hallmark/blob/main/components/n6-newspaper-masthead.md) |
| `N7` | Brutal slab | Heavy all-caps bar with 2px border | [`components/n7-brutal-slab.md`](https://github.com/Nutlope/hallmark/blob/main/components/n7-brutal-slab.md) |
| `N8` | Terminal command | CLI-style prompt as navigation interface | [`components/n8-terminal-command.md`](https://github.com/Nutlope/hallmark/blob/main/components/n8-terminal-command.md) |
| `N9` | Edge-aligned minimal | Wordmark left, single CTA right | [`components/n9-edge-aligned-minimal.md`](https://github.com/Nutlope/hallmark/blob/main/components/n9-edge-aligned-minimal.md) |
| `N10` | Floating-on-scroll morph | Bar transforms to pill on scroll | [`components/n10-floating-on-scroll-morph.md`](https://github.com/Nutlope/hallmark/blob/main/components/n10-floating-on-scroll-morph.md) |
| `N11` | Mega-menu panel | Dropdown panel with organized columns | [`components/n11-mega-menu.md`](https://github.com/Nutlope/hallmark/blob/main/components/n11-mega-menu.md) |
| `N12` | Banner + retracting nav | Promotional banner with hide-on-scroll navigation | [`components/n12-banner-retract.md`](https://github.com/Nutlope/hallmark/blob/main/components/n12-banner-retract.md) |
| `N13` | Inline ⌘K search pill | Command palette integrated as visible pill | [`components/n13-inline-cmdk-pill.md`](https://github.com/Nutlope/hallmark/blob/main/components/n13-inline-cmdk-pill.md) |

### Navigation Implementation Example: N5 Floating Pill

The **N5 floating pill** creates a detached navigation element that hovers above content with a semi-transparent backdrop:

```html
<!-- Navigation: N5 Floating pill -->
<nav class="nav nav-floating-pill bg-white/60 backdrop-blur-md rounded-full px-4 py-2">
  <a href="/" class="font-bold text-lg">Hallmark</a>
  <a href="/features" class="ml-4">Features</a>
  <a href="/contact" class="ml-4 btn-primary">Contact</a>
</nav>

```

*Source:* [[`components/n5-floating-pill.md`](https://github.com/Nutlope/hallmark/blob/main/components/n5-floating-pill.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/n5-floating-pill.md)

### Navigation Implementation Example: N1b SaaS Three-Section

The **N1b archetype** serves as the default for `modern-minimal` genre pages, establishing the familiar SaaS pattern:

```html
<!-- Navigation: N1b SaaS three-section (default for modern-minimal) -->
<header class="nav nav-saas-three-section bg-white shadow-md">
  <div class="container mx-auto flex items-center justify-between py-3">
    <a href="/" class="text-xl font-bold">Hallmark</a>
    <nav class="flex space-x-6">
      <a href="/product">Product</a>
      <a href="/pricing">Pricing</a>
      <a href="/docs">Docs</a>
    </nav>
    <a href="/signup" class="btn-primary">Sign up</a>
  </div>
</header>

```

*Source:* [[`components/n1b-saas-three-section.md`](https://github.com/Nutlope/hallmark/blob/main/components/n1b-saas-three-section.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/n1b-saas-three-section.md)

## Footer Archetypes (Ft1-Ft8)

Footers in Hallmark receive equal architectural attention, with eight distinct patterns that avoid the familiar four-column index layout.

| Code | Name | Description | Source File |
|------|------|-------------|-------------|
| `Ft1` | Mast-headed | Wordmark + tagline + small link row | [`components/ft1-mast-headed.md`](https://github.com/Nutlope/hallmark/blob/main/components/ft1-mast-headed.md) |
| `Ft2` | Inline single-line rule | All credits compressed to one horizontal line | [`components/ft2-inline-rule-single-line.md`](https://github.com/Nutlope/hallmark/blob/main/components/ft2-inline-rule-single-line.md) |
| `Ft3` | Index-style columns | 3-4 short columns of links—the classic AI pattern | [`components/ft3-index-style-category-list.md`](https://github.com/Nutlope/hallmark/blob/main/components/ft3-index-style-category-list.md) |
| `Ft4` | Dense typographic colophon | Credits as compact textual block | [`components/ft4-dense-typographic.md`](https://github.com/Nutlope/hallmark/blob/main/components/ft4-dense-typographic.md) |
| `Ft5` | Statement | Large closing sentence as focal element | [`components/ft5-statement.md`](https://github.com/Nutlope/hallmark/blob/main/components/ft5-statement.md) |
| `Ft6` | Letter close | Personal sign-off format | [`components/ft6-letter-close.md`](https://github.com/Nutlope/hallmark/blob/main/components/ft6-letter-close.md) |
| `Ft7` | Newsletter first | Email form as dominant footer element | [`components/ft7-newsletter-first.md`](https://github.com/Nutlope/hallmark/blob/main/components/ft7-newsletter-first.md) |
| `Ft8` | Marquee scroll | Infinite horizontal tagline animation | [`components/ft8-marquee-scroll.md`](https://github.com/Nutlope/hallmark/blob/main/components/ft8-marquee-scroll.md) |

### Footer Implementation Example: Ft5 Statement

The **Ft5 statement footer** closes pages with a memorable typographic moment:

```html
<!-- Footer: Ft5 Statement -->
<footer class="foot-stmt pt-8 border-t border-gray-200 text-center">
  <p class="text-2xl font-display mb-2">Design that whispers, not shouts.</p>
  <div class="flex justify-center space-x-4 text-sm text-gray-600">
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
    <span>&copy; 2026 Hallmark</span>
  </div>
</footer>

```

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

### Footer Implementation Example: Ft2 Inline Single-Line

The **Ft2 archetype** provides maximum compression for `modern-minimal` builds:

```html
<!-- Footer: Ft2 Inline single line (default for modern-minimal) -->
<footer class="foot-line border-t border-gray-200 py-2 text-sm text-center">
  <span>Hallmark • <a href="/privacy">Privacy</a> • <a href="/terms">Terms</a> • © 2026</span>
</footer>

```

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

## How Hallmark Selects Navigation and Footer Archetypes

The archetype selection process follows a strict hierarchy defined in [`component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/component-cookbook.md):

1. **Genre defaults** — Each genre (editorial, modern-minimal, atmospheric) declares its preferred nav and footer archetype in routing tables.

2. **Acceptable alternates** — The cookbook lists "also ok" archetypes when the default conflicts with content requirements.

3. **Diversification enforcement** — Across consecutive Hallmark runs, **no two pages may share the same navigation archetype or the same footer archetype**. This rule prevents the visual monotony that identifies AI-generated interfaces.

The default pairings for common genres:

| Genre | Default Nav | Default Footer | Location |
|-------|-------------|----------------|----------|
| modern-minimal | `N1b` | `Ft2` | [`component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/component-cookbook.md) routing tables |
| editorial | `N6` | `Ft1` | [`component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/component-cookbook.md) routing tables |

## Anti-Patterns: What to Avoid

Hallmark explicitly warns against two archetypes that have become synonymous with AI-generated design.

**Default away from N1a and Ft3.** The minimal two-link navigation (`N1a`) and the four-column index footer (`Ft3`) are the most recognized patterns in AI-generated UIs. According to [`anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/anti-patterns.md), these should appear only when content genuinely demands them—not as comfortable defaults.

The **Ft3 index-style footer** receives special scrutiny. Its predictable three-to-four-column organization of links has become a "failure mode" that Hallmark's diversification rule explicitly targets.

## Working with the Component Cookbook

The [`component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/component-cookbook.md) file serves as the single source of truth for archetype selection. When building a Hallmark page:

1. Identify your **genre** from the macrostructure specification.

2. Look up the **default nav** and **default footer** in the routing tables at the bottom of [`component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/component-cookbook.md).

3. Select an **acceptable alternate** if the default violates the diversification rule or clashes with your brief.

4. Record the chosen codes (`N5`, `Ft5`, etc.) in the **macrostructure stamp comment**—this tracking enables Hallmark to enforce variety across builds.

## Key Files for Navigation and Footer Archetypes

| File | Purpose |
|------|---------|
| [[`component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/component-cookbook.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/component-cookbook.md) | Master index of all 50 component archetypes with routing tables and diversification rules |
| `components/n*.md` | Individual navigation archetype specifications |
| `components/ft*.md` | Individual footer archetype specifications |
| [[`macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/macrostructures.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures.md) | Macrostructure definitions with implied default archetypes |
| [[`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) | Hallmark design philosophy including archetype selection principles |
| [[`responsive.md`](https://github.com/Nutlope/hallmark/blob/main/responsive.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/responsive.md) | Responsiveness constraints for navigation links and footer affordances |
| [[`anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/anti-patterns.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/anti-patterns.md) | Documentation of the AI-default footer problem |

## Summary

- **Hallmark provides 13 navigation archetypes (N1-N13)** and **8 footer archetypes (Ft1-Ft8)** as structured alternatives to generic UI patterns.

- **Every macrostructure requires both a nav and footer archetype**, selected from genre defaults or acceptable alternates listed in [`component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/component-cookbook.md).

- **The diversification rule prohibits repeating archetypes across consecutive builds**, forcing structural variety and breaking AI-generated UI fingerprints.

- **Avoid N1a and Ft3** unless content specifically demands them—these minimal nav and index footer patterns are the most recognized AI defaults.

- **Record archetype codes in macrostructure stamp comments** to track selections and maintain compliance with Hallmark's architectural constraints.

## Frequently Asked Questions

### How do I choose between navigation archetypes in Hallmark?

Consult the routing tables in [`component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/component-cookbook.md) for your selected genre, then verify your choice against the diversification rule—neither the navigation nor footer archetype may match your previous build. Acceptable alternates are listed when the default conflicts with your brief.

### Why does Hallmark restrict the use of Ft3 index-style footers?

The Ft3 archetype organizes links into predictable 3-4 columns, which [`anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/anti-patterns.md) identifies as the quintessential "AI-footer fingerprint." Hallmark's diversification rule exists specifically to eliminate this and similar repetitive patterns from generated pages.

### Can I modify archetype implementations or create custom ones?

Hallmark archetypes are fixed specifications stored in `components/*.md` files. While you can extend the system, the diversification rule and genre-based routing in [`component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/component-cookbook.md) expect known archetype codes. Custom implementations should document their archetype classification for tracking purposes.

### Where are responsive behaviors defined for Hallmark navigation and footers?

All non-negotiable responsiveness constraints—including how navigation links collapse and how footers maintain single-line affordances—are specified in [`responsive.md`](https://github.com/Nutlope/hallmark/blob/main/responsive.md). These constraints apply universally across all archetypes regardless of genre selection.