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

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.

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:

<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.

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.

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:

<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.

Banned Layout Patterns: Breaking the LLM Default Structure

The Critical and Major Violations

The 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)

<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.

Replacing the 3-Column Grid

<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. Post-generation, the 58-gate validator in 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.

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 and 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, 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. 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 validator with 58 gates represents an architectural commitment to handcrafted output rather than LLM-default generation.

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