Understanding the 21 Named Macrostructures in Hallmark

Hallmark defines exactly 21 named macrostructures—numbered 01 through 21—where the second pattern (Long Document) uniquely carries the Roman numeral II label, representing distinct page layout templates ranging from marketing heroes to continuous prose documents.

The Nutlope/hallmark repository provides a comprehensive design system that standardizes web page layouts through 21 named macrostructures. These architectural patterns function as reusable templates for different content types, ensuring consistent implementation across web projects. According to the Hallmark source code, the master registry resides in skills/hallmark/references/macrostructures.md while individual specifications live in dedicated reference files within the repository.

The Complete Set of 21 Layout Patterns

Hallmark enumerates its macrostructures using Arabic numerals 01 through 21, with one notable exception in its labeling convention. The system designates macrostructure "02" as II (Roman numeral two), making it the only pattern that does not follow the standard Arabic numbering scheme used by the remaining structures (01, 03–21).

The canonical index at skills/hallmark/references/macrostructures.md serves as the central registry for all 21 layouts. Each entry in this index corresponds to a detailed specification file located in the skills/hallmark/references/macrostructures/ directory, following the naming convention [number]-[kebab-case-name].md.

Macrostructure 02: Long Document

The Long Document macrostructure represents Hallmark’s approach to dense, text-heavy content layouts. As documented in the source files, this pattern diverges from marketing-style designs by prioritizing readability and narrative flow over visual hero sections.

Layout Philosophy

The Long Document macrostructure describes pages that read like memos, letters, or journal entries. Key characteristics include:

  • Continuous prose flow without interruption from marketing modules
  • Inline section headings that organize content hierarchically within the text
  • Absence of hero layouts typically found in landing page designs
  • Focus on readability for extended text consumption

Source File Location

Detailed specifications for this pattern reside in skills/hallmark/references/macrostructures/02-long-document.md. This file defines the specific layout requirements, heading hierarchy rules, and typical content structures appropriate for the Long Document pattern. The master index at skills/hallmark/references/macrostructures.md cross-references this file as the authoritative source for the "02 Long Document" entry.

Implementation Example

When implementing the Long Document macrostructure, developers use specific CSS identifiers and HTML structures as defined in the reference files:

/* Hallmark · macrostructure: Long Document */
<section class="long-document">
  <h2>Chapter 1 – Introduction</h2>
  <p>…continuous prose…</p>
</section>

The long-document class selector activates the specific typographic and spacing rules associated with this macrostructure, ensuring consistent presentation across implementations.

To work effectively with Hallmark’s 21 named macrostructures, developers should consult the index file first to identify the appropriate pattern number, then reference the specific definition file for implementation details. The repository organizes these files hierarchically:

  • Index: skills/hallmark/references/macrostructures.md — provides the complete list of all 21 macrostructures
  • Definitions: skills/hallmark/references/macrostructures/ — contains individual markdown files for each numbered pattern

This separation allows the index to serve as a quick reference while individual files contain the granular specifications for layout, responsive behavior, and content guidelines.

Summary

  • Hallmark catalogs 21 named macrostructures numbered 01 through 21 in its design system
  • Macrostructure 02 (Long Document) uniquely uses the Roman numeral II label; all others use Arabic numerals (01, 03–21)
  • The Long Document pattern supports continuous prose content like memos and letters, avoiding marketing-style hero layouts
  • The master index lives at skills/hallmark/references/macrostructures.md with individual specs in skills/hallmark/references/macrostructures/
  • Implementation relies on specific CSS classes (e.g., long-document) and semantic HTML structures

Frequently Asked Questions

What file contains the complete list of all 21 macrostructures in Hallmark?

The complete registry of all 21 named macrostructures resides in skills/hallmark/references/macrostructures.md. This file serves as the master index, listing each macrostructure by its designated number and name, including the Long Document entry labeled as "02 Long Document".

Why does the Long Document macrostructure use Roman numeral II instead of Arabic numerals?

According to the Hallmark source code, macrostructure 02 is the only pattern that carries the Roman numeral II designation. All other macrostructures in the system use Arabic numerals (01, 03, 04 through 21). This unique labeling distinguishes the Long Document pattern within the design system's organizational schema.

What content type is the Long Document macrostructure designed for?

The Long Document macrostructure accommodates continuous prose formats such as memos, letters, and journal entries. It specifically excludes marketing-style hero layouts and instead uses inline section headings to organize dense textual content that requires extended reading.

Where are the detailed specifications for individual macrostructures documented?

Individual specifications for each of the 21 macrostructures are stored in skills/hallmark/references/macrostructures/ using the naming pattern [number]-[name].md. For example, the Long Document specifications are located at skills/hallmark/references/macrostructures/02-long-document.md, containing detailed layout rules, heading hierarchy guidelines, and implementation standards.

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 →