# I4 Navigation and the 8 Footer Archetypes in Hallmark: A Complete Technical Guide
> Explore Hallmark's 14 navigation patterns and 8 footer archetypes. Discover the advanced I4 navigation, a technical guide for complex sites. Learn best practices now.
- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: deep-dive
- Published: 2026-07-24
---
**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`](https://github.com/Nutlope/hallmark/blob/main/site/css/components.css) and [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/site/css/components.css)** — Contains the `.nav-i4` class definition, responsive breakpoint styles, and the hamburger menu animations.
- **[`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js)** — Implements the sticky-header scroll logic, keyboard navigation handlers, and mobile menu toggle functionality.
- **[`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/footer.md) and implemented via CSS classes `.footer-f1` through `.footer-f8` in [`site/css/components.css`](https://github.com/Nutlope/hallmark/blob/main/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
```html
```
### F3 Social Footer Markup
```html
```
## 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`](https://github.com/Nutlope/hallmark/blob/main/site/css/components.css) for styling, [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) for interaction logic, and [`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js)**, while documentation for the footer archetypes resides in **[`skills/hallmark/references/footer.md`](https://github.com/Nutlope/hallmark/blob/main/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.