How Hallmark Ensures Structural Difference Between Component Archetypes

Hallmark enforces structural uniqueness through a layered system of diversification rules, within-archetype variation knobs, and automated slop-test checks that prevent repetitive layouts.

Every generated page in Hallmark carries a distinct visual fingerprint. Rather than relying on random styling tweaks, the system architects structural difference at the component level through disciplined archetype selection and enforced variation constraints. This article breaks down the exact mechanisms that make Hallmark pages deterministically unique.

The Diversification Rule: No Two Sections Share DNA

The foundation of Hallmark's structural guarantees lives in component-cookbook.md at line 7: the diversification rule. This rule explicitly prohibits any two sections on the same page from sharing the same archetype.

If your page uses a Bento Grid macrostructure, the hero, feature blocks, and testimonial sections must each pull from different archetype families. A page cannot stack two "Stat-Led" heroes or pair identical feature grids. This macrostructural constraint prevents the repetitive "copy-pasta" layouts common in template-driven generators.

The diversification rule extends beyond page bodies. According to SKILL.md lines 290–294, nav and footer archetypes fall under the same restriction. After selecting a macrostructure, the system forces distinct archetype choices for navigation and footer components.

Within-Archetype Variation Knobs

Every archetype ships with 2–3 variation knobs defined in component-cookbook.md lines 91–95. These knobs mutate the markup structure even when the same archetype name recurs across builds.

Consider the H4-Stat-Led hero archetype:

// Previous build
const previousHero = {
  name: "H4-Stat-Led",
  knobs: { tiles: 6, spans: "even", accent: "corner-only" }
};

// New build must vary at least one knob
const newHero = {
  name: "H4-Stat-Led",
  knobs: { tiles: 8, spans: "irregular", accent: "full-bleed" }
};

The knobs tiles, spans, and accent change the generated DOM structure—not just CSS classes. Hallmark records these values and validates against session history.

Slop-Test: Automated Duplication Guard

The slop-test.md reference (questions 32 and 34) implements an automated checkpoint. Before emitting any component, Hallmark queries:

1. Was this archetype used in the current session?
2. If yes, does at least one knob value differ?

If both conditions fail, the system rejects the selection and re-rolls. This runtime enforcement removes manual oversight from the developer workflow.

Macrostructure-Level Rotation

Each macrostructure (Bento Grid, Marquee Hero, etc.) defined in macrostructures.md line 21 carries default archetype bindings and a catalog of permissible alternates. When you rotate macrostructures, you automatically rotate the associated nav, footer, and section archetypes.

This creates page-level structural variation, not just component-level scrambling. A Bento Grid page and a Marquee Hero page share no common archetype defaults, guaranteeing divergent information architecture.

Design-DNA Extraction and Enforcement

The study verb, documented in study.md lines 5–6, extracts the design DNA of any build:

{
  "macrostructure": "Bento Grid",
  "hero": {
    "archetype": "H4-Stat-Led",
    "knobs": { "tiles": 8, "spans": "irregular", "accent": "full-bleed" }
  },
  "nav": { "archetype": "N5-Floating-pill" },
  "footer": { "archetype": "Ft3-Index-columns" }
}

This DNA becomes the system fingerprint. Subsequent builds must either:

• Honor the extracted DNA for consistency, or
• Deliberately rotate to a new macrostructure and archetype set

There is no accidental repetition. The SKILL.md orchestration layer validates every selection against session history before stamping the output.

Key Files in the Structural Guarantee System

File	Role
skills/hallmark/references/component-cookbook.md	Master catalog of 50 archetypes, variation knobs, and diversification rules
skills/hallmark/references/macrostructures.md	Macrostructure definitions with default and alternate archetype bindings
skills/hallmark/references/study.md	DNA extraction protocol for build fingerprinting
skills/hallmark/references/slop-test.md	Automated duplication detection and rejection logic
skills/hallmark/SKILL.md	Central orchestration enforcing nav/footer diversification and archetype stamping
skills/hallmark/references/structure.md	Routing tables mapping component categories to permissible archetypes

Summary

• Diversification rule: Prohibits identical archetypes within any page
• Variation knobs: 2–3 structural parameters per archetype guarantee distinct markup
• Slop-test: Automated session-history validation prevents accidental reuse
• Macrostructure rotation: Changes entire page skeletons, not just surface styling
• Design-DNA tracking: Makes every build's structural choices explicit and auditable
• Orchestrated enforcement: SKILL.md centralizes all rules so developers never manually check

Frequently Asked Questions

What happens if Hallmark tries to reuse the same archetype with identical knobs?

The slop-test check (in slop-test.md) detects the collision and forces a re-selection. The system must vary at least one knob value before emitting the component. If no valid variation exists, it selects a different archetype entirely.

Can two different pages share the same archetype and knob configuration?

Yes, across separate sessions. The diversification rule and slop-test operate within a single build session. Hallmark intentionally allows cross-session repetition so you can maintain brand consistency when needed.

How many archetypes does Hallmark support?

The component-cookbook.md defines 50 distinct archetypes across hero, nav, footer, feature, testimonial, and other section categories. Each carries 2–3 variation knobs, yielding hundreds of structural permutations.

What is "design DNA" and why does it matter?

Design DNA (documented in study.md) captures the complete structural fingerprint of a build: macrostructure, archetype selections, knob values, type pairing, and color anchor. It matters because it makes Hallmark's choices explicit and portable—you can clone a page's structure for consistency or deliberately mutate any element for variation.

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