# How to Interpret Slop-Test Results in Nutlope/hallmark: A Complete Guide

> Master Nutlope/hallmark slop-test results. Understand critique axes, failed gates, and checklists to implement effective CSS and structural fixes for cleaner code.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: how-to-guide
- Published: 2026-07-15

---

**To interpret slop-test results in Nutlope/hallmark, decode the pre-emit critique axes (P, H, E, S, R, V), identify failed gate numbers in the stamp, cross-reference them with the 58-gate checklist in [`slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/slop-test.md), and apply the specific CSS or structural fixes required.**

The **slop-test** is Hallmark’s built-in quality-gate system that evaluates generated pages against 58 automated checks before marking them as complete. When you run Hallmark from the Nutlope/hallmark repository, the output includes a concise "stamp" that records which gates passed or failed. Understanding how to read this stamp allows you to transform generic AI-generated layouts into polished, handcrafted-quality designs.

## Understanding the Pre-Emit Self-Critique (Axes P, H, E, S, R, V)

The first line of every slop-test stamp contains the **pre-emit critique**, a six-axis score that determines whether Hallmark triggers an automatic revision before evaluating the remaining gates.

```css
/* Hallmark · pre‑emit critique: P5 H4 E5 S4 R5 V5 */

```

Each letter represents a specific quality axis:

- **P** (Philosophy) – Does the page articulate a clear "why"? Pass if ≥ 3.
- **H** (Hierarchy) – Is the primary-secondary-tertiary hierarchy obvious? Pass if ≥ 3.
- **E** (Execution) – Are details (spacing, colors, focus rings) precise? Pass if ≥ 3.
- **S** (Specificity) – Does the design feel bespoke to the brief? Pass if ≥ 3.
- **R** (Restraint) – Are unnecessary decorations removed? Pass if ≥ 3.
- **V** (Variety) – Is the macro-structure distinct from prior outputs? Pass if ≥ 3.

If any score falls below **3**, the system automatically triggers a revision pass before proceeding to the gate checks. This logic is documented in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) under the Pre-emit self-critique section.

## Decoding the Visual Gates (1–7)

Visual gates verify design fundamentals like typography, color usage, and layout patterns. These checks ensure the output avoids common AI-generated "slop" patterns.

| Gate | Check | Typical Failure | Solution |
|------|-------|-----------------|----------|
| **1** | Display font approval | Uses non-tokenized font family | Switch to `--font-display` or `--font-body` tokens |
| **2** | Gradient text violations | Gradient applied to headline text | Move gradients to backgrounds only |
| **3** | 3-column card grid | Missing required grid structure | Add `grid-template-columns: repeat(3, 1fr)` |
| **4** | Nested cards | Cards inside cards | Flatten the hierarchy |
| **5** | Thick side-stripes | Heavy left/right borders | Replace with subtle outlines or spacing |
| **6** | Hero centered-everything | More than two centered elements | Offset eyebrow or CTA off-axis |
| **7** | Pure black/white usage | `#000` or `#fff` appears | Use `var(--color-paper)` and tokenized colors |

Source: [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) – Visual section.

## Analyzing Structural and Micro-Interaction Gates (8–27)

These gates enforce macro-structure uniqueness and sensible motion design. They prevent repetitive patterns and ensure accessibility-compliant interactions.

- **Gate 8** – Checks for forbidden macrostructure reuse. If the page fingerprint matches a previous output, select a different macrostructure from [`structure.md`](https://github.com/Nutlope/hallmark/blob/main/structure.md).
- **Gates 12–17** – Validate transition properties. Avoid `transition: all` or animating layout-changing properties; scope transitions to specific properties like `opacity` or `transform`.
- **Gate 26** – Verifies interactive states. Every interactive element must include `:focus-visible`, `:active`, and `:disabled` styles.
- **Gate 27** – Requires reduced-motion fallbacks. Wrap animations in `@media (prefers-reduced-motion: reduce)` guards.

Source: [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) – Implementation gates.

## Evaluating Layout Safety and Mobile Responsiveness (34–57)

Layout gates prevent horizontal scrolling, ensure clickable elements remain accessible, and verify grid resilience across viewports.

- **Gate 34** – Enforces zero horizontal overflow between 320 px and 1920 px widths. Fix by adding `overflow-x: clip` to `html` and `body`.
- **Gate 49** – Prevents clickable text from wrapping. Enforce `white-space: nowrap` on navigation and CTA elements.
- **Gate 50** – Validates image-bearing grid tracks use `minmax(0, 1fr)` to accommodate narrow viewports.

Failures in this category typically manifest as horizontal scrollbars or wrapped button labels that break the design on mobile devices.

Source: [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) – Layout-safety gates.

## Reading the Final Stamp

A successful slop-test produces a stamp showing all gates passed:

```css
/* Hallmark · pre‑emit critique: P5 H4 E5 S4 R5 V5 */
/* Hallmark · macrostructure: hero‑split · theme: modern‑minimal · contrast: pass (40–41) · nav: N2 · footer: Ft4 · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) */

```

When gates fail, the stamp marks them explicitly:

```css
/* Hallmark · contrast: FAIL gates 40,41 */

```

To resolve failures:
1. Note the failed gate numbers from the stamp.
2. Open [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) and locate the corresponding gate descriptions.
3. Apply the prescribed fix (CSS adjustment, ARIA addition, or structural change).
4. Re-run `hallmark <verb> <target>` until the stamp shows only "pass" entries.

## Programmatically Detecting Failures

You can parse the stamp output programmatically to automate quality checks. The CLI parsing logic in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) uses regex patterns similar to this example:

```javascript
// Detecting failed gates programmatically
const stamp = `/* Hallmark · contrast: FAIL gates 40,41 */`;
if (/FAIL/.test(stamp)) {
  const fails = stamp.match(/gates\s([\d,]+)/)[1].split(',').map(Number);
  console.log('Failed gates:', fails);
  // Map these numbers to the slop‑test doc for fixing
}

```

This pattern extracts failed gate numbers for automated reporting or CI/CD pipelines.

## Reference Files for Troubleshooting

| File | Purpose |
|------|---------|
| [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) | Complete list of 58 gates and scoring rules |
| [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) | Core rule-set including token locking requirements |
| [`skills/hallmark/references/component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/component-cookbook.md) | Nav/footer/component variations for gates 42–45 |
| [`skills/hallmark/references/layout-and-space.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/layout-and-space.md) | Page-edge clipping (gate 34) and spacing rules |
| [`skills/hallmark/references/typography.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/typography.md) | Typography limits (gates 37–38) and the 2+1 rule |
| [`skills/hallmark/references/responsive.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/responsive.md) | Clickable-text wrap rules (gate 49) and breakpoints |
| [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) | CLI post-process that prints stamps and error messages |

## Summary

- **Check the pre-emit critique first** – any score below 3 in the P, H, E, S, R, or V axes triggers an automatic revision.
- **Locate failed gate numbers** in the stamp output next to `FAIL gates`.
- **Cross-reference gate numbers** with the detailed descriptions in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md).
- **Apply targeted fixes** – replace raw hex colors with tokens, flatten nested cards, add `minmax(0, 1fr)` to grids, or implement `prefers-reduced-motion` fallbacks.
- **Iterate until clean** – re-run Hallmark commands until the stamp contains only "pass" entries for all 58 gates.

## Frequently Asked Questions

### What does it mean if a pre-emit critique score is below 3?

A score below 3 on any axis (Philosophy, Hierarchy, Execution, Specificity, Restraint, or Variety) indicates the page violates fundamental design principles. According to the [`slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/slop-test.md) logic, Hallmark automatically triggers a revision pass to address these issues before evaluating the remaining 58 gates.

### How do I fix failed contrast gates (40 and 41)?

Gates 40 and 41 verify color contrast ratios meet accessibility standards. Failures typically occur when using non-tokenized colors or insufficient contrast between text and backgrounds. Review the color tokens in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) and ensure all text uses approved token combinations with adequate contrast ratios.

### Where can I find the complete list of slop-test gates?

The authoritative reference for all 58 gates is located at [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) in the Nutlope/hallmark repository. This file categorizes gates by type (Visual, Structural, Layout-safety, etc.) and provides specific pass criteria and remediation steps for each numbered check.

### What is the difference between universal and genre-scoped gates?

**Universal gates** apply to every output regardless of style, enforcing baseline quality standards like proper focus states and token usage. **Genre-scoped gates** apply only to specific categories (editorial, atmospheric, modern-minimal, or playful), checking for patterns appropriate to that particular aesthetic. The slop-test stamp indicates which genre rules were active during the evaluation.