how-to-guide

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

August 5, 2026 Nutlope/hallmark ↗

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 repository codifies these patterns to help designers break free from the repetitive layouts that mark AI-generated interfaces.

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 with individual specifications stored in the components/ directory.

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

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

<!-- 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/skills/hallmark/references/components/n5-floating-pill.md)

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

<!-- 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/skills/hallmark/references/components/n1b-saas-three-section.md)

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
Ft2 Inline single-line rule All credits compressed to one horizontal line 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
Ft4 Dense typographic colophon Credits as compact textual block components/ft4-dense-typographic.md
Ft5 Statement Large closing sentence as focal element components/ft5-statement.md
Ft6 Letter close Personal sign-off format components/ft6-letter-close.md
Ft7 Newsletter first Email form as dominant footer element components/ft7-newsletter-first.md
Ft8 Marquee scroll Infinite horizontal tagline animation components/ft8-marquee-scroll.md

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

<!-- 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/skills/hallmark/references/components/ft5-statement.md)

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

<!-- 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/skills/hallmark/references/components/ft2-inline-rule-single-line.md)

The archetype selection process follows a strict hierarchy defined in 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 routing tables
editorial N6 Ft1 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, 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 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.

  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.

File Purpose
[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/skills/hallmark/references/macrostructures.md) Macrostructure definitions with implied default archetypes
[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/skills/hallmark/references/responsive.md) Responsiveness constraints for navigation links and footer affordances
[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.

  • 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 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 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 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. These constraints apply universally across all archetypes regardless of genre selection.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:
curl -s "https://instagit.com/install.md"
Works with
Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →