# Hallmark Navigation Archetype Options N1-N13: Complete Component Catalog

> Explore Hallmark's 14 navigation archetypes N1-N13. Discover component catalog details for top-level page chrome in this comprehensive guide.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: api-reference
- Published: 2026-08-02

---

**Hallmark defines 14 distinct navigation archetypes (N1 through N13, including N1a and N1b variants) that determine the top-level chrome of every generated page, with each archetype implemented as a separate markdown component in the `skills/hallmark/references/components/` directory.**

The **Nutlope/hallmark** repository maintains a fixed catalog of navigation archetypes that shape the header chrome of every generated page. These archetypes, identified by codes **N1** through **N13** (plus N1a and N1b variants), are documented in the Navigation section of [`skills/hallmark/references/component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/component-cookbook.md) and control everything from floating pills to terminal-style command bars. Understanding Hallmark's navigation archetype options N1-N13 is essential for configuring page macrostructures and ensuring visual diversity across generated outputs.

## The 14 Navigation Archetypes

The complete navigation catalog includes fourteen distinct styles, each defined in its own component file under `skills/hallmark/references/components/`. These range from minimal wordmark bars to complex mega-menu panels.

### Standard Header Patterns

- **N1 (N1a) — Wordmark + 2 Links**: A minimal SaaS bar featuring a wordmark on the left and two text links on the right. Defined in [`skills/hallmark/references/components/n1-wordmark-2-links.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/n1-wordmark-2-links.md).

- **N1b — SaaS Three-Section (Canonical)**: The standard SaaS layout with wordmark left, a centered cluster of 4-6 links, and sign-in plus filled CTA on the right. Defined in [`skills/hallmark/references/components/n1b-saas-three-section.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/n1b-saas-three-section.md).

- **N7 — Brutal Slab**: A heavy full-width bar with a solid bottom border, all-caps wordmark, and dense link cluster. Defined in [`skills/hallmark/references/components/n7-brutal-slab.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/n7-brutal-slab.md).

- **N9 — Edge-Aligned Minimal**: Wordmark flush left, CTA flush right, with vast empty space between—creating a minimalist asymmetric layout. Defined in [`skills/hallmark/references/components/n9-edge-aligned-minimal.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/n9-edge-aligned-minimal.md).

### Floating and Detached Navigation

- **N2 — Floating Chip**: A small fixed chip containing a wordmark and single action button that hovers outside the document flow. Defined in [`skills/hallmark/references/components/n2-floating-chip.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/n2-floating-chip.md).

- **N5 — Floating Pill**: A rounded, full-width pill detached from page edges with a soft-blur backdrop and optional CTA. Defined in [`skills/hallmark/references/components/n5-floating-pill.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/n5-floating-pill.md).

- **N10 — Floating-on-Scroll Morph**: A sticky bar that morphs into a floating pill after the user scrolls past a defined threshold. Defined in [`skills/hallmark/references/components/n10-floating-on-scroll-morph.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/n10-floating-on-scroll-morph.md).

### Specialized Layout Styles

- **N3 — Side Rail**: A thin vertical strip on the left edge containing a rotated wordmark and dot-indicators. Defined in [`skills/hallmark/references/components/n3-side-rail.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/n3-side-rail.md).

- **N4 — Hidden Behind ⌘K**: No visible nav bar; navigation is accessed exclusively through a command-palette triggered by ⌘K. Defined in [`skills/hallmark/references/components/n4-hidden-behind-k.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/n4-hidden-behind-k.md).

- **N6 — Newspaper Masthead**: A full-width header with a centered wordmark, optional issue line, and link row below—resembling traditional print mastheads. Defined in [`skills/hallmark/references/components/n6-newspaper-masthead.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/n6-newspaper-masthead.md).

- **N8 — Terminal Command**: A CLI-style navigation displaying a prompt and command-flag "links" (e.g., `> studio --catalog`). Defined in [`skills/hallmark/references/components/n8-terminal-command.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/n8-terminal-command.md).

### Interactive and Complex Patterns

- **N11 — Mega-Menu Panel**: A top bar whose triggers open a full-width multi-column panel containing icons, titles, and descriptions. Defined in [`skills/hallmark/references/components/n11-mega-menu.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/n11-mega-menu.md).

- **N12 — Announcement Banner + Retracting Nav**: A colored promo banner stacked above the real navigation; the banner retracts automatically on scroll. Defined in [`skills/hallmark/references/components/n12-banner-retract.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/n12-banner-retract.md).

- **N13 — Inline ⌘K Search Pill**: A visible search pill embedded in the bar (showing placeholder text and ⌘K hint) that opens a spotlight modal. Defined in [`skills/hallmark/references/components/n13-inline-cmdk-pill.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/n13-inline-cmdk-pill.md).

## How Hallmark Selects Navigation Archetypes

According to the routing tables in [`skills/hallmark/references/structure.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/structure.md), Hallmark automatically assigns a **default nav** based on the page's genre. For example, the *atmospheric* genre defaults to **N5 (Floating Pill)**, while other genres map to different archetypes based on their structural requirements.

The system enforces diversification through rules defined in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md). Builders must vary navigation archetypes across consecutive runs—no two consecutive outputs should reuse the same nav archetype unless the project brief explicitly requires consistency. This prevents "cookie-cutter" outputs and ensures each generated page has distinct architectural DNA.

## Configuring Navigation Archetypes

You can override automatic selection by specifying an archetype in your design configuration or via CLI commands.

### YAML Configuration

Lock a specific navigation style in your [`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md) file:

```yaml
nav:
  archetype: N5          # Forces the Floating pill style

  knobs:
    width: max-720px
    backdrop: blur
    anchor: top-centred

```

### CLI Usage

Force a specific navigation archetype when using the Hallmark redesign verb:

```bash

# Using the Hallmark CLI to force N12 (Banner + Retracting)

hallmark redesign <target> --nav N12

```

### Generated HTML Structure

When Hallmark generates a page using **N2 (Floating Chip)**, it produces minimal markup similar to:

```html
<div class="nav nav--floating-chip">
  <span class="wordmark">Hallmark</span>
  <button class="chip">Try it</button>
</div>

```

## Summary

- **Hallmark navigation archetypes N1-N13** comprise 14 distinct header patterns ranging from minimal wordmark bars to complex mega-menus and CLI-style interfaces.
- Each archetype is implemented as a separate markdown component in `skills/hallmark/references/components/` (e.g., [`n5-floating-pill.md`](https://github.com/Nutlope/hallmark/blob/main/n5-floating-pill.md) for N5).
- The master catalog is documented in [`skills/hallmark/references/component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/component-cookbook.md) under the Navigation section.
- Hallmark automatically selects default navigation based on page genre but allows override via [`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md) YAML configuration or CLI `--nav` flags.
- The system enforces archetype diversification across builds to prevent repetitive outputs, as specified in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md).

## Frequently Asked Questions

### What is the difference between N1, N1a, and N1b?

**N1 (also labeled N1a)** provides a minimal SaaS bar with a wordmark and exactly two text links, while **N1b** represents the canonical SaaS three-section layout with wordmark left, a centered cluster of 4-6 navigation links, and authentication buttons plus CTA on the right. N1b is generally recommended for standard SaaS applications requiring more navigation density.

### How do I configure a specific navigation archetype in Hallmark?

You can configure navigation archetypes in the [`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md) YAML file under the `nav` key by setting `archetype: N5` (or any valid N1-N13 code), or via the CLI using `hallmark redesign <target> --nav N12`. Additional styling "knobs" like `width`, `backdrop`, and `anchor` can be specified in the YAML configuration to customize the archetype's rendering.

### Why does Hallmark enforce navigation diversification?

According to [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md), Hallmark enforces a diversification rule that prevents the same navigation archetype from appearing in consecutive generated outputs. This constraint ensures visual variety across builds and prevents "hallmark slop"—repetitive, cookie-cutter designs—unless the project brief explicitly requires consistency.

### Which navigation archetype is best for modern SaaS applications?

**N1b (SaaS Three-Section)** serves as the canonical choice for SaaS applications, providing a balanced layout with wordmark branding, central navigation links, and clear call-to-action placement. For more minimal or atmospheric applications, **N5 (Floating Pill)** or **N9 (Edge-Aligned Minimal)** offer contemporary alternatives, while **N12** suits products requiring prominent announcement banners.