I4 Navigation and the 8 Footer Archetypes in Hallmark: A Complete Technical Guide

Hallmark's design system defines 14 navigation patterns and 8 footer archetypes (F1–F8), with the I4 navigation representing the most comprehensive, feature-rich sticky header implementation for complex site structures.

The Nutlope/hallmark repository provides a systematic approach to page-level structures through standardized navigation and footer archetypes. These patterns ensure consistent layout, accessibility, and responsive behavior across web projects by codifying best practices into reusable CSS classes and JavaScript behaviors. This guide examines the I4 navigation archetype—the most feature-rich of the 14 available patterns—and all eight footer variants (F1 through F8) as implemented in the source code.

Understanding Hallmark's Navigation Archetypes

While the Hallmark design system specifies 14 distinct navigation archetypes ranging from minimal to complex, the I4 archetype serves as the primary implementation for enterprise-grade websites requiring persistent, multi-level navigation. Unlike simpler patterns, I4 provides a full-screen overlay system that maintains content visibility while offering extensive menu hierarchy, search integration, and language switching capabilities.

Deep Dive: The I4 Navigation Archetype

The I4 navigation archetype is the "full-screen" navigation model designed for sites that need a sticky, multi-level menu while keeping the main content visible. According to the source code in site/css/components.css and site/js/main.js, this pattern implements several critical UX features.

Core Characteristics of I4

The I4 archetype is defined by six primary technical characteristics:

• Sticky top bar — The navigation bar remains fixed at the viewport top via CSS positioning, giving users constant access to primary links regardless of scroll position.
• Horizontal hierarchy — Primary links display horizontally in the top bar, with sub-menus expanding vertically or as dropdowns on hover/focus events.
• Integrated search and language toggle — A compact search field and optional language selector embed directly in the bar, keeping the UI uncluttered while maintaining functionality.
• Responsive collapse — On narrow viewports, the bar collapses to a hamburger icon that triggers a full-screen overlay preserving the same menu hierarchy.
• Keyboard accessibility — All interactive elements are reachable via Tab/Shift-Tab navigation, with Arrow-key support for sub-menu traversal.
• ARIA-rich markup — The implementation uses proper role="navigation" and aria-expanded attributes to inform assistive technologies of state changes.

Source Code Implementation

The I4 pattern is implemented across three core files in the repository:

• site/css/components.css — Contains the .nav-i4 class definition, responsive breakpoint styles, and the hamburger menu animations.
• site/js/main.js — Implements the sticky-header scroll logic, keyboard navigation handlers, and mobile menu toggle functionality.
• site/index.html — Provides the semantic HTML markup structure demonstrating proper ARIA labeling and nested list hierarchy.

The 8 Footer Archetypes (F1–F8)

Hallmark provides eight distinct footer layouts, each tuned for specific information hierarchy or branding goals. These are documented in skills/hallmark/references/footer.md and implemented via CSS classes .footer-f1 through .footer-f8 in site/css/components.css.

F1 – Minimal

The F1 archetype suits simple sites requiring only copyright notices and essential legal links. It features reduced height, left-aligned text, and an optional small logo placement.

F2 – Site-Map

The F2 archetype targets large websites where quick navigation to major sections is required. It displays a multi-column list of links grouped by category, maximizing information density.

F3 – Social

The F3 archetype focuses on brands emphasizing community engagement. It features a prominent row of social media icons with an optional newsletter sign-up field above the legal text.

F4 – Contact

The F4 archetype serves business sites needing to surface contact information. It includes dedicated blocks for phone numbers, addresses, map thumbnails, and direct links to contact forms.

F5 – Newsletter

The F5 archetype optimizes for content platforms driving email subscriptions. It prominently displays an inline sign-up field with brief descriptive text and privacy notice links.

F6 – Legal

The F6 archetype addresses regulatory-heavy verticals such as finance or healthcare. It provides extensive legal link sections, disclaimer text, and version number displays in a structured format.

F7 – Brand + CTA

The F7 archetype supports campaign-focused pages requiring strong brand statements. It features a large brand logo, tagline, primary call-to-action button, and minimal supplementary links.

F8 – Extended

The F8 archetype combines multiple patterns for complex sites. It uses a multi-row layout: top row for site-map links, middle row for social icons, and bottom row for detailed contact information.

Implementation Examples

Below are production-ready code snippets demonstrating the I4 navigation and F3 Social footer implementations.

I4 Navigation Markup

<header class="nav-i4" role="navigation" aria-label="Main navigation">
  <div class="nav-brand">
    <a href="/" aria-label="Hallmark Home">Hallmark</a>
  </div>
  
  <nav class="nav-primary">
    <ul>
      <li><a href="/about">About</a></li>
      <li><a href="/features">Features</a></li>
      <li><a href="/pricing">Pricing</a></li>
      <li><a href="/blog">Blog</a></li>
    </ul>
  </nav>
  
  <div class="nav-actions">
    <input type="search" placeholder="Search…" aria-label="Search site">
    <button class="lang-switch" aria-label="Switch language">EN</button>
    <button class="nav-toggle" aria-expanded="false" aria-label="Toggle navigation menu">
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
      </svg>
    </button>
  </div>
</header>

F3 Social Footer Markup

<footer class="footer-f3" role="contentinfo">
  <div class="footer-brand">
    <a href="/" aria-label="Hallmark Home">Hallmark</a>
  </div>
  
  <div class="footer-social">
    <a href="https://twitter.com/hallmark" aria-label="Twitter">🐦</a>
    <a href="https://github.com/Nutlope/hallmark" aria-label="GitHub">🐙</a>
    <a href="https://instagram.com/hallmark" aria-label="Instagram">📸</a>
  </div>
  
  <div class="footer-legal">
    <a href="/privacy">Privacy Policy</a> •
    <a href="/terms">Terms of Service</a>
    <p>&copy; 2024 Hallmark. All rights reserved.</p>
  </div>
</footer>

Summary

• Hallmark defines 14 navigation archetypes, with I4 being the most comprehensive pattern featuring sticky positioning, responsive hamburger menus, and full keyboard accessibility.
• Eight footer archetypes (F1–F8) provide tailored layouts for specific use cases ranging from minimal copyright notices (F1) to extended multi-row combinations (F8).
• Core implementation files include site/css/components.css for styling, site/js/main.js for interaction logic, and site/index.html for semantic markup examples.
• Accessibility is built-in through ARIA attributes, keyboard navigation support, and responsive design patterns that maintain usability across device types.

Frequently Asked Questions

What is the I4 navigation archetype in Hallmark?

The I4 navigation archetype is Hallmark's most feature-rich navigation pattern, designed for complex websites requiring persistent access to multi-level menus, integrated search functionality, and language switching. It implements a sticky header that remains fixed during scroll, collapses to a hamburger menu on mobile devices, and supports full keyboard navigation with proper ARIA labeling as defined in site/css/components.css.

How many footer archetypes does Hallmark support?

Hallmark supports eight distinct footer archetypes labeled F1 through F8. These range from the minimal F1 (copyright and legal links only) to the comprehensive F8 (combining site-maps, social links, and contact information). Each archetype is implemented as a specific CSS class (.footer-f1 through .footer-f8) in the design system.

Where are the navigation and footer styles defined in the Hallmark repository?

All navigation and footer styles are defined in site/css/components.css, which contains the .nav-i4 class for the I4 navigation pattern and .footer-f1 through .footer-f8 classes for the footer variants. Behavioral JavaScript for the I4 sticky header and mobile toggle is located in site/js/main.js, while documentation for the footer archetypes resides in skills/hallmark/references/footer.md.

Which footer archetype should I use for a marketing landing page?

For marketing landing pages, the F7 (Brand + CTA) or F3 (Social) archetypes are most appropriate. F7 provides a large brand logo, tagline, and prominent call-to-action button that drive conversion goals, while F3 emphasizes community engagement through social media links and optional newsletter sign-up fields. Both maintain clean visual hierarchy without the information density of site-map or legal-heavy alternatives.

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