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

> Discover Hallmark's 14 unique navigation archetypes N1a-N13. Move beyond AI defaults and explore innovative designs from floating pills to terminal styles.

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

---

**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`](https://github.com/Nutlope/hallmark/blob/main/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)

```html
<!-- 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)

```html
<!-- 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)

```html
<!-- 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)

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

```

```html
<!-- 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)

```html
<!-- 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)

```javascript
// 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';
});

```

```html
<!-- 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)

```html
<!-- 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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/component-cookbook.md) | Source of truth for all 14 navigation archetypes |
| [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) | Design flow documentation for archetype selection |
| [`skills/hallmark/references/structure.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/structure.md) | Theme-specific defaults and acceptable alternates |
| [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) | Runtime behavior for interactive patterns (N4, N10, N12, N13) |
| [`site/css/base.css`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/component-cookbook.md) with runtime JavaScript in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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.