Hallmark Macrostructures: The Complete Guide to 21 Page Layout Templates

Hallmark defines 21 distinct macrostructures—named page-shape templates that govern layout, hierarchy, and visual language for landing pages. These self-contained "fingerprints" prescribe everything from heading placement and body composition to image treatment and navigation patterns.

The Nutlope/hallmark repository uses these macrostructures as the foundational architecture for generating diverse landing pages. Each macrostructure ensures that no two consecutive pages share the same structural DNA, enforcing visual variety while maintaining systematic consistency.

What Are Hallmark Macrostructures?

A macrostructure in Hallmark is a high-level semantic template that determines the overall composition of a generated page. Unlike generic CSS frameworks, these 21 patterns are specific narrative layouts—such as Bento Grid, Marquee Hero, and Stat-Led—each optimized for different content hierarchies and user flows.

According to the source code in [references/macrostructures.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures.md), every macrostructure includes strict rules for:

• Heading placement and typographic scale
• Body composition and content blocks
• Image treatment (hero imagery, inline graphics, thumbnails)
• Navigation and footer positioning
• Optional hero polish patterns for visual emphasis

The Complete List of 21 Hallmark Macrostructures

The master index at [references/macrostructures.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures.md) enumerates exactly 21 macrostructures. Representative examples from the repository include:

| # | Macrostructure | Core Concept | Reference File |

|---|----------------|--------------|----------------| | 01 | Bento Grid | Irregular grid of modular blocks showcasing features, quotes, and stats | [macrostructures/01-bento-grid.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures/01-bento-grid.md) | | 02 | Long Document | Continuous prose with inline section heads resembling a memo or journal | [macrostructures/02-long-document.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures/02-long-document.md) | | 03 | Marquee Hero | Single bold hero element (text or visual) filling the entire viewport | [macrostructures/03-marquee-hero.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures/03-marquee-hero.md) | | 04 | Stat-Led | Large metrics or percentages driving the narrative as the primary hero | [macrostructures/04-stat-led.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures/04-stat-led.md) | | 05 | Workbench | Guided tour of product screenshots with minimal marketing copy | [macrostructures/05-workbench.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures/05-workbench.md) | | 21 | Component Playground | Interactive code-and-preview blocks designed for copy-paste interaction | [macrostructures/21-component-playground.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures/21-component-playground.md) |

The remaining 16 macrostructures follow the same naming convention and documentation standard, each residing in skills/hallmark/references/macrostructures/ with detailed implementation specs.

How Macrostructures Work in Practice

As implemented in [SKILL.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md), the page generation workflow requires macrostructure selection (Step 2) before any code generation begins. This selection triggers specific CSS stamps that enforce the layout rules.

Macrostructure Selection Syntax

When a macrostructure is chosen, Hallmark injects a declarative comment header and corresponding CSS stamp:

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

This comment serves as the configuration fingerprint for the build process. The diversification rule—ensuring no two consecutive pages share the same macrostructure—is enforced at this selection stage.

Example: Marquee Hero Implementation

For a Marquee Hero layout, the generated code follows the pattern defined in [macrostructures/03-marquee-hero.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures/03-marquee-hero.md):

/* Hallmark · macrostructure: Marquee Hero · version: 1.0 */
.hero {
  /* layout rules from 03-marquee-hero */
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

The CSS stamp ensures that the page generator applies viewport-filling hero behavior, large typographic treatment, and minimal surrounding chrome—exactly as specified in the macrostructure definition.

Key Implementation Files

Understanding Hallmark macrostructures requires referencing three critical paths in the Nutlope/hallmark repository:

• [references/macrostructures.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures.md) – The canonical index enumerating all 21 macrostructures with their IDs and descriptions.
• [SKILL.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) – The execution guide detailing the macrostructure pick step (Step 2) in the page generation workflow.
• references/macrostructures/ – The directory containing individual .md specification files for each of the 21 layout patterns, from 01-bento-grid.md through 21-component-playground.md.

Summary

• Hallmark offers exactly 21 macrostructures—semantic page templates ranging from Bento Grid to Component Playground.
• Each macrostructure is documented in references/macrostructures/ and indexed in [references/macrostructures.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures.md).
• The diversification rule prevents consecutive pages from sharing the same macrostructure ID.
• Selection occurs during the macrostructure pick step in [SKILL.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md), generating a CSS stamp that configures the layout engine.

Frequently Asked Questions

How do I select a specific macrostructure in Hallmark?

Macrostructure selection occurs during the workflow defined in [SKILL.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md). The system requires you to pick one of the 21 available templates before generating any CSS or HTML. This selection injects a signature comment (e.g., /* Hallmark · macrostructure: Marquee Hero · version: 1.0 */) that configures the subsequent build steps.

What is the diversification rule in Hallmark?

The diversification rule is a constraint ensuring that no two consecutively generated pages share the same macrostructure ID. This prevents visual monotony across multi-page sites by enforcing variety in layout patterns—if page one uses Bento Grid (01), page two must select from the remaining 20 options.

Where are the macrostructure specifications documented?

Each of the 21 macrostructures has a dedicated markdown file in skills/hallmark/references/macrostructures/. These files define the specific CSS rules, HTML hierarchies, and content patterns for layouts like Stat-Led (04) and Workbench (05). The master index at [references/macrostructures.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures.md) provides the complete enumeration.

Can I create custom macrostructures beyond the 21 provided?

The source code analysis indicates that Hallmark operates against the canonical set of 21 macrostructures defined in the repository. While the architecture supports versioned stamps (e.g., version: 1.0), the current implementation in [SKILL.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) references only the established 21 patterns in the references/macrostructures/ directory.

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