Supported Footer Archetypes (Ft1‑Ft8) in Hallmark: A Complete Guide

Hallmark supports eight distinct footer archetypes labeled Ft1 through Ft8, each defining a specific layout-and-voice pattern for page closures—ranging from mast-headed brand strips to kinetic marquee scrolls.

The Nutlope/hallmark repository codifies these patterns as self-contained components with dedicated markup, styling, and behavioral guidance. Understanding these archetypes allows you to match footer design to content genre and user intent.

Hallmark treats footers as first-class architectural decisions, not afterthoughts. Each archetype (Ft1Ft8) encapsulates:

  • Visual structure — column count, rules, typography
  • Voice — brand-forward, personal, dense, playful
  • Functional priority — navigation, conversion, identity, or narrative closure

Archetype IDs appear throughout the system: in JSON schemas (e.g., "archetype": "Ft1 | Ft2 | … | Ft8" in study.md), routing tables, and page definitions that pair footers with macrostructures.

The Complete Ft1‑Ft8 Reference

ID Name Core Pattern Best For
Ft1 Mast-headed Word-mark + tagline with small adjacent links Classic product sites needing concise identity
Ft2 Inline-rule single line Hairline rule above one-line credits/copyright Minimalist pages, documentation, lean colophons
Ft3 Index-style category list 3-4 column grid with category headers and navigation links Hubs, documentation roots, brand portals
Ft4 Dense typographic Monospaced text block (credits, license, address) Editorial colophons, space-constrained footnotes
Ft5 Statement Large display sentence closing the page, minimal meta beneath Atmospheric, narrative-driven editorial pages
Ft6 Letter close "Yours, the team" sign-off with optional postscript Personal-tone portfolios, letter-like presentations
Ft7 Newsletter first Subscription form as primary element, supporting meta below Conversion-focused sites, community building
Ft8 Marquee scroll Infinite horizontal scroll of repeating tagline/brand Playful, fashion/sport-oriented kinetic branding

The Hallmark system maps genre to default footer to reduce decision fatigue. Selection logic is documented in references/structure.md and SKILL.md.

Genre/Default Recommended Footer Why It Works
Playful Ft8 Motion and repetition reinforce energy
Atmospheric Ft5 Narrative closure matches tonal ambition
Modern-minimal Ft2 Restraint aligns with aesthetic discipline
Editorial Ft4 or Ft5 Typography-first treatment respects content
Hub/portal Ft3 Categorical organization scales with link volume

Practical Usage: YAML Page Definition

Configure your footer archetype directly in page metadata. Hallmark's build pipeline resolves the reference and injects the corresponding component from skills/hallmark/references/components/.

{
  "macrostructure": "H2 Split Diptych",
  "nav": "N5 Floating pill",
  "footer": "Ft5 Statement",
  "theme": "Bloom"
}

This declaration instructs Hallmark to:

  • Render the H2 Split Diptych hero layout
  • Apply N5 Floating pill navigation
  • Insert the Ft5 Statement footer component (components/ft5-statement.md)

The Statement footer renders a full-width closing sentence in display type, followed by minimal branding meta—ideal for narrative pages that end with intentional impact.

Design Tokens and Component Structure

Each archetype defines standardized layout tokens documented in references/component-cookbook.md (lines 126-146):

Token Description Examples
Column count Grid structure Ft3 uses 3-4 columns; Ft2 uses 1
Heading style Visual hierarchy of section labels Small-caps/mono for Ft3; display for Ft5
Rule type Separator treatment Hairline for Ft2; none for Ft8
Typography family Typeface selection Monospace for Ft4; variable if supported for Ft5
Animation speed Motion parameters Scroll velocity for Ft8 marquee

Individual component specifications live in references/components/ft1-mast-headed.md through ft8-marquee-scroll.md.

Anti-Patterns to Avoid

The component cookbook flags contextual mismatches (lines 89-92):

  • Avoid Ft8 on editorial pages — kinetic motion undermines reading absorption
  • Avoid Ft3 unless the page is a genuine hub — category grids imply navigation depth that shallow pages cannot fulfill
  • Avoid Ft7 without email infrastructure — newsletter-first placement amplifies friction if the form non-functional

Where the Archetypes Are Defined

File Path Purpose
references/component-cookbook.md Master index of all archetypes with design tokens and selection logic
references/components/ft1-mast-headed.mdft8-marquee-scroll.md Individual component specifications
references/structure.md Pairing guidelines: footer × macrostructure × genre
references/study.md JSON schema defining valid "footer" values
SKILL.md Practitioner guidance for archetype selection

Summary

  • Hallmark defines eight footer archetypes (Ft1‑Ft8) as standardized, reusable components
  • Ft1-Ft4 prioritize information density and navigation; Ft5-Ft6 emphasize voice and closure; Ft7 optimizes for conversion; Ft8 delivers kinetic brand expression
  • Selection is genre-driven with documented defaults in structure.md and SKILL.md
  • Each archetype exposes design tokens for layout, typography, and motion
  • Anti-patterns are catalogued to prevent contextual misuse

Frequently Asked Questions

Use the Ft# identifier as a string value in your page definition's "footer" field. Valid values are Ft1, Ft2, Ft3, Ft4, Ft5, Ft6, Ft7, or Ft8. The build system resolves this to the corresponding component file in references/components/.

The archetypes are intentionally prescriptive. For substantial deviations, Hallmark expects you to either (a) select a different archetype with closer alignment, or (b) define a custom component outside the Ft1-Ft8 system. The component files themselves serve as reference implementations rather than extensible base classes.

Hallmark applies genre-based defaults defined in structure.md. If no genre is detected or the pairing is ambiguous, the build may warn or fall back to Ft2 (Inline-rule single line) as the most neutral, universally applicable option.

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 →