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

> Discover common anti-patterns in CSS and HTML with Hallmark, a powerful design-system linter. Learn how its automated gates identify critical and major issues for cleaner code.

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

---

**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`](https://github.com/Nutlope/hallmark/blob/main/references/anti-patterns.md) within the **Critical**, **Major**, **Micro-interaction tells**, and **Minor** sections [【/skills/hallmark/references/anti-patterns.md#L9】](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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】](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md#L146).

Example flagged output:

```css
.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】](https://github.com/Nutlope/hallmark/blob/main/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】](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md#L158).

Flagged pattern:

```css
.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】](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md#L180).

### Italic Headers

`font-style: italic` on any `<h*>` or display element triggers rule 6 in [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md). Hallmark treats this as an AI-generated tell, directing emphasis through weight, color, or underline instead [【/skills/hallmark/SKILL.md#L56】](https://github.com/Nutlope/hallmark/blob/main/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】](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md#L31).

Prohibited:

```css
.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】](https://github.com/Nutlope/hallmark/blob/main/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】](https://github.com/Nutlope/hallmark/blob/main/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】](https://github.com/Nutlope/hallmark/blob/main/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】](https://github.com/Nutlope/hallmark/blob/main/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】](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/study.md) reference notes document these as credibility-damaging effects [【/skills/hallmark/references/study.md#L168-L176】](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/study.md#L168-L176).

Flagged example:

```css
.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】](https://github.com/Nutlope/hallmark/blob/main/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】](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md#L138).

## How Hallmark Implements Anti-Pattern Detection

The detection logic resides in [`references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/references/anti-patterns.md) file provides human-readable categorization and rationale for each rule [【/skills/hallmark/references/anti-patterns.md#L9】](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/slop-test.md) gates and [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/study.md) documentation identifies explicit, property-specific transitions as the professional alternative—limiting animation to `transform` and `opacity` with durations under 400ms.