# Hallmark's Anti-Patterns: A Complete Guide to Banned Fonts, Gradients, and Layout Patterns

> Discover Hallmark's anti-patterns, including banned fonts, gradients, and layouts. Learn how this tool blocks AI clichés for handcrafted site aesthetics. Enforce unique designs.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: deep-dive
- Published: 2026-08-04

---

**Hallmark automatically blocks common AI-generated design clichés—Inter everywhere, purple gradient heroes, three-column feature grids, and nine other visual tells—to enforce handcrafted-looking sites.**

The Hallmark static site generator maintains a strict visual-design vocabulary codified in reference files that its **SKILL** engine consults before emitting any HTML/CSS. These anti-patterns represent the most recognizable "AI-template" aesthetics that large language models default to when lacking design constraints. According to the Nutlope/hallmark source code, every rule is **non-bypassable**; the engine strips banned patterns even when users request parity with prior builds.

## Banned Fonts: The "Inter Everywhere" Anti-Pattern

### What Hallmark Blocks

The generator hard-bans using **Inter**, **Roboto**, **Open Sans**, **Poppins**, **Lato**, **Work Sans**, **DM Sans**, **Montserrat**, or **system-ui** for both display and body text. This "Inter-everywhere" pattern is documented in `skills/hallmark/references/anti-patterns.md#inter-everywhere` and reinforced through the banned-defaults table in [`skills/hallmark/references/typography.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/typography.md).

### Why It's Flagged

A single-font page signals template-generated output because LLMs rarely learn proper typographic hierarchy without explicit constraints. The uniformity creates an immediate visual tell of uncurated generation.

### The Correct Pattern: Distinct Font Pairings

Hallmark ships with approved pairings such as *Instrument Serif* for display and *Geist Sans* for body. Reference these through CSS tokens defined in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css):

```html
<link rel="stylesheet" href="site/css/tokens.css">

<style>
  body {
    font-family: var(--font-body);   /* e.g., Geist Sans */
    color: var(--color-text);
  }

  h1, h2, h3 {
    font-family: var(--font-display); /* e.g., Instrument Serif */
    font-weight: 700;
    font-style: normal;               /* never italic for headers */
  }
</style>

```

*Source:* Token definitions live in `[data-theme]` blocks within [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css).

## Banned Gradients: From Purple Heroes to Gradient Text

### Prohibited Gradient Patterns

| Pattern | Location in Source | Description |
|---------|-------------------|-------------|
| Purple-to-blue/pink hero backgrounds | `anti-patterns.md#the-purple-gradient-hero` | The archetypal "AI startup" aesthetic |
| Gradient headline with `background-clip: text` | `anti-patterns.md#the-gradient-headline` | Rainbow typography without semantic purpose |
| Gradients between accent colors (e.g., pear→cyan) | `themes/hum.md#gradients-between-accents` | Theme-specific bans |
| Gradient text (universal) | `genres/playful.md#gradient-text` | Genre-level prohibition at gate 2 |

### Why Gradients Signal "AI-Generated"

Gradient-filled heroes and headlines are the most recognizable synthetic aesthetic—they provide visual noise without structural meaning. The `hallmark` engine treats these as **Critical** severity violations in its 58-gate post-emit validator defined in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md).

### The Correct Pattern: Solid Anchors and Subtle Accents

Use a single anchor hue for backgrounds. Apply two-stop CSS gradients only to non-text elements (thin underlines, borders) and reference the accent token:

```html
<section class="hero">
  <h1>Build faster, ship smarter</h1>
  <p>Our platform empowers developers to iterate quickly.</p>
  <a class="cta" href="#signup">Get started</a>
</section>

<style>
  .hero {
    background-color: var(--color-surface); /* single token */
    padding: 4rem 2rem;
    /* No gradient, no background-clip:text */
  }
</style>

```

*Source:* Hero enrichment rules in [`skills/hallmark/references/hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/hero-enrichment.md).

## Banned Layout Patterns: Breaking the LLM Default Structure

### The Critical and Major Violations

The [`anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/anti-patterns.md) file enumerates layout patterns under **Critical** and **Major** severity. These include:

- **Three-column feature grid**: Equal-width cards with icon-above-heading
- **Full-viewport centered hero**: `min-height: 100vh` with single sentence and CTA
- **Left-margin label / hanging header**: Tag-left/header-right two-column section heads (gate 54, hard ban)
- **Eyebrow on every section**: Uppercase mono-cap labels before each heading
- **Side-stripe card**, **card-in-card**, **icon-tile feature card**
- **Floating-orb decoration**, **Aurora-blob background**
- **Centered-everything** composition
- **Italic headers**

### Source File References

| Anti-Pattern | Reference Location |
|-------------|-------------------|
| 3-column feature grid | `anti-patterns.md#the-3-column-feature-grid` |
| Full-viewport centered hero | `anti-patterns.md#full-viewport-centred-hero` |
| Tag-left/header-right | `anti-patterns.md#hard-ban-tag-left-header-right-two-column-section-heads` |
| Eyebrow on every section | `anti-patterns.md#eyebrow-on-every-section` |

### The Correct Pattern: Asymmetric, Content-Driven Layouts

Replace symmetric grids with varied widths and typographic rhythm. Let hero height follow content rather than forcing full viewport. When section labels are needed, stack them vertically in a single column.

#### Left-Margin Label (Correct Stacking)

```html
<section class="feature">
  <div class="label">01</div>
  <h2>Fast deployment</h2>
  <p>Deploy in seconds with zero-config pipelines.</p>
</section>

<style>
  .feature {
    display: block;               /* single-column, not two-column */
    margin-left: 0;
  }

  .label {
    font-variant-numeric: tabular-nums;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
  }
</style>

```

*Source:* Hard ban description in [`anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/anti-patterns.md).

#### Replacing the 3-Column Grid

```html
<div class="features">
  <article class="feature">
    <h3>Realtime analytics</h3>
    <p>Watch metrics update live.</p>
    <a href="#">Learn more →</a>
  </article>

  <article class="feature">
    <h3>Zero-config CI</h3>
    <p>Push code, get a pipeline.</p>
    <a href="#">Learn more →</a>
  </article>
</div>

<style>
  .features {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
  }

  .feature {
    flex: 1 1 45%;               /* varied widths, not equal */
    border: 1px solid var(--color-border);
    padding: 1.5rem;
  }
</style>

```

## Enforcement: How Hallmark Maintains Anti-Pattern Compliance

The `hallmark` engine loads its anti-pattern library before generation begins, as specified in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md). Post-generation, the **58-gate validator** in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) audits output against all documented anti-patterns. Audit results appear in `site/_tests/*/audit-report.md` with severity classifications.

All rules are **hard bans**—the engine strips violations automatically without user override. This ensures every generated site escapes the "AI-template" aesthetic regardless of prompt sophistication.

## Summary

- **Fonts**: Ban single-font pages (especially Inter/Roboto everywhere). Use distinct display/body pairings via `var(--font-display)` and `var(--font-body)`.
- **Gradients**: Eliminate purple-blue heroes, gradient text, and accent-to-accent fades. Prefer solid backgrounds with subtle accent underlines.
- **Layouts**: Break symmetry, avoid three-column grids and centered-everything compositions, stack labels vertically, and keep headers Roman (not italic).
- **Enforcement**: All rules are non-bypassable and validated through 58 gates defined in [`slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/slop-test.md).

## Frequently Asked Questions

### What happens if I try to use a banned font in Hallmark?

The SKILL engine automatically substitutes approved alternatives defined in [`typography.md`](https://github.com/Nutlope/hallmark/blob/main/typography.md) and [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css). Even explicit user requests for "Inter as the main font" are overridden to maintain visual distinctiveness.

### Can I disable the gradient restrictions for a specific project?

No. According to the source code in [`anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/anti-patterns.md), gradient anti-patterns are **hard bans** that apply universally across all themes and genres. The engine strips gradient declarations regardless of user parity requests.

### Where do I find the complete list of banned layout patterns?

The master list lives in [`skills/hallmark/references/anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/anti-patterns.md). This file categorizes every visual tell as **Critical**, **Major**, or **Minor** and includes specific gate numbers for the post-emit validator. Theme-specific variations appear in `skills/hallmark/references/themes/*.md`.

### How does Hallmark's anti-pattern system compare to other static site generators?

Unlike generators that leave aesthetic decisions entirely to templates or prompts, Hallmark codifies design constraints at the engine level. The [`slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/slop-test.md) validator with 58 gates represents an architectural commitment to handcrafted output rather than LLM-default generation.