# What Are Macrostructures in Hallmark? Complete Guide to All 21 Layout Templates > Discover Hallmark macrostructures, the 21 essential page layout templates. Understand their purpose and impact on visual hierarchy for landing pages. - Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark) - Tags: deep-dive - Published: 2026-08-15 --- **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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/macrostructures/04-stat-led.md). **Workbench (05):** A product-tour interface featuring screenshot galleries with minimal marketing copy. Defined in [`macrostructures/05-workbench.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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: ```js /* 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`](https://github.com/Nutlope/hallmark/blob/main/references/macrostructures.md), with individual definitions stored in [`macrostructures/01-bento-grid.md`](https://github.com/Nutlope/hallmark/blob/main/macrostructures/01-bento-grid.md) through [`macrostructures/21-component-playground.md`](https://github.com/Nutlope/hallmark/blob/main/macrostructures/21-component-playground.md). - Each macrostructure prescribes specific rules for heading placement, grid behavior, and image treatment. - The [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/01-bento-grid.md) to [`21-component-playground.md`](https://github.com/Nutlope/hallmark/blob/main/21-component-playground.md). The master overview is located at [`references/macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/references/macrostructures.md), with selection logic governed by the workflow described in [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md).