# Hallmark Slop Test Categories: Complete Guide to the 58 Validation Gates

> Master the Hallmark Slop Test with our complete guide to its 58 validation gates. Understand all 18 categories for robust UI/UX validation.

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

---

**The Hallmark Slop Test organizes its validation gates into 18 distinct thematic categories covering visual design, structural integrity, microinteractions, content authenticity, and implementation discipline.**

The `Nutlope/hallmark` repository implements a rigorous quality assurance system that validates generated pages against strict design system standards. These categories of the Slop Test gates in Hallmark group related validation checks, making it easier to audit specific types of design sloppiness. Understanding these 18 categories helps developers pinpoint exactly where implementations diverge from Hallmark's design philosophy.

## What Is the Hallmark Slop Test?

The Slop Test is a 58-gate (or 57-gate, depending on version) validation system that runs after building a page in Hallmark. According to the source code in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md), it audits outputs for "sloppiness" across multiple dimensions to ensure adherence to the design system's strict standards. Each gate belongs to one of 18 thematic categories that span from pre-emit philosophy checks to mobile responsiveness validation.

## Complete List of Slop Test Categories

The categories are defined in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) and group the validation gates as follows:

### Pre‑emit self‑critique (six axes)

This category scores output on **Philosophy**, **Hierarchy**, **Execution**, **Specificity**, **Restraint**, and **Variety** before any code is emitted. It acts as a philosophical filter ensuring the approach aligns with Hallmark's design principles.

### Visual

Checks for visual sloppiness including excessive font families, decorative-only elements, and improper use of colour or gradients. This category ensures aesthetic discipline in the final output.

### Structural

Validates macro-structure rules such as requiring hero sections to contain words, enforcing proper heading hierarchy, and maintaining correct left-margin patterns. This ensures the page architecture follows Hallmark's structural conventions.

### Microinteractions

Limits the number and intent of animations while ensuring motion has purpose and respects reduced-motion preferences. This gate prevents gratuitous animation that could detract from user experience.

### Variety

Enforces diversification between consecutive pages through theme rotation and knob variation. This prevents repetitive templating across multi-page flows.

### Implementation gates

Examines concrete code-level details including proper token usage, prohibiting inline colours or fonts, and preventing mid-render improvisation. These gates ensure the generated code meets implementation standards.

### Hero enrichment gates

Specific checks for hero sections requiring numeric headlines to pair with text and prohibiting decorative-only hero elements. This ensures hero sections carry meaningful content.

### Diversification gates

Guarantees distinctness across pages to prevent template-style repetition. This works alongside the Variety category to ensure unique page identities.

### Layout‑safety gates

Guards against layout problems such as horizontal scroll, overflow, or unsafe stacking contexts. These gates ensure the page remains structurally sound across viewports.

### Typography discipline gates

Enforces limits on font families, restricts outlier usage, and disallows italic headers. This maintains typographic consistency across the design system.

### Input‑state gate

Verifies consistency of form element heights and states, ensuring inputs match button heights and maintain proper visual relationships.

### Contrast & readability

Ensures sufficient contrast for all foreground/background colour pairs to meet accessibility standards.

### Nav · footer · hero structural slop

Checks navigation, footer, and hero structures for consistency while prohibiting decorative-only elements in these critical regions.

### Honest copy · no fabricated content

Flags invented metrics, fake testimonials, or any copy not sourced from the brief. This ensures content authenticity and prevents hallucinated data.

### Re‑drawn UI chrome

Prohibits recreating browser or IDE chrome; only real screenshots are permitted. This prevents artificial interface elements that misrepresent actual software.

### Token discipline

Requires every colour and typography token to reference the design token system, never hard-coded values. This ensures maintainability and system consistency.

### Responsive — clickable affordances

Validates that interactive elements remain usable across defined breakpoints with no wrap or overflow. This ensures buttons and links remain functional across device sizes.

### Mobile‑responsiveness — the non‑negotiables

Enforces core mobile-friendly rules including no horizontal scroll and proper tap targets. These are critical requirements for mobile usability.

## Where Categories Are Defined in the Source Code

According to the Hallmark source code, the authoritative list of categories resides in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md). The high-level workflow connecting these categories to the build process is documented in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md), while [`README.md`](https://github.com/Nutlope/hallmark/blob/main/README.md) provides the repository overview explaining how these categories maintain design system integrity. Real-world audit reports showing category failures in practice can be found in `site/_tests/**/audit-report.md`.

## Running the Slop Test by Category

When running the Slop Test, you can identify which categories fail validation:

```javascript
// Example: Running the slop-test (pseudo-code)
import { runSlopTest } from '@hallmark/slop-test';

const result = runSlopTest(pageHtml, {
  genre: 'editorial',
  theme: 'specimen',
});

if (!result.passed) {
  console.log('Failed categories:', result.failedCategories);
  // → ['Typography discipline gates', 'Responsive — clickable affordances', …]
}

```

You can also run the test via CLI:

```bash

# CLI usage (if Hallmark provides a binary)

hallmark slop-test ./dist/index.html --genre editorial --theme specimen

```

## Summary

- The Hallmark Slop Test contains **58 validation gates** organized into **18 distinct categories**.
- Categories range from **Pre‑emit self‑critique** philosophy checks to **Mobile‑responsiveness** technical requirements.
- Categories are defined in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) and cover visual, structural, interactive, and implementation concerns.
- Failed tests report specific categories, allowing targeted fixes for issues like **Typography discipline** or **Layout‑safety**.
- The system enforces strict design token usage, content authenticity, and responsive behavior across all gates.

## Frequently Asked Questions

### How many categories are in the Hallmark Slop Test?

The Hallmark Slop Test organizes its gates into **18 distinct categories** as defined in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md). These categories group related validation checks covering everything from pre-emit philosophy to mobile responsiveness.

### What happens if a page fails gates in multiple categories?

When a page fails validation, the Slop Test returns a list of failed categories such as `['Typography discipline gates', 'Layout‑safety gates']`. Developers can then consult [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) to identify specific gates within those categories that need remediation.

### Are all 58 gates distributed evenly across the 18 categories?

No, the gates are distributed unevenly based on complexity and scope. Some categories like **Pre‑emit self‑critique** contain multiple axes of evaluation, while others like **Input‑state gate** focus on a specific implementation detail. The exact distribution is documented in the source file [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md).

### Which category handles mobile responsiveness?

Mobile responsiveness is primarily handled by two categories: **Mobile‑responsiveness — the non‑negotiables** which enforces core rules like no horizontal scroll, and **Responsive — clickable affordances** which validates interactive elements across breakpoints. Both ensure the page meets Hallmark's mobile standards.