What Are Macrostructures in Hallmark? Complete Guide to All 21 Layout Templates

Hallmark defines 21 distinct macrostructures—named page-shape templates that prescribe the overall layout, heading placement, image treatment, and visual hierarchy of landing pages.

Hallmark, an open-source landing page generation framework maintained in the Nutlope/hallmark repository, uses macrostructures as the foundational architectural layer for every page it builds. These templates determine whether a page follows a bento-grid layout, a document-style flow, or a bold marquee hero design. According to the project's reference documentation, each macrostructure functions as a self-contained "fingerprint" that enforces consistency across navigation, footer composition, and optional polish patterns.

Complete List of the 21 Macrostructures in Hallmark

The canonical index resides in references/macrostructures.md, which enumerates all 21 named layouts. Each entry links to a dedicated definition file inside the macrostructures/ directory that specifies the rules for grid behavior, typography scale, and asset placement.

Notable Layout Patterns

Bento Grid (01): An irregular modular grid designed for showcasing features, testimonials, and statistics in asymmetric blocks. Defined in macrostructures/01-bento-grid.md.

Long Document (02): A continuous prose layout with inline section headers, optimized for memos, documentation, or journal-style reading. Defined in macrostructures/02-long-document.md.

Marquee Hero (03): A viewport-filling bold hero section that emphasizes a single headline or visual statement. Defined in macrostructures/03-marquee-hero.md.

Stat-Led (04): A data-driven layout where a large metric or percentage dominates the hero area. Defined in macrostructures/04-stat-led.md.

Workbench (05): A product-tour interface featuring screenshot galleries with minimal marketing copy. Defined in macrostructures/05-workbench.md.

Component Playground (21): An interactive format displaying code-and-preview blocks that users can copy and paste. Defined in macrostructures/21-component-playground.md.

The remaining 15 templates follow the same numerical naming convention (06 through 20) and are documented in individual files within the macrostructures/ folder.

How Macrostructures Function in the Hallmark Workflow

The selection of a macrostructure occurs during the generation pipeline defined in SKILL.md. This step ensures the resulting page adheres to a specific visual grammar before any components are rendered.

The Macrostructure Pick Step

According to SKILL.md, Step 2 ("Macrostructure pick") requires the system to select exactly one template from the 21 available options. This decision locks the page's high-level architecture and prevents structural drift during content population.

CSS Stamp Implementation

Once selected, Hallmark inserts a CSS comment stamp at the top of the generated stylesheet to mark the architectural choice:

/* Hallmark · macrostructure: Bento Grid · version: 1.0 */

This stamp serves two purposes. It documents the template version for debugging, and it enables the diversification rule enforcement that prevents two consecutive generated pages from sharing the same macrostructure.

The Diversification Rule and Design Philosophy

The 21-template system exists to support Hallmark's diversification rule: no two sequential pages may use identical macrostructures. This constraint ensures visual variety across multi-page sites while maintaining structural coherence within each individual page. By codifying 21 distinct fingerprints, the repository provides sufficient granularity to avoid repetition without sacrificing predictability in layout behavior.

Summary

• Hallmark defines 21 distinct macrostructures—named page-shape templates that control landing page architecture.
• The master index lives in references/macrostructures.md, with individual definitions stored in macrostructures/01-bento-grid.md through macrostructures/21-component-playground.md.
• Each macrostructure prescribes specific rules for heading placement, grid behavior, and image treatment.
• The SKILL.md workflow requires selecting a macrostructure at Step 2 before generating any code.
• Hallmark inserts a CSS stamp (e.g., /* Hallmark · macrostructure: Marquee Hero · version: 1.0 */) to mark the chosen template and enforce the diversification rule.

Frequently Asked Questions

How many macrostructures does Hallmark offer?

Hallmark offers exactly 21 macrostructures. These are documented in the master index file references/macrostructures.md and span layouts ranging from the Bento Grid (01) to the Component Playground (21).

What is the purpose of the CSS stamp in Hallmark?

The CSS stamp is a metadata comment inserted at the top of generated stylesheets that records which macrostructure was selected. According to the source code, this stamp enables the diversification rule—a constraint that prevents consecutive pages from using the same layout template.

Where are the macrostructure definitions stored?

Individual macrostructure specifications reside in the macrostructures/ directory, with files named sequentially from 01-bento-grid.md to 21-component-playground.md. The master overview is located at references/macrostructures.md.

Can I create custom macrostructures in Hallmark?

The provided source analysis does not document an extension API for custom macrostructures. The current implementation relies on the predefined set of 21 templates indexed in references/macrostructures.md, with selection logic governed by the workflow described in SKILL.md.

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