Hallmark's 14 Navigation Archetypes: A Complete Guide Beyond the AI Default

Hallmark provides 14 navigation archetypes (coded N1a through N13) that replace the AI's default Minimal 2-link bar, ranging from floating pills to terminal-inspired designs.

Hallmark is an open-source AI website builder by Hassan El Mghari that structures every page around composable component archetypes. While the AI typically defaults to the simplest navigation option, the system actually contains a curated vocabulary of 13 additional navigation patterns. These archetypes live in the project's Component Cookbook and can be selected to match any genre, theme, or user experience goal.

Where Hallmark's Navigation Archetypes Are Defined

The authoritative source for all navigation patterns is skills/hallmark/references/component-cookbook.md. This file catalogs fifty component archetypes across multiple categories, with navigation receiving dedicated codes in the N-series.

According to the diversification rule documented in the cookbook, "within a single page, no two sections should use the same archetype." This principle extends across builds—consecutive Hallmark projects should pick different navigation archetypes to ensure visual variety.

The Complete List of 14 Navigation Archetypes

The following table reproduces the navigation section from the Component Cookbook, lines 9-26:

Code	Name	Description
N1a	Minimal 2-link	A tiny top-bar with two links, often used for simple sites.
N1b	SaaS three-section	Standard SaaS navigation with logo, three links, and a call-to-action button.
N2	Floating chip	A floating "chip" style navigation element, usually circular, that hovers over content.
N3	Side-rail	A vertical navigation bar fixed to the side of the viewport.
N4	Hidden ⌘K	A hidden command-palette style navigation that appears on Ctrl+K.
N5	Floating pill	A pill-shaped floating navigation element, often with rounded corners.
N6	Masthead	A full-width top navigation bar with logo and links.
N7	Brutal slab	A heavy, blocky navigation bar reminiscent of brutalist design.
N8	Terminal	A terminal-inspired navigation bar with monospaced styling.
N9	Edge-aligned	Navigation items aligned tightly to the left or right edge of the viewport.
N10	Scroll-morph	A navigation bar that morphs (size, position, or opacity) in response to scroll.
N11	Mega-menu	A large dropdown menu that can house many links and visual groups.
N12	Banner + retract	A banner-style navigation that retracts or collapses after interaction.
N13	Inline ⌘K-pill	An inline pill-shaped command-palette trigger that appears within the page flow.

Structural Sketches: How Each Archetype Renders

The Component Cookbook provides minimal DOM + CSS sketches for each archetype. Below are the structural patterns that Hallmark uses when generating navigation components.

Minimal Patterns (N1a, N1b)

<!-- N1a – Minimal 2-link -->
<nav class="flex justify-center gap-4 py-2">
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

<!-- N1b – SaaS three-section -->
<nav class="flex items-center justify-between py-3">
  <a class="logo" href="/">Brand</a>
  <div class="flex gap-6">
    <a href="/features">Features</a>
    <a href="/pricing">Pricing</a>
    <a href="/contact">Contact</a>
  </div>
  <button class="cta">Get started</button>
</nav>

Floating Patterns (N2, N5)

<!-- N2 – Floating chip -->
<div class="fixed top-4 right-4 bg-white rounded-full shadow-md p-2">
  <a href="/">Home</a>
</div>

<!-- N5 – Floating pill -->
<div class="fixed bottom-4 left-1/2 -translate-x-1/2 bg-blue-600 text-white rounded-full px-4 py-2 shadow">
  <a href="/">Menu</a>
</div>

Fixed and Structural Patterns (N3, N6)

<!-- N3 – Side-rail -->
<nav class="fixed left-0 top-0 h-full w-48 bg-gray-100 flex flex-col gap-4 p-4">
  <a href="/">Home</a>
  <a href="/services">Services</a>
  <a href="/contact">Contact</a>
</nav>

<!-- N6 – Masthead -->
<header class="w-full bg-white shadow">
  <div class="container mx-auto flex items-center justify-between py-4">
    <a class="logo" href="/">Brand</a>
    <nav class="flex gap-6">
      <a href="/about">About</a>
      <a href="/blog">Blog</a>
      <a href="/contact">Contact</a>
    </nav>
  </div>
</header>

Command-Palette Patterns (N4, N13)

// N4 – Hidden ⌘K implementation
document.addEventListener('keydown', (e) => {
  if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
    document.getElementById('cmd-palette').classList.toggle('hidden');
  }
});

<!-- N13 – Inline ⌘K-pill -->
<p class="text-center">
  Press <kbd class="bg-gray-200 rounded px-1">⌘K</kbd> to search.
</p>

Genre-Specific Patterns (N7, N8)

<!-- N7 – Brutal slab -->
<nav class="bg-black text-white py-3 border-b-4 border-white">
  <div class="container mx-auto flex justify-between font-bold tracking-tight">
    <a href="/">BRAND</a>
    <div class="flex gap-4">
      <a href="/work">WORK</a>
      <a href="/contact">CONTACT</a>
    </div>
  </div>
</nav>

<!-- N8 – Terminal -->
<nav class="bg-gray-900 text-green-400 font-mono py-2 px-4">
  <span class="mr-2">$</span><a href="/">home</a>
  <span class="text-gray-500"> ~/projects</span>
</nav>

Interactive Patterns (N10, N12)

// N10 – Scroll-morph behavior
const nav = document.getElementById('scroll-nav');
window.addEventListener('scroll', () => {
  const scrollY = window.scrollY;
  nav.style.transform = scrollY > 50 ? 'translateY(-100%)' : 'translateY(0)';
  nav.style.opacity = scrollY > 100 ? '0.9' : '1';
});

<!-- N12 – Banner + retract -->
<header class="bg-blue-600 text-white py-2 text-center" id="banner">
  <span>Special Offer – <a href="/promo" class="underline">Learn more</a></span>
  <button onclick="document.getElementById('banner').remove()" 
          class="ml-4 bg-white text-blue-600 rounded px-2">
    Dismiss
  </button>
</header>

Complex Patterns (N9, N11)

<!-- N9 – Edge-aligned -->
<nav class="flex justify-between px-4 py-2">
  <div class="flex gap-4">
    <a href="/">Home</a>
    <a href="/about">About</a>
  </div>
  <div class="flex gap-4">
    <a href="/login">Login</a>
    <a href="/signup">Sign up</a>
  </div>
</nav>

<!-- N11 – Mega-menu -->
<nav class="relative bg-white shadow">
  <ul class="flex gap-6 p-4">
    <li class="group">
      <a href="#">Products</a>
      <div class="absolute left-0 top-full hidden group-hover:grid grid-cols-3 gap-4 bg-gray-100 p-4 w-[600px]">
        <div>
          <h4>Category A</h4>
          <a href="/product-a1">Product A1</a>
          <a href="/product-a2">Product A2</a>
        </div>
        <!-- Additional columns -->
      </div>
    </li>
  </ul>
</nav>

How Navigation Archetypes Are Selected in Hallmark

The selection process is documented in skills/hallmark/SKILL.md. Hallmark's design flow expects the system to pick a navigation archetype as part of the three-part DNA stamp:

1. Macrostructure (page layout template)
2. Navigation archetype (N1a–N13)
3. Footer archetype (Ft1–Ft4 and others)

The AI typically defaults to N1a (Minimal 2-link) for speed and simplicity, but the full Component Cookbook enables explicit selection of alternatives based on:

• Genre: SaaS sites lean toward N1b or N6; creative portfolios use N7 or N8
• Theme: Dark themes pair well with N4 or N8; minimal themes use N2 or N5
• Interaction needs: Search-heavy sites need N4 or N13; content-heavy sites need N11

Key Implementation Files

File	Purpose
skills/hallmark/references/component-cookbook.md	Source of truth for all 14 navigation archetypes
skills/hallmark/SKILL.md	Design flow documentation for archetype selection
skills/hallmark/references/structure.md	Theme-specific defaults and acceptable alternates
site/js/main.js	Runtime behavior for interactive patterns (N4, N10, N12, N13)
site/css/base.css	Token definitions that style each archetype

Summary

• Hallmark defines 14 navigation archetypes (N1a through N13) in its Component Cookbook, not just the AI's default Minimal 2-link.
• The archetypes range from simple top bars to complex command palettes, each with specific visual and interaction characteristics.
• N1a is the AI default; N1b–N13 provide alternatives for SaaS, brutalist, terminal, and interactive experiences.
• Selection follows the diversification rule—no two sections on a page share archetypes, and consecutive builds should vary selections.
• Implementation combines the structural sketches from component-cookbook.md with runtime JavaScript in site/js/main.js and design tokens in site/css/.

Frequently Asked Questions

How do I override the AI's default navigation choice in Hallmark?

Specify the desired archetype code (N1b, N7, etc.) in your prompt or design brief. The system references component-cookbook.md to validate the selection and applies the corresponding structural sketch from the navigation table.

What is the difference between N4 Hidden ⌘K and N13 Inline ⌘K-pill?

N4 is a full-screen overlay triggered by keyboard shortcut, completely hidden until activated. N13 displays a visible pill-shaped trigger inline with page content, making the command palette discoverable without keyboard knowledge. Both use the same ⌘K JavaScript handler defined in site/js/main.js.

Which navigation archetype works best for mobile-responsive designs?

N5 (Floating pill) and N2 (Floating chip) adapt naturally to small viewports since they detach from document flow. N3 (Side-rail) transforms into a slide-out drawer on mobile. The Component Cookbook's structural sketches include responsive breakpoints handled by the CSS token system.

Can I combine multiple navigation archetypes on one page?

The diversification rule explicitly prohibits this—"within a single page, no two sections should use the same archetype." However, you can pair a primary navigation (N1b, N6) with a secondary N12 (Banner + retract) for announcements, as these serve different functional purposes.

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