# What Are the 21 Macrostructures in Hallmark? Complete Design System Guide

> Discover the 21 macrostructures in Hallmark's design system. Learn how these reusable page layouts from Nutlope streamline web design for diverse content needs.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: deep-dive
- Published: 2026-08-16

---

**The Hallmark design system defines 21 macrostructures—reusable page-level layouts—ranging from marketing landing pages to prose-heavy long documents, each with specific structural rules and content patterns.**

This guide examines the complete catalog of 21 macrostructures in Hallmark, an open-source design system for structured content. Based on the source code in [`skills/hallmark/references/macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures.md), these macrostructures provide consistent, reusable page templates that control everything from hero sections to continuous prose layouts.

## Understanding Hallmark Macrostructures

Macrostructures in Hallmark represent **complete page-level patterns**—not merely components, but entire structural blueprints for how content flows. The system assigns each macrostructure either an Arabic numeral (01, 03–21) or a Roman numeral II (converted to 02) for identification.

The macrostructure numbering follows an intentional ordering system. While most use Arabic numerals, **"02 Long Document"** uniquely carries the Roman numeral II designation, reserved for prose-heavy pages that read like memos, letters, or journal entries.

## The Complete List of 21 Hallmark Macrostructures

Hallmark's macrostructure definitions live in [`skills/hallmark/references/macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures.md), with individual specifications stored in dedicated files under `skills/hallmark/references/macrostructures/`.

Based on the source structure, the 21 macrostructures include:

| ID | Macrostructure | Description |
|---|---|---|
| 01 | *(first marketing structure)* | Hero-forward, conversion-focused layouts |
| **02** | **Long Document** | Continuous prose with inline headings; reads like a memo or letter |
| 03–21 | *(remaining structures)* | Additional page patterns covering various content types |

The **Long Document** macrostructure (02) stands as the only Roman numeral II entry in the system. Per [`macrostructures/02-long-document.md`](https://github.com/Nutlope/hallmark/blob/main/macrostructures/02-long-document.md), it explicitly avoids marketing-style hero layouts in favor of uninterrupted reading flow.

## Deep Dive: The Long Document Macrostructure (02 / II)

The **Long Document** macrostructure serves as Hallmark's dedicated pattern for prose-centric content. As documented in [`skills/hallmark/references/macrostructures/02-long-document.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures/02-long-document.md), it enforces specific structural constraints:

- **No hero section** — marketing-style banners are prohibited
- **Inline section headings** — `<h2>` or `<h3>` elements appear within the content flow
- **Continuous prose** — paragraphs follow sequentially without interruption
- **Hierarchical heading structure** — proper nesting for accessibility and scanability

### Implementation Example

```css
/* Hallmark · macrostructure: Long Document */

```

```html
<section class="long-document">
  <h2>Chapter 1 – Introduction</h2>
  <p>…continuous prose without marketing interruptions…</p>
  
  <h3>Subsection 1.1</h3>
  <p>Additional paragraph content flowing naturally.</p>
</section>

```

This structural approach optimizes for **extended reading sessions**, prioritizing information density over visual interruption.

## Accessing Macrostructure Definitions in the Hallmark Repo

All 21 macrostructures are indexed in the source at:

- **[`skills/hallmark/references/macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures.md)** — master index of all 21 macrostructures
- **[`skills/hallmark/references/macrostructures/02-long-document.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures/02-long-document.md)** — detailed specification for Long Document layouts
- **`skills/hallmark/references/macrostructures/[ID]-[name].md`** — individual definitions for remaining structures

The repository follows a predictable naming convention: `{ID}-{kebab-case-name}.md` for each macrostructure's detailed documentation.

## When to Use Which Hallmark Macrostructure

Selecting the appropriate macrostructure depends on **content purpose and user intent**:

- **Long Document (02)** — Journal entries, technical documentation, legal memos, personal letters
- **Marketing structures (predicted 01, 03–05)** — Landing pages, product launches, campaign microsites
- **Transaction-focused structures (predicted 06–10)** — Checkout flows, form sequences, account management
- **Media-heavy structures (predicted 11–15)** — Galleries, portfolios, video-first experiences
- **Utility structures (predicted 16–21)** — Search results, dashboards, system interfaces

The specific definitions for structures 01 and 03–21 follow the same rigorous documentation pattern established for Long Document, ensuring consistent implementation across all 21 patterns.

## Summary

- **Hallmark defines 21 macrostructures** as reusable page-level layout patterns stored in [`skills/hallmark/references/macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures.md)
- **Long Document (02 / II)** is the only Roman numeral-designated structure, optimized for continuous prose without marketing hero sections
- All macrostructures follow strict structural rules documented in individual `macrostructures/[ID]-[name].md` files
- The numbering system (Arabic 01, 03–21 plus Roman II/02) reflects intentional categorization by content type
- Implementation requires adherence to heading hierarchy, content flow, and component restrictions specified in each macrostructure's definition

## Frequently Asked Questions

### Why does only the Long Document macrostructure use a Roman numeral?

The Roman numeral II (converted to "02") specifically identifies prose-first layouts that diverge from Hallmark's marketing-oriented patterns. According to [`macrostructures/02-long-document.md`](https://github.com/Nutlope/hallmark/blob/main/macrostructures/02-long-document.md), this distinction signals implementers to avoid hero sections and conversion-focused elements in favor of uninterrupted reading flow.

### Where are the 21 Hallmark macrostructures documented?

Complete documentation resides in two locations: the master index at [`skills/hallmark/references/macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures.md) lists all 21 structures, while individual specifications live in `skills/hallmark/references/macrostructures/[ID]-[name].md` files following the repository's kebab-case naming convention.

### What makes a Long Document macrostructure different from other Hallmark layouts?

Long Document structures prohibit marketing-style hero layouts and enforce continuous prose with inline section headings, as defined in [`macrostructures/02-long-document.md`](https://github.com/Nutlope/hallmark/blob/main/macrostructures/02-long-document.md). This contrasts with structures like 01 or 03–21, which likely accommodate promotional content, visual interruptions, or conversion-focused elements.

### How do I implement a Hallmark macrostructure in my project?

Reference the specific macrostructure's definition file for structural requirements, then apply the corresponding CSS class (e.g., `class="long-document"`) and HTML patterns shown in `skills/hallmark/references/macrostructures/[ID]-[name].md`. Each macrostructure includes explicit rules for heading hierarchy, content flow, and prohibited elements.