Common Anti-Patterns Detected by Hallmark: A Complete Guide to Design-System Linting

Hallmark detects four severity tiers of CSS and HTML anti-patterns—Critical, Major, Micro-interaction tells, and Minor—through ~58 automated gates during its slop-test step.

This guide explains how Hallmark evaluates generated markup against its catalog of anti-patterns. The open-source skill scans HTML and CSS during the slop‑test step, flagging anything that appears AI-generated, over-styled, or otherwise "sloppy." These rules are organized in references/anti-patterns.md within the Critical, Major, Micro-interaction tells, and Minor sections 【/skills/hallmark/references/anti-patterns.md#L9】.

Critical Anti-Patterns in Hallmark

Critical patterns represent fundamental violations of design integrity. Hallmark treats these as hard failures that immediately signal low-quality output.

Invented Metrics

Fabricated statistics or numbers that the user never supplied trigger gate 46 in slop-test.md. These appear as decorative proof bars with no provenance, typically rendered as percentage indicators or fake data visualizations 【/skills/hallmark/references/slop-test.md#L146】.

Example flagged output:

.stat-bar::after {
  content: "87% satisfaction"; /* No source provided */
  width: 87%;
}

Re‑drawn UI Chrome

Hand-crafted fake browser bars, phone frames, or code-window chrome trigger gate 47. Hallmark expects real screenshots rather than CSS-constructed device mockups 【/skills/hallmark/references/slop-test.md#L152】.

Mid‑Render Token Improvisation

Inline color declarations bypassing the design-token system trigger gate 48. Any raw #hex, rgb(), or oklch() values in component CSS violate the "locked tokens" rule 【/skills/hallmark/references/slop-test.md#L158】.

Flagged pattern:

.card {
  color: #4F46E5; /* Should reference --color-primary-600 */
  font-family: "Inter", sans-serif; /* Should reference --font-body */
}

Section Eyebrow Beside Heading

Placing an eyebrow label in the same row as the heading triggers gate 54. Hallmark enforces vertical stacking below the heading, rejecting the editorial SaaS template pattern 【/skills/hallmark/references/slop-test.md#L180】.

Italic Headers

font-style: italic on any <h*> or display element triggers rule 6 in SKILL.md. Hallmark treats this as an AI-generated tell, directing emphasis through weight, color, or underline instead 【/skills/hallmark/SKILL.md#L56】.

Major Anti-Patterns in Hallmark

Major patterns significantly degrade perceived quality without breaking fundamental rules.

Gradient Text

background-clip: text with gradients triggers gate 2. Hallmark permits gradients only on backgrounds; gradient text is banned for most genres 【/skills/hallmark/references/slop-test.md#L31】.

Prohibited:

.headline {
  background: linear-gradient(90deg, #6366F1, #A855F7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Centered-Hero Shape

100vh heroes with all elements stacked on the same vertical center line trigger gate 6. Hallmark allows at most two centered elements, requiring off-axis placement for CTAs and eyebrows 【/skills/hallmark/references/slop-test.md#L35】.

Icon Library Mixing and Emoji Icons

Multiple icon sets or emoji usage as feature icons triggers gate 30. Hallmark considers this an AI default pattern, enforcing single-library consistency or custom SVGs 【/skills/hallmark/references/slop-test.md#L76】.

Horizontal Scroll

Any viewport introducing horizontal scrollbars triggers gate 34. Hallmark requires overflow-x: clip enforcement to maintain layout integrity 【/skills/hallmark/references/slop-test.md#L90】.

Excessive Font Families

More than three distinct font-family values triggers gates 37 and 38. Hallmark limits typography to display, body, and at most one outlier family 【/skills/hallmark/references/slop-test.md#L98-L100】.

Transition-All and Hover-Scale

transition: all or transform: scale() on hover appear in Micro-interaction tells 【/skills/hallmark/references/anti-patterns.md#L267】.

Micro-Interaction Tells in Hallmark

These patterns specifically target over-animated, toy-like interactions.

Bouncy Hovers and Long Durations

Gradient hover sweeps and transitions exceeding 400ms—particularly transition: all 800ms—trigger this category. The study.md reference notes document these as credibility-damaging effects 【/skills/hallmark/references/study.md#L168-L176】.

Flagged example:

.button:hover {
  transform: scale(1.05) translateY(-2px);
  transition: all 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

Minor Anti-Patterns in Hallmark

Minor issues represent polish deficiencies that accumulate visual debt.

Two-Line Clickable Text

Buttons, CTAs, or links wrapping to two lines trigger gate 49. Hallmark treats multi-line interactive text as a layout error 【/skills/hallmark/references/slop-test.md#L164】.

Decorative-Without-Purpose Elements

Random blobs, custom cursors, and ornamental shapes lacking semantic meaning trigger gate 45. Hallmark requires every visual element to serve narrative purpose 【/skills/hallmark/references/slop-test.md#L138】.

How Hallmark Implements Anti-Pattern Detection

The detection logic resides in references/slop-test.md, which defines 58 gates executed during the slop-test evaluation phase. Each gate maps to specific CSS selectors, computed style checks, or DOM structure validations. The references/anti-patterns.md file provides human-readable categorization and rationale for each rule 【/skills/hallmark/references/anti-patterns.md#L9】.

Summary

• Critical patterns break design-system fundamentals: invented metrics, fake UI chrome, token improvisation, eyebrow placement, and italic headers
• Major patterns reduce perceived quality: gradient text, centered-hero shapes, icon mixing, horizontal scroll, excessive fonts, and generic transitions
• Micro-interaction tells expose over-animation: bouncy hovers, gradient sweeps, and excessive durations
• Minor patterns indicate polish gaps: two-line clickables and purposeless decorations
• All rules derive from slop-test.md gates and SKILL.md constraints in the Nutlope/hallmark repository

Frequently Asked Questions

What makes an anti-pattern "Critical" versus "Major" in Hallmark?

Critical anti-patterns violate fundamental design-system integrity—fabricating data, bypassing tokens, or using AI-tell styling like italic headers. Major patterns degrade quality without breaking core principles. The distinction appears in references/anti-patterns.md where Critical patterns immediately fail validation while Major patterns aggregate toward quality scores.

Can I configure which anti-patterns Hallmark enforces?

The current implementation in Nutlope/hallmark uses fixed gate definitions in references/slop-test.md. Each of the ~58 gates runs unconditionally during the slop-test step. Customization would require modifying the rule definitions directly in the skill's reference files.

Why does Hallmark flag transition: all specifically?

This property triggers unnecessary repaints across all animatable properties, creating performance overhead and generic "toy-like" motion. Hallmark's study.md documentation identifies explicit, property-specific transitions as the professional alternative—limiting animation to transform and opacity with durations under 400ms.

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