Hallmark — A design skill that refuses to look AI-generated

sets data-fonts-ready on when document.fonts.ready<br>resolves (or after a 1200 ms safety timeout). Theme switches modify<br>[data-theme], not [data-fonts-ready], so the fade never re-runs. -->

One-shotted. No shared theme. No shared layout.

$ /hallmark build a SaaS product page, modern-minimal

$ /hallmark build a travel booking site, atmospheric

$ /hallmark build a small-batch coffee subscription page

$ /hallmark build a creative studio with playful motion

$ /hallmark build a software architect personal site

$ /hallmark build a Moroccan fashion brand landing page

$ /hallmark build a small ceramics studio site

$ /hallmark build a developer infrastructure landing page

Hallmark has one default behaviour and three explicit verbs. Each reads a different input and returns a<br>different shape — same opinions, different jobs.

"Build me a landing page for an indie podcast<br>platform."

Invocation(default) — just<br>ask

Readsyour brief, project tokens,<br>framework

Picksmacrostructure → theme →<br>enrichment

Returnsa working page, stamped,<br>slop-tested

Refusesrepeating the last 3<br>macrostructures

/hallmark study together.ai · or paste a screenshot

Invocationhallmark study

MacrostructureSplit Hero

Hero archetypeH7 Clipped · copy-left<br>+ product-mock right

Display roleheavy geometric<br>sans

Body rolesame family · regular<br>weight

Label rolegrotesque · sentence<br>case

Paper bandlight · pure white

Accent huecool blue + magenta ·<br>organic gradient

Rhythmleft-copy · right product card<br>· overlapping watercolor blobs

Refusesto ID fonts · to copy<br>pixels

Purple-to-pink gradient hero<br>Solid surface, single accent

Inter as display + body<br>Pair distinctive display + body

Centered everything<br>Bias the layout, break symmetry

Sparkle ✨ emoji as badge<br>Pick an icon library, or drop it

Gradient pill CTA<br>Solid fill or outline, single hue

Before

After Hallmark redesign

The page is the demo.

below). -->

Five tells the LLM reaches for by default. The Hallmark fix beside each. hallmark audit flags every<br>one of these on existing code.

01

The purple-gradient hero.

A hero with a background gradient from purple to blue or purple to pink, white<br>centred text. The single most-recognised AI aesthetic.

Hallmark

Pick a single anchor hue. One accent. No gradient backgrounds on heroes. If<br>you want warmth, tint the neutrals.

02

Inter as display.

Inter (or Roboto, or Open Sans) used as both display and body, no pairing face. A<br>one-font page is a template page.

Hallmark

Pair a distinctive display face with a refined body. Two faces minimum, never<br>the same family doing both jobs.

03

Centred everything.

Headline centred, body centred, button centred, section after section of centred<br>columns. Symmetry as default.

Hallmark

Bias the layout. Wide left margin, narrow right — or the reverse. Breaking<br>symmetry once is enough to register intent.

04

The icon-tile feature card.

Rounded rectangle, icon in a coloured square top-left, two-line heading,<br>three-line copy, optional "Learn more →". The universal template.

Hallmark

If you need feature cards, let them be asymmetric — vary sizes, vary<br>alignments, pull the icon inline. Or drop the icon and lead with type.

05

The AI nav.

Wordmark hard-left, four inline links centred, CTA button hard-right, sticky on<br>scroll, hairline border-bottom. The shape every LLM ships.

Hallmark

Pick a nav archetype that matches the page's genre — newspaper masthead,<br>terminal command bar, edge-aligned minimal. The nav should tell you what kind of site you're on.

below). -->

Eight rules that hold across every theme. None of them are settings.

Type

Pair a display face with a body face. Never one font doing both jobs.

Colour

OKLCH palettes. One anchor hue. The accent stays under five percent.

Space

A named scale. Multiples of four. No arbitrary 17-pixel paddings.

Motion

Exponential ease-out. Reduced-motion alternative for every animation.

Voice

Distinct register per theme. Never the SaaS-default neutral middle.

Layout

Bias the page. Asymmetric is intentional. Centred everything is a tell.

Hierarchy

Display, body, label. A weight ladder you can read in two seconds.

Restraint

Better nothing than bad something. The strongest fail-state is silence.

so the markup stays<br>in this file but doesn't render. To revert: change the opening<br>to and the closing to

, then remove the new 8-card section above. -->

$ /hallmark build a landing page for a dev event launch.

Sonnet 4.6, no Hallmark

Default reach for the gradient. Generic stat strip, made-up Trustpilot rating, "10× faster" feature card.

Sonnet 4.6 + Hallmark

Marquee Hero · Atelier · italic Fraunces. Real bottle, real grape, real region. No fabricated stats.

I Run

npx skills add nutlope/hallmark

Copy<br>Copied

II In

Claude Code<br>~/.claude/skills/hallmark/<br>auto-detected

Cursor<br>.cursor/rules/hallmark.mdc<br>auto-detected

Codex<br>~/.codex/skills/hallmark/<br>auto-detected

III Then

Ask your agent...