api-reference

Hallmark Navigation Archetype Options N1-N13: Complete Component Catalog

August 2, 2026 Nutlope/hallmark ↗

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 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

Floating and Detached Navigation

Specialized Layout Styles

Interactive and Complex Patterns

How Hallmark Selects Navigation Archetypes

According to the routing tables in 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. 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 file:

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:


# 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:

<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 for N5).
  • The master catalog is documented in 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 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.

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 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, 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.

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 →