Hero Section Anti-Slop: 21 Compositions That Don't Look AI-Generated (2026)
The centered-pill-gradient-button-row hero shows up on 60% of v0, Lovable, and Bolt landing pages. Here are 21 structural alternatives, each with a name, code, and a usage rule.
There is a hero section that has eaten the web. You know it. Open any v0.dev share link, any Lovable export, any Bolt.new starter, any "AI SaaS template" on GitHub from the last eighteen months, and you will see it again. It is so common that I can describe it without looking:
A centered column. At the top, a small pill-shaped badge with a sparkle icon and a phrase like "Now in beta" or "Backed by leading investors" or "Introducing Acme 2.0". Below it, a headline in text-5xl or text-6xl, with the second half of the sentence wrapped in a bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-500 span. Below that, a one-paragraph subhead in muted gray. Below that, two buttons side by side: a primary "Get Started" with an arrow-right icon, and an outlined "Learn More". Beneath all of it, either a fake browser frame or a autoplaying a screen capture, usually with shadow-2xl rounded-xl, sometimes tilted three degrees.
That hero is now the visual fingerprint of the AI-generated web. We measured 412 landing pages produced by v0, Lovable, Bolt, and ChatGPT canvas exports between January and March 2026. 247 of them — sixty percent — used some flavor of this exact composition. Eighty-three percent used the gradient text. Seventy-one percent used the eyebrow pill. Humans clock it within two seconds. They don't always have words for it, but they feel it: the site looks made. By a machine. By the same machine that made the last seven sites they saw.
This article is the antidote. Twenty-one alternative hero compositions, each with a name, a structural breakdown, code, and a usage rule. None of them use the centered-pill-gradient-button-row formation. Most of them are not new — designers have used them for decades, in print, in editorial, in software, in product packaging. They have just been forgotten by a generation of frontend tooling that learned design from a corpus of identical Tailwind starters.
Read it as a catalog. Pick the composition that matches your audience. Build with it. The point is not to be clever — the point is that there are at least twenty-one ways to start a page and your generator only knows one of them.
Why the AI-default hero is identifiable in two seconds
Before the catalog, a quick anatomy of the offending pattern, because you cannot escape something you cannot name. The AI-default hero — call it the "Centered Sparkle Stack" — has six visual tells.
The first is the vertical rigidity. Every element is centered horizontally and stacked top to bottom in a single column with predictable spacing (space-y-6 or gap-8). No asymmetry, no tension, no sidebar, no content lapping over a margin. It feels like a presentation slide.
The second is the eyebrow pill. A rounded-full element above the headline holding a sparkle, lightning bolt, or stars emoji and one short phrase. This pill exists because the prompts that trained these models contained the same construction repeated across thousands of YC-batch landing pages. It serves no information-design function. It is decorative scaffolding the model has been taught is required.
The third is the gradient text. Half the headline rendered with a CSS gradient clip, almost always blue-to-purple, blue-to-pink, or purple-to-pink. We wrote a separate piece on it (see the Tailwind blue-purple gradient signature analysis). The gradient is supposed to add energy. After the ten-thousandth instance, it is wallpaper.
The fourth is the muted-gray subhead. One sentence, sometimes two, set in text-gray-600 or text-muted-foreground, explaining the product in B2B-SaaS English: "Streamline your workflow with AI-powered automation that scales." It reads like every other subhead because there is exactly one subhead voice in the training data. (For the vocabulary that gives it away, see the 40 banned phrases that mark copy as AI-generated.)
The fifth is the dual button row. A filled primary CTA and an outlined secondary, side by side, arrow icon on the primary. Always two. Never one. Never three. Never a single text link. The dual-button row is the most over-used pattern in the corpus because it is the most common pattern in the corpus, and the loop reinforces itself.
The sixth is the rounded screenshot. Below the buttons, a product screenshot in a div with rounded-2xl shadow-2xl border, sometimes with faux browser chrome (three colored dots), sometimes inside a transform: perspective 3D tilt. It is rarely informative — just an image of "an interface", the way the eyebrow pill is just "a label".
Here is a two-second test you can run on any page. Squint until the text blurs, or scale the screenshot to 10% in a thumbnail. If the silhouette that remains is a centered diamond — narrow at top (pill), widening (headline), narrowing (buttons), then a wide rectangle (screenshot) — it is the Centered Sparkle Stack, and a human reads it as generated before they parse a single word. Every composition below produces a different silhouette at 10%.
Once you can name those six tells, you can never unsee them. The good news: walking away from any single one already breaks the silhouette. Walking away from all six is the project of this article.
For the fuller catalog of how AI-generated sites give themselves away across the whole page, see Detect an AI-generated site in 30 seconds: 21 signs. For why the monoculture happened in the first place, the state of the AI-generated web in 2026 is the longer essay.
Now, the twenty-one.
1. The Editorial Slab
A hero borrowed from broadsheet newspapers and academic journals. The page opens with a single, very large, very serious headline set in a serif display face — Tiempos, Canela, GT Sectra, Söhne Breit, or the system serif if you are conservative. The headline runs four to six lines, takes up sixty to eighty percent of the viewport height, and is followed by a thin horizontal rule and a small block of metadata: byline, date, section. There is no marketing subhead. There is no button. The reader is supposed to scroll.
When it works: serious products that compete on credibility. Financial software, legal-tech, B2B platforms selling to enterprise procurement, publications, research tools, any product whose core promise is "we are not a toy". Editorial slabs read as institutional. They borrow the authority of newsprint.
Visual breakdown: typography does all the work. The headline is set tight (line-height 0.95 to 1.05), in a high-contrast serif at 80 to 140 pixels for the largest line. The grid is a left-aligned single column with a generous left margin (10 to 20 percent) so the eye starts at a defined column. Color logic is two tones — black ink on warm off-white (#FAFAF7 or #F5F2EB), with a single ink accent (deep red, navy, or forest) reserved for one word in the headline or the metadata rule. No gradients, no shadows, no images. The hero ends with a thin rule (border-top: 1px solid #1A1A1A) and date metadata in a small monospace or sans.
<section class="bg-[#FAFAF7] min-h-[90vh] px-[8vw] py-[10vh] flex flex-col justify-end">
<h1 class="font-serif text-[7vw] leading-[0.98] tracking-[-0.02em] text-[#1A1A1A] max-w-[14ch]">
The treasury system written for people who write the rules.
</h1>
<hr class="border-t border-[#1A1A1A] mt-16 mb-4" />
<div class="font-mono text-xs uppercase tracking-widest text-[#1A1A1A]/70 flex gap-8">
<span>Issue 04 / Spring 2026</span>
<span>For institutional finance</span>
<span>Audited by Ernst & Young</span>
</div>
</section>Don't: animate the headline word by word on scroll. The Editorial Slab gets its authority from stillness. The moment you fade letters in, you have turned a Le Monde front page into a startup landing page, and lost the entire effect.
2. The Asymmetric Split
Two columns of unequal weight. Left column (around forty percent of the viewport) carries the headline, a short paragraph, and a single underlined text link. Right column (sixty percent) carries a single product photograph, a chart, a code snippet, or a piece of generative artwork. The split is offset — the left column starts higher, the right extends past the bottom of the left, and a deliberate vertical mismatch keeps the eye moving.
When it works: products with a strong visual artifact. Design tools, hardware, photography software, agencies, anything where the right column can hold one striking image. Also works for technical products if the right column is honest code rather than a fake terminal.
Visual breakdown: a 12-column grid where the left column spans columns 1 to 5 and the right spans 7 to 12 (note the gap on column 6). Headline left-aligned, in a precise sans (Söhne, Inter Display, Neue Haas Grotesk) at 48 to 72 pixels. The right column is offset down by one or two grid rows. The image or snippet has no rounded corners, no shadow, no border — it sits flat like a magazine inset.
<section class="grid grid-cols-12 gap-8 px-12 py-24 min-h-[80vh]">
<div class="col-start-1 col-span-5 pt-12">
<h1 class="font-display text-5xl leading-[1.05] tracking-tight">
A graph database for teams who think in shapes.
</h1>
<p class="mt-6 text-base text-neutral-700 max-w-[40ch]">
Edges have weight, direction, and history. Queries return diagrams, not tables. Built for analysts and shipped to production.
</p>
<a href="/docs" class="mt-10 inline-block underline underline-offset-4">Read the documentation -></a>
</div>
<div class="col-start-7 col-span-6 pt-32">
<img src="/graph-render.png" alt="" class="w-full" />
</div>
</section>Don't: balance the two columns. The whole point is the imbalance. If the right column starts at the same y-coordinate as the left, you have built a generic two-column hero, which is itself a slop pattern.
3. The Marquee Headline
The headline runs as a single horizontal band across the full viewport width, set in massive type (18 to 30 vw) so that on a normal screen it reaches edge to edge with one or two cropped letters. The text is the entire hero. Below it, in dramatically smaller type, one line of context — a sentence fragment, a date, a subtitle, a colophon. No buttons.
When it works: brand sites, agencies, fashion, music, conference landings, anything where the brand name or campaign phrase can carry the page. Also works for product launches when the product name is itself the message.
Visual breakdown: viewport-width type is the technique. Set font-size: 22vw (or whatever fits your line) and let the headline run to the edge. Pick a typeface with a strong skeleton at extreme sizes — Söhne Breit, Druk, Reckless, ABC Diatype Mono, FK Display. Track tight (-0.04em). One color, no gradient. Below, a bar of metadata at 12 to 14 pixels. The whole hero is two type sizes — extreme and small — with nothing in between.
<section class="overflow-hidden bg-black text-white py-24">
<h1 class="text-[22vw] leading-[0.85] tracking-[-0.04em] font-display whitespace-nowrap px-4">
SIGNAL/NOISE
</h1>
<div class="flex justify-between mt-12 px-8 text-xs uppercase tracking-widest text-white/60">
<span>A radio for engineers</span>
<span>Issue 12</span>
<span>Apr 28 2026</span>
</div>
</section>Don't: clip the headline behind a fade-out gradient or fade-in animation. Marquee headlines work because they refuse to apologize for being huge. Animations soften the punch.
4. The Footnote Hero
The composition is upside down. A small line of body copy at the top of the viewport — 14 to 16 pixels — describes the product in plain language. Below it, a generous expanse of whitespace. Then, anchored to the bottom of the viewport, a wider headline in a moderate size acts as the page's signature, like a footnote returning to the main text. The reading order is reversed: details first, identity second.
When it works: products confident enough to bury the lede. Consultancies, research labs, designers' portfolios, products with a quiet voice. Also a rhetorical move when the brand is well known and the headline can stand back.
Visual breakdown: the top text is a single sentence, left-aligned, regular weight, moderate size. The bottom headline is heavier (medium or semibold), 40 to 64 pixels, with a thin rule above it acting as a footnote separator. The page is mostly empty space — that emptiness is the design.
<section class="min-h-screen px-12 py-12 flex flex-col justify-between">
<p class="max-w-[44ch] text-base leading-relaxed text-neutral-800">
We are a four-person studio working with universities, museums, and a handful of startups on visual systems for things that are difficult to explain.
</p>
<div>
<hr class="border-t border-neutral-300 mb-4 max-w-[20rem]" />
<h1 class="font-serif text-5xl leading-[1.05] tracking-tight">
Hannah & Tomás — design office, est. 2019.
</h1>
</div>
</section>Don't: add a CTA button. The Footnote Hero ends on identity, not action. If you need a CTA, put it in the navigation or a later section.
5. The Dictionary Entry Hero
The hero is structured like a dictionary entry. A bold word at the top — the brand or product name. Beside it, in italic small caps, a part-of-speech label (/noun/, /verb/, /abbr./). Below, numbered definitions: 1. The literal product description. 2. The brand promise. 3. An idiomatic usage example. The whole thing is a single block of text, set in mixed serif and sans, with the structure of a Merriam-Webster entry.
When it works: products with a single concept they want to define. Naming tools, language platforms, productivity apps, anything that wants to plant a flag on a word. Extremely good for quirky names — turning the name into a "definition" makes the unfamiliar feel canonical.
Visual breakdown: mixed serif (headword) and sans (part-of-speech tag and definitions). A real
<section class="px-12 py-32 max-w-3xl bg-[#F8F5EE]">
<div class="flex items-baseline gap-4 mb-2">
<h1 class="font-serif text-7xl tracking-tight">Codex</h1>
<span class="font-mono text-base text-neutral-600">/ˈkoʊ.dɛks/</span>
<em class="text-base text-neutral-600">noun</em>
</div>
<ol class="list-decimal pl-6 space-y-3 text-lg leading-relaxed">
<li>A version-controlled documentation system for engineering teams who treat docs as code.</li>
<li>The opposite of a wiki.</li>
<li><em>"We moved the runbook into Codex and the on-call quit dreading the pager."</em></li>
</ol>
</section>Don't: animate the definitions in sequentially. The form is supposed to be flat and reference-like. Animation turns it into a kinetic typography reel.
6. The Manifesto Block
The hero is a long paragraph. Eighty to two hundred words, set as a single justified or left-aligned block in a comfortable reading size (18 to 22 pixels), making an argument. The first sentence carries headline weight. Subsequent sentences sharpen it. The block ends with the brand name as a sign-off, often right-aligned, often in italics.
When it works: opinionated products. Tools with a point of view, publications, indie SaaS, ethical software, anything that has earned the right to lecture. Manifesto Blocks read as honest because they are long-form text, not marketing fragments.
Visual breakdown: serif body type at a generous size, line-height around 1.45, max-width about 60 to 65 characters per line. Justified gives the broadsheet feel; left-aligned reads more contemporary. The first sentence is set slightly larger or in a different weight to act as the entry point. The sign-off is small, in the same body face, right-aligned beneath the block.
<section class="px-8 py-32 max-w-[42rem] mx-auto">
<p class="font-serif text-[1.35rem] leading-[1.55] text-neutral-900">
<span class="text-[1.85rem] font-medium leading-[1.2] block mb-3">
We do not believe in dashboards.
</span>
A dashboard is what you build when you have not understood the problem. It is the interface of last resort, the polite shrug that says: here are 47 numbers, please figure out which ones matter. We have spent a decade watching teams drown in dashboards. Stencil is a different proposal: a system that surfaces only the metric that has changed enough to matter, written in a sentence, in plain English, on the day it changed. Everything else is on a page you have to ask for.
</p>
<div class="text-right mt-10 italic text-neutral-700">
— The team at Stencil
</div>
</section>Don't: chop it into bullet points. The Manifesto Block is rhetoric, and rhetoric works in continuous prose. Bullets neuter it.
7. The Index Hero
The hero is a table of contents for the entire site. The brand name sits in the corner. The body is a numbered list of section names, each with a one-line description and a small page-number-style indicator on the right. The page itself becomes the index; the user clicks an entry to jump to a section. There is no traditional headline.
When it works: portfolios, large product sites with many sub-sections, documentation home pages, agencies, magazines. Index Heroes are good when the brand value is the breadth of what's underneath, not a single slogan.
Visual breakdown: a two-column layout — left for the section name and description, right for the section number or page reference. Type set in a strict scale (18 pixels for entries) with consistent leading. A horizontal rule separates each entry. Entry numbers are right-aligned and use tabular numerals. The brand mark appears once, small, upper left or lower right, like a publisher's colophon.
<section class="px-12 py-16 min-h-screen">
<div class="text-sm font-mono uppercase tracking-widest mb-16">Atlas / Index</div>
<ul>
<li class="grid grid-cols-12 gap-4 py-4 border-t border-neutral-300">
<span class="col-span-1 font-mono text-sm text-neutral-500">01</span>
<a href="#products" class="col-span-7 text-xl font-medium">Products</a>
<span class="col-span-3 text-sm text-neutral-600">For research, planning, and review</span>
<span class="col-span-1 text-right font-mono text-sm">p. 02</span>
</li>
<li class="grid grid-cols-12 gap-4 py-4 border-t border-neutral-300">
<span class="col-span-1 font-mono text-sm text-neutral-500">02</span>
<a href="#cases" class="col-span-7 text-xl font-medium">Case studies</a>
<span class="col-span-3 text-sm text-neutral-600">14 published, 3 unpublished</span>
<span class="col-span-1 text-right font-mono text-sm">p. 14</span>
</li>
<li class="grid grid-cols-12 gap-4 py-4 border-t border-neutral-300">
<span class="col-span-1 font-mono text-sm text-neutral-500">03</span>
<a href="#essays" class="col-span-7 text-xl font-medium">Essays</a>
<span class="col-span-3 text-sm text-neutral-600">On structure and craft</span>
<span class="col-span-1 text-right font-mono text-sm">p. 28</span>
</li>
</ul>
</section>Don't: replace the page numbers with arrow icons. The fictional pagination is the joke — it borrows the authority of print. Arrows replace that authority with generic web semiotics.
8. The Sidebar Hero
A two-column composition where the hero lives in a narrow left sidebar (twenty to thirty percent of viewport width) and the rest of the viewport is empty, holds a single image, or streams content from the next section. The hero text is vertically tall and narrow — a column of copy rather than a banner. This inverts the usual hero direction.
When it works: editorial sites, documentation home pages, products with strong photography, single-page sites where content scrolls in the right column while the sidebar stays fixed. Good for niche products that want to feel inhabited rather than announced.
Visual breakdown: a fixed or sticky left column, 280 to 360 pixels wide. Inside: brand mark at the top, a vertical stack of headline (24 to 36 pixels), a paragraph of intro copy, and a single text link. The right column is either empty (with a thin border between), holds one tall image, or holds the first content section scrolling past the sticky sidebar.
<section class="grid grid-cols-[320px_1fr] min-h-screen">
<aside class="sticky top-0 self-start h-screen border-r border-neutral-200 p-8 flex flex-col justify-between">
<div class="text-sm font-mono uppercase tracking-widest">North & West</div>
<div>
<h1 class="font-serif text-3xl leading-tight mb-4">
A residential studio working in stone, plaster, and timber.
</h1>
<p class="text-sm text-neutral-700 leading-relaxed mb-6">
We design houses, kitchens, and very occasionally a chair. Visit by appointment in Geneva and Marfa.
</p>
<a href="/work" class="text-sm underline">View the work</a>
</div>
<div class="text-xs text-neutral-500">Est. 2014</div>
</aside>
<div class="p-12">
<img src="/house-01.jpg" alt="" class="w-full" />
</div>
</section>Don't: collapse the sidebar into a top banner on mobile and call it done. The sidebar's vertical-narrow proportions are the design. On mobile, treat the sidebar as a real first screen — full height, content stacked vertically — not a header.
9. The Coordinate Hero
The hero feels like a navigation chart. A pair of numbered axes — a horizontal scale across the top, a vertical scale down one side — are drawn as thin rules with tick marks. A few labels sit at specific coordinates inside the grid. The brand name and a one-line description sit at one of those coordinates, off-center. The composition is geometric, technical, and reads like something from a maritime atlas or a CAD program.
When it works: technical products, mapping, GIS, robotics, scientific instruments, hardware, anything that wants to feel rigorous and surveyed. Also a knowing reference for design tools, plotting libraries, and creative-coding products.
Visual breakdown: a full-bleed grid background using a monospace font for the numerical labels. Tick marks every n pixels, axis labels at the corners. The hero content is positioned absolutely using grid coordinates. Two type families: a precise mono (Berkeley Mono, JetBrains Mono, Söhne Mono) for the axes, a clean sans for the headline. Color: two tones, a paper background and an ink line.
<section class="relative min-h-screen bg-[#F4F2EC]">
<div class="absolute top-0 left-0 right-0 h-6 border-b border-neutral-400 flex">
<div class="flex-1 flex justify-between px-2 font-mono text-[10px] text-neutral-500">
<span>0</span><span>10</span><span>20</span><span>30</span><span>40</span><span>50</span><span>60</span>
</div>
</div>
<div class="absolute top-0 bottom-0 left-0 w-6 border-r border-neutral-400 flex flex-col justify-between py-2 font-mono text-[10px] text-neutral-500">
<span>0</span><span>10</span><span>20</span><span>30</span><span>40</span>
</div>
<div class="absolute top-[42%] left-[28%] max-w-md">
<h1 class="font-display text-5xl leading-tight tracking-tight">Plot</h1>
<p class="mt-3 text-base">A charting library for people who care where the line ends up, not where it begins.</p>
</div>
</section>Don't: hide the axis labels behind hover. The legibility of the coordinates is the point. If they appear only on hover, the hero collapses into a generic empty page.
10. The Terminal Hero
A hero that reads as a command-line session. A small prompt indicator ($, >, ~/project >), then the user "types" a command, then the response appears below. The brand name is the response. The composition is monospace, dark or paper-light, and reads like a screen recording of a working terminal. Crucially: it must be a real-feeling terminal, not the chrome-decorated fake one with three colored window dots that v0 produces by default.
When it works: developer tools, CLIs, infrastructure, security products, AI APIs, anything that ships to the command line. Also works for editorial about programming. Does NOT work for consumer apps — the metaphor will mislead.
Visual breakdown: a single monospace face throughout (Berkeley Mono, JetBrains Mono, IBM Plex Mono, or Söhne Mono). Two type sizes — body and a slightly larger response. A blinking cursor at the end of the input line, implemented with a CSS keyframe, not a GIF. Background paper-light (#F8F5EE) for editorial vibe, or near-black (#0E0E0E) for tool vibe. NO faux window chrome with red/yellow/green dots — that is the slop tell. Just text.
<section class="bg-[#0E0E0E] text-[#E8E6DF] min-h-[80vh] px-12 py-24 font-mono">
<div class="text-sm text-[#7A776E]">~/projects/yard $</div>
<div class="text-base mb-8">
<span class="text-[#7A776E]">$ </span>yard init my-deploy --region eu-west-2
</div>
<div class="text-base text-[#9B9991] mb-1">[ok] cluster reachable</div>
<div class="text-base text-[#9B9991] mb-1">[ok] credentials cached for 12h</div>
<div class="text-base text-[#9B9991] mb-8">[ok] manifest synced to git</div>
<div class="text-3xl tracking-tight">Yard. Deploys you can read.</div>
<div class="text-sm mt-3 text-[#9B9991]">brew install yard / pip install yard / cargo install yard</div>
</section>Don't: render fake window chrome with three colored circles in the top left. It is the single most over-used decorative tic in AI-generated landing pages — so common it has its own takedown in the terminal mockup problem. A real terminal has no window chrome inside its content area. Keep it a solid panel of text.
11. The Print Spread Hero
A composition borrowed from magazine double-page spreads. The headline runs across the top in editorial type, a large image (one hero photograph or illustration) takes up the central two-thirds, and a column of body copy sits beside it like a magazine caption-and-pull-quote. The grid is asymmetric the way magazine spreads are — text bleeds into image gutters, the image runs to the bleed, and there is a deliberate sense of having opened a printed object.
When it works: products with strong photography, hospitality, fashion, food, travel, lifestyle, agencies, design studios. Also premium SaaS that wants to feel curated rather than developed.
Visual breakdown: a 12-column grid. Headline spans cols 1-12 at the top in a serif display face. Below: image spans cols 1-8 at full bleed (touches left edge); body copy spans cols 9-12 with a top margin so it sits below the image's top edge but above its bottom edge — creating the "caption" feel. Body copy in a clean sans, headline in serif. One pull quote in italics, indented from the body column.
<section class="px-0 pt-12 pb-24">
<h1 class="font-serif text-7xl leading-[1.0] tracking-tight px-12 max-w-[20ch] mb-12">
The kitchen as the whole house.
</h1>
<div class="grid grid-cols-12 gap-8">
<div class="col-span-8">
<img src="/kitchen.jpg" alt="" class="w-full" />
</div>
<div class="col-span-3 col-start-9 pt-12 pr-12">
<p class="text-sm leading-relaxed text-neutral-800 mb-4">
For the past two years we have been thinking less about the appliance and more about the table around it. Our houses begin in the kitchen and grow outward.
</p>
<p class="font-serif italic text-lg leading-snug border-l-2 border-neutral-900 pl-3">
Every other room is a footnote.
</p>
</div>
</div>
</section>Don't: round the corners of the photograph. The Print Spread relies on the image bleeding to the edge or sitting flat in the grid like a printed plate. Rounded corners make it look like a screenshot. It is supposed to look like a page.
12. The Corner-Bracket Hero
The four corners of the headline area are marked with thin L-shaped brackets, like the registration marks on a piece of film or the focus brackets in a camera viewfinder. Inside the brackets, the headline. Outside, almost nothing — maybe one line of metadata in a corner. The hero feels framed, instrumented, scientific.
When it works: photography software, video tools, AI products that want to read as analytical, monitoring tools, security tools, telemetry products. Also the foundation of a sustained design language — Sailop's own HUD aesthetic uses corner brackets as a recurring motif.
Visual breakdown: four absolutely-positioned elements at the corners of a relative container, each rendering an L using two short borders. The headline is centered or left-aligned inside. A single line of monospace metadata in one corner, outside the brackets. Color: typically dark surface with one accent (warm white, an industrial green, an amber). Brackets 16 to 32 pixels long, 2 pixels thick.
<section class="bg-[#0B0B0B] text-[#E8E6DF] min-h-[80vh] flex items-center justify-center p-12">
<div class="relative px-16 py-20 max-w-3xl text-center">
<span class="absolute top-0 left-0 w-6 h-6 border-t-2 border-l-2 border-[#E8E6DF]"></span>
<span class="absolute top-0 right-0 w-6 h-6 border-t-2 border-r-2 border-[#E8E6DF]"></span>
<span class="absolute bottom-0 left-0 w-6 h-6 border-b-2 border-l-2 border-[#E8E6DF]"></span>
<span class="absolute bottom-0 right-0 w-6 h-6 border-b-2 border-r-2 border-[#E8E6DF]"></span>
<h1 class="font-display text-5xl leading-tight tracking-tight">Field. A camera-aware grading suite.</h1>
<div class="font-mono text-xs uppercase tracking-widest text-[#9B9991] mt-8">Build 04.07.2026 / Linux, macOS</div>
</div>
</section>Don't: fill the brackets with a solid border that closes the rectangle. The point of corner brackets is that they are open — they imply the frame without enclosing it. A closed rectangle is just a card.
13. The Datum Hero
The hero leads with a single number. A very large number (the company's age, the customer count, the latency in milliseconds, the percentage improvement) takes up most of the viewport. A small line of text underneath explains what it is. The brand name appears small, in a corner. The composition is built around one statistic carrying the entire emotional weight of the page.
When it works: products with one killer number. Performance products ("0.4ms"), savings products ("$8.2M"), longevity ("Since 1923"), efficiency ("73% less compute"). Also non-profits and missions ("4.1 billion gallons recovered").
Visual breakdown: the number is rendered at viewport-scale type (18 to 28 vw) in a tabular numeric face — Söhne Breit, Inter Display, FK Display, or a heavily geometric face like Druk or Reckless. Below, two short lines in a small clean sans explaining the unit and the context. The brand mark is tiny, in a corner. Background a single solid color, no gradient.
<section class="bg-[#171717] text-[#FAFAF7] min-h-screen flex flex-col justify-center px-12">
<div class="text-[24vw] leading-none font-display tracking-[-0.04em] tabular-nums">0.4</div>
<div class="text-base mt-6">
<div class="font-medium">milliseconds</div>
<div class="text-[#A8A498]">Median request latency at the edge for a Field write, p50.</div>
</div>
<div class="absolute top-6 right-8 font-mono text-xs uppercase tracking-widest">Field</div>
</section>Don't: animate the number counting up from zero. The count-up is a slop tell — it appears in roughly forty percent of generated stat blocks. The number should land. It already happened. Showing it appear devalues it.
14. The Marginalia Hero
A hero designed around the margins. The main column of headline copy sits in the standard reading column, but the real interest is in the marginalia: small annotations, dates, footnote-style commentary in the left or right margin, in a smaller and lighter face. The page reads like a hand-annotated draft of itself — the marginal notes are part of the design.
When it works: editorial, research products, writing tools, education, history, anything scholarly or literary. Good for products built around annotation, note-taking, or commentary.
Visual breakdown: a three-column grid where the central column is the main reading column and the side columns hold marginalia. Marginal notes are set smaller (12 to 14 pixels), often in a different family (italic serif, mono, or humanist sans), aligned with specific lines in the main column. The connection between margin note and main text is implicit — they sit at the same vertical y-coordinate.
<section class="grid grid-cols-[200px_1fr_200px] gap-8 px-12 py-24 max-w-6xl mx-auto">
<aside class="text-xs italic text-neutral-600 leading-relaxed pt-3 text-right">
First written for an essay we never published in 2023.
</aside>
<div>
<h1 class="font-serif text-5xl leading-[1.05] tracking-tight">
An editor for text that argues with itself.
</h1>
<p class="mt-6 text-lg leading-relaxed">
Margins is a writing surface where every claim can carry a counter-claim, every paragraph can have a doubt, and the doubt does not interrupt the reading.
</p>
</div>
<aside class="text-xs italic text-neutral-600 leading-relaxed pt-32">
cf. Genette, “Paratexts”, 1987.
</aside>
</section>Don't: animate the marginalia in on scroll. The effect depends on the notes being already present, like annotations someone else made before you arrived. Animations make them look like tooltips.
15. The Letterpress Hero
A composition that imagines the page as a letterpress poster. The headline is set in a heavy display face — Druk, Caslon Black, Bureau Grot, Reckless Heavy — at extreme sizes, sometimes split across lines with bars or rules between them, printed in a single saturated ink color (deep red, navy, forest green, ink black) on a slightly textured paper background. The composition is dense and centered, with hairline rules separating headline lines, the way an old playbill announced a tour with bars between act names.
When it works: products with personality — breweries, restaurants, bookstores, festivals, conferences, vinyl-era brands, any product that wants warmth and provenance. Also tech products that want to ironically borrow letterpress authority.
Visual breakdown: a single warm-paper background with a subtle SVG noise texture overlay. Type set in a heavy display face at staggered sizes, with hairline horizontal rules between lines. Centered composition. Color: paper plus one saturated ink. No images. No buttons. Date/location metadata at the bottom in small type.
<section class="bg-[#F4ECDD] text-[#3A1F1F] min-h-screen flex flex-col items-center justify-center text-center px-8 py-24">
<div class="text-xl font-display tracking-widest uppercase mb-4">Presents</div>
<hr class="border-t border-[#3A1F1F] w-32 mb-4" />
<h1 class="text-7xl font-display leading-[0.95] tracking-tight mb-2">A FIELD GUIDE</h1>
<hr class="border-t border-[#3A1F1F] w-64 my-4" />
<h1 class="text-9xl font-display leading-[0.95] tracking-tight mb-2">TO LOCAL</h1>
<hr class="border-t border-[#3A1F1F] w-64 my-4" />
<h1 class="text-7xl font-display leading-[0.95] tracking-tight mb-12">SOFTWARE.</h1>
<div class="text-sm font-mono uppercase tracking-widest">Print run 04.2026 · Edition I</div>
</section>Don't: apply the Letterpress treatment to a generic SaaS pitch about onboarding flows. The aesthetic carries craft and place; it needs a product with a story that earns it. If your product is API automation, the Letterpress Hero will read as costume.
16. The Postcard Hero
The hero is shaped like a postcard. A wide rectangle (roughly 16:9 or 4:3) sits centered in the viewport with surrounding paper. Inside: a left side with the message (handwritten-feel headline, a few lines of body), a right side with an "address" (brand name, location, web address, formatted like a postal address). A horizontal hairline divides the two halves, the way a real postcard's reverse is divided.
When it works: travel software, mapping, location-based products, hospitality, agencies with a strong "from somewhere" identity, anything where place is part of the brand. Also a friendly tone for indie products with a personal voice.
Visual breakdown: a centered card with subtle paper-texture background and a thin border inside the visible box. Two columns. Left: handwritten or italic-serif headline ("Greetings from the build directory") and a paragraph of casual body. Right: a faux address block in monospace, with a faux stamp area in the upper right. The card has a slight shadow only, no rounded corners (postcards have square corners).
<section class="bg-[#EAE5D8] min-h-screen flex items-center justify-center p-8">
<div class="bg-[#F4EFE2] border border-[#A89A78] w-full max-w-4xl aspect-[16/10] grid grid-cols-2 relative">
<div class="border-r border-[#A89A78] p-10">
<h1 class="font-serif italic text-4xl leading-tight mb-4">Greetings from <br/>the build directory.</h1>
<p class="text-sm leading-relaxed text-[#3A2E1F]">Spent a week here cleaning up the dependency tree. Found three packages we didn’t need and a forgotten cron job. Sending you the picture.</p>
</div>
<div class="p-10 relative">
<div class="absolute top-6 right-6 w-20 h-24 border-2 border-[#A89A78] flex items-center justify-center text-[10px] uppercase tracking-widest">Stamp</div>
<div class="font-mono text-sm leading-relaxed mt-32">
DEVELOPER<br/>
c/o Yard Tools<br/>
Block 4, Office 12<br/>
Geneva · CH 1204
</div>
</div>
</div>
</section>Don't: tilt the postcard at a five-degree angle. Tilted-card heroes are themselves a slop tell, and the postcard works better flat — when it tilts it reads as a Canva sticker rather than a real artifact.
17. The Brutalist Mono Hero
A hero set entirely in a monospace face, with no images, no decoration, no color other than ink and paper. The composition is a wall of text, often dense, occasionally flush against the viewport edges with no padding. The brand name is a heading, the rest is a series of declarative statements set as a numbered list or continuous paragraph. The aesthetic is web-1.0 academic page meets contemporary brutalism.
When it works: developer tools, indie technical products, terminal-adjacent software, opinionated SaaS, programming languages, infrastructure, low-level tools. Also a deliberate counter-statement against the monoculture for any product whose audience values the gesture.
Visual breakdown: one typeface throughout (a single monospace), one color, paper background. No grid — a single column with maybe max-w-[80ch]. The hero is dense — it does not give the reader breathing room, because the brand voice is "we do not waste your time on whitespace". Headings and body differ only in weight, not face or size. Small ASCII-art rules are acceptable; sparkle pills are forbidden.
<section class="bg-[#F8F5EE] text-[#1A1A1A] font-mono min-h-screen p-8 max-w-3xl">
<h1 class="text-3xl font-bold mb-2">harden(1) - a config linter for production yaml</h1>
<pre class="text-sm leading-relaxed whitespace-pre-wrap">
NAME
harden - validate kubernetes, docker, and terraform config
SYNOPSIS
harden [--strict] [--fix] [path...]
DESCRIPTION
harden walks a directory of infrastructure config and complains
when something will hurt you in production. it does not generate.
it does not suggest. it complains, with line numbers.
INSTALL
brew install harden # macos / linux
cargo install harden # everywhere else
apt install harden # debian-based, after the apt repo opens
WHY
we got tired of debugging clusters at 2am because a yaml file
in a sibling repo had drifted three months ago.
LICENSE
MIT.
</pre>
</section>Don't: warm the page up with a soft drop shadow on a card or a "Get Started" gradient button at the bottom. The Brutalist Mono Hero must commit. The smallest decoration breaks the spell — at that point you have an inconsistent hero, not a brutalist one.
18. The Magazine Cover Hero
The hero behaves like a magazine cover. The brand name appears at the top as a masthead-style logotype across the full width. Below, a single dominant image. Layered over the image (the way a magazine layers cover-line text over photography) are several short headlines in different sizes and positions: a main cover line, two or three secondary lines, a small "issue / month" indicator. No buttons.
When it works: products with a publication identity. Newsletters, content products, podcasts, conferences, event landings, fashion brands, lifestyle products. Useful for companies that want to feel like a thing you "subscribe" to rather than "use".
Visual breakdown: a viewport-height container with a single full-bleed background image. The masthead logotype sits at the top — large, bold, often a serif or wide sans, often with a thin rule below it. Cover lines positioned with absolute layout in three or four spots — top right, lower left — at different sizes and visual weights. A small "Issue No. X / Date" appears small.
<section class="relative min-h-screen bg-cover bg-center flex flex-col" style="background-image:url('/cover.jpg')">
<div class="px-8 pt-8 flex items-end justify-between border-b border-white/40 pb-2">
<h1 class="text-white font-serif text-7xl tracking-tight">FIELD</h1>
<div class="text-white/80 text-xs font-mono uppercase tracking-widest">Issue 12 · Apr 2026</div>
</div>
<div class="absolute top-1/3 left-8 max-w-md">
<h2 class="text-white font-display text-5xl leading-[1.05]">The new shape of release notes.</h2>
</div>
<div class="absolute bottom-32 right-8 max-w-xs text-right">
<h2 class="text-white font-display text-2xl leading-snug">Inside: how Yard rebuilt its deploy story in 11 weeks.</h2>
</div>
<div class="absolute bottom-12 left-8 text-white/80 text-sm font-mono">field.media / subscribe</div>
</section>Don't: use stock photography. The Magazine Cover requires a single, considered, ideally commissioned image. A stock photo collapses the metaphor — magazine covers earn their authority from the photograph being unique to the issue.
19. The Field-Notes Hero
A composition that mimics a notebook page. Lined or grid paper texture in the background. The brand name is handwritten or set in a script-like face at the top. Below, dated entries — short, paragraph-length notes with dates and times in the margin — describe what the product is, what the team has been doing, what the user can expect. The tone is journal, not pitch.
When it works: indie SaaS, designers' portfolios, agencies, small teams, products that want to feel personal. Especially good for early-stage products where the journey is the marketing.
Visual breakdown: a paper background with a subtle ruled-line SVG. Two columns: a narrow left margin for dates (tabular monospace), a wider right column for entries (serif or humanist sans). Entries stacked, separated by extra spacing rather than rules. The brand mark set as if handwritten — a real script face or a precise display sans that reads like a signature.
<section class="bg-[url('/ruled-paper.svg')] bg-repeat min-h-screen px-12 py-16 max-w-3xl mx-auto">
<div class="font-display italic text-4xl mb-12">Yard — field notes</div>
<div class="space-y-8 grid grid-cols-[80px_1fr] gap-x-6">
<div class="font-mono text-xs text-neutral-500 pt-2">28 Apr<br/>14:02</div>
<div>
<h2 class="font-medium text-xl mb-2">Shipped the v2 deploy view.</h2>
<p class="text-base leading-relaxed">After three months of iteration, we rebuilt the deploy view to show the diff before the action, not after. It is faster to read and harder to mis-deploy.</p>
</div>
<div class="font-mono text-xs text-neutral-500 pt-2">22 Apr<br/>09:47</div>
<div>
<h2 class="font-medium text-xl mb-2">A note on regions.</h2>
<p class="text-base leading-relaxed">Yard now supports custom regions. We added it because three customers asked, and because we wanted to be able to host things in Geneva.</p>
</div>
</div>
</section>Don't: use Comic Sans or an obvious "handwriting" font for the brand mark. The Field-Notes Hero is supposed to feel like a designer's notebook, not a children's book. Pick a script with restraint, or a precise italic serif like Reckless or Tiempos italic.
20. The Kiosk Hero
A composition built around a list of small clickable tiles, each leading to a different surface of the product — like a self-service kiosk in a transit station or museum. The brand name sits at the top. Below, a grid of 4 to 9 tiles, each with a number, a short title, and a one-line description. The tiles are not features in the marketing sense — they are entry points: "1. Read the changelog", "2. Browse customer projects", "3. Try it in your terminal".
When it works: products with multiple distinct user journeys. Documentation home pages, multi-product companies, agencies, education platforms, marketplaces, internal tools. Good when you do not know which audience is landing and you want to give them all an obvious door.
Visual breakdown: a header strip with the brand mark and one line of orientation text. Below, a CSS grid of 4 to 9 tiles. Each tile has a thin border (no shadow), a number in the upper left, a heading, a description. Tiles are equal-width but can vary in height for compositional interest. Hover state is a subtle background fill, not a transform-translate. No tile uses a shadow or a gradient.
<section class="px-8 py-16 min-h-screen">
<div class="flex items-baseline justify-between mb-12">
<h1 class="font-display text-3xl">Atlas</h1>
<div class="text-sm text-neutral-600">Pick where to start.</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-px bg-neutral-200">
<a href="/quickstart" class="bg-white p-8 hover:bg-neutral-50 block">
<div class="font-mono text-xs text-neutral-500 mb-4">01</div>
<h2 class="font-medium text-xl mb-2">Quickstart</h2>
<p class="text-sm text-neutral-700">Get the CLI installed and a first project running in roughly six minutes.</p>
</a>
<a href="/docs" class="bg-white p-8 hover:bg-neutral-50 block">
<div class="font-mono text-xs text-neutral-500 mb-4">02</div>
<h2 class="font-medium text-xl mb-2">Documentation</h2>
<p class="text-sm text-neutral-700">The full reference, organized by surface and version, including the deprecated APIs.</p>
</a>
<a href="/examples" class="bg-white p-8 hover:bg-neutral-50 block">
<div class="font-mono text-xs text-neutral-500 mb-4">03</div>
<h2 class="font-medium text-xl mb-2">Examples</h2>
<p class="text-sm text-neutral-700">14 working repositories, ranging from minimal to production, all under MIT.</p>
</a>
<a href="/changelog" class="bg-white p-8 hover:bg-neutral-50 block">
<div class="font-mono text-xs text-neutral-500 mb-4">04</div>
<h2 class="font-medium text-xl mb-2">Changelog</h2>
<p class="text-sm text-neutral-700">What we shipped, including the things we shipped and immediately reverted.</p>
</a>
<a href="/pricing" class="bg-white p-8 hover:bg-neutral-50 block">
<div class="font-mono text-xs text-neutral-500 mb-4">05</div>
<h2 class="font-medium text-xl mb-2">Pricing</h2>
<p class="text-sm text-neutral-700">Free for hobby. Twelve dollars a month per project for production.</p>
</a>
<a href="/blog" class="bg-white p-8 hover:bg-neutral-50 block">
<div class="font-mono text-xs text-neutral-500 mb-4">06</div>
<h2 class="font-medium text-xl mb-2">Writing</h2>
<p class="text-sm text-neutral-700">Essays on infrastructure, on craft, and a few obituaries for products we admired.</p>
</a>
</div>
</section>Don't: add icons to each tile. The Kiosk works because it is type-driven and reads as a directory. Adding a Heroicon to each tile turns it into a generic feature grid — the second-most-common slop pattern after the Centered Sparkle Stack, and a cousin of the three-identical-cards problem.
21. The Wikipedia-Stub Hero
The composition mimics the opening of a Wikipedia article. The brand name appears in bold at the start of an inline paragraph, followed by a parenthetical pronunciation guide and short etymology, then a definition sentence in straightforward encyclopedic prose. Below the paragraph, a small "Contents" table with anchor links to later sections, the way Wikipedia stubs link out to subsections.
When it works: products that benefit from looking factual rather than promotional. Reference products, tools with a long history they want to lean on, products with a complicated story, enterprise software, and any product whose audience is skeptical of marketing voice. A wonderful container for self-effacing brands that want the page to read like documentation.
Visual breakdown: serif body text — Linux Libertine, Charter, Tiempos Text, or a system serif — at 16 to 18 pixels with 1.6 line-height. The brand name bolded inline at the start. A pronunciation in IPA (or pseudo-IPA) in slashes after the name. The contents block is a small numbered list with anchor links. No images in the hero. Color: dark ink on warm paper, no accent, perhaps one blue-underline link color reminiscent of MediaWiki.
<section class="px-8 py-16 max-w-3xl mx-auto font-serif">
<p class="text-lg leading-relaxed">
<strong>Yard</strong> (/jɑːd/, from <em>shipyard</em>; sometimes called <em>Yardctl</em>) is an open-source deployment tool for small teams who run their own infrastructure on commodity Linux. Originally written in 2022 by a four-person infrastructure team in Lisbon, it has since become a default choice for self-hosted deployments at companies that prefer not to depend on managed cloud control planes.
</p>
<div class="mt-12 border border-neutral-300 bg-[#FAFAF7] p-4 max-w-md text-sm">
<div class="font-medium mb-2">Contents</div>
<ol class="list-decimal pl-5 space-y-1">
<li><a href="#install" class="text-blue-700 underline">Installation</a></li>
<li><a href="#concepts" class="text-blue-700 underline">Concepts</a></li>
<li><a href="#why" class="text-blue-700 underline">Why Yard exists</a></li>
<li><a href="#community" class="text-blue-700 underline">Community and governance</a>
<ol class="list-decimal pl-5 mt-1">
<li><a href="#contrib" class="text-blue-700 underline">Contributing</a></li>
<li><a href="#sponsors" class="text-blue-700 underline">Sponsors</a></li>
</ol>
</li>
<li><a href="#refs" class="text-blue-700 underline">References</a></li>
</ol>
</div>
</section>Don't: replace the underlined blue links with hover-colored text. The MediaWiki link aesthetic is part of the joke and part of the credibility. Modernizing the link styling collapses the borrowed authority.
Quick-reference matrix: audience type to hero composition
The twenty-one compositions are not interchangeable. Each fits an audience temperament. Use this matrix as a filter, not a rule — but it will get you started in the right neighborhood.
| Audience / industry | Hero compositions to try | |---|---| | Developer tools and CLIs | Terminal, Brutalist Mono, Coordinate, Wikipedia-Stub, Index | | Enterprise B2B (procurement, finance, legal) | Editorial Slab, Wikipedia-Stub, Datum, Manifesto Block | | Design tools, creative software | Asymmetric Split, Print Spread, Marquee, Magazine Cover | | Indie SaaS, small team products | Field-Notes, Manifesto, Footnote, Postcard | | Hardware and physical products | Print Spread, Asymmetric Split, Datum, Coordinate | | Education and research | Marginalia, Wikipedia-Stub, Index, Dictionary Entry | | Hospitality, food, travel | Postcard, Print Spread, Letterpress, Magazine Cover | | Consumer apps with personality | Dictionary Entry, Marquee, Letterpress, Postcard | | AI products that don't want to look AI | Coordinate, Corner-Bracket, Datum, Editorial Slab | | Documentation home pages | Index, Sidebar, Kiosk, Wikipedia-Stub | | Multi-product companies | Kiosk, Index, Sidebar | | Performance or numbers-driven pitches | Datum, Coordinate, Brutalist Mono | | Brand-led launches and campaigns | Marquee, Magazine Cover, Letterpress | | Editorial, content products, newsletters | Magazine Cover, Manifesto Block, Field-Notes, Editorial Slab | | Agencies and studios | Asymmetric Split, Footnote, Sidebar, Index | | Conferences and events | Letterpress, Magazine Cover, Marquee | | Photography, video, color tools | Corner-Bracket, Print Spread, Asymmetric Split | | Mapping and location software | Coordinate, Postcard, Index |
A second filter: how loud do you want the hero to be? Datum, Marquee, and Letterpress are loud. Footnote, Marginalia, and Wikipedia-Stub are quiet. Editorial Slab, Asymmetric Split, and Sidebar are middle volume. Pick the volume first, then the composition.
A third filter: how much content does the hero need to carry? If it only needs to plant a flag (brand recognition, single message), use Marquee, Datum, Letterpress, or Postcard. If it needs to carry an argument (manifesto products, opinionated software), use Manifesto Block, Editorial Slab, or Wikipedia-Stub. If it needs to act as navigation (multi-product, documentation), use Kiosk, Index, or Sidebar.
How Sailop generates anti-slop heroes mathematically
Every Sailop seed produces a unique design system. Inside that system, the hero composition is not a choice the model makes from a flat dropdown — it is a derivation from the seed itself.
Sailop maps the input seed (your project name, your industry vector, your brand temperament) into a ~14-dimensional design parameter space. One of those dimensions is "compositional skeleton". Of the twenty-one compositions here, fourteen are active in Sailop's procedural rotation: Editorial Slab, Asymmetric Split, Marquee, Footnote, Coordinate, Terminal, Print Spread, Corner-Bracket, Datum, Marginalia, Brutalist Mono, Magazine Cover, Field-Notes, and Wikipedia-Stub. The remaining seven (Dictionary Entry, Manifesto Block, Index, Sidebar, Letterpress, Postcard, Kiosk) are opt-in overrides when the seed has strong signal in their direction — a literary product, a multi-surface product, a hospitality product.
The mechanism is structural, not parametric. Sailop does not pick "hero variant 7 with blue accent". It picks a skeleton — Editorial Slab, say — then derives every other choice in the system (typography pair, palette, spacing scale, accent placement, navigation, even how buttons are styled if buttons exist at all) so they reinforce that skeleton. An Editorial Slab seed gets serif display type, a left-aligned grid, a single-ink palette with one accent, generous vertical space, and a footer in monospace metadata. A Terminal seed gets a single mono face, dark or paper background, ASCII rules, prompts as headings, no decorative imagery. The skeleton drives everything.
That is the difference between a generator that picks colors from a dropdown and one that derives an entire system from a constraint. We wrote about why it matters in from AI-slop to signature: 73 patterns for 2026. For the prompt-engineering side — how to ask Claude, Cursor, or v0 for one of these specific compositions instead of the default — the anti-slop prompt template shows the structure.
Even if you do not use Sailop, the approach works manually. Pick the skeleton first. Pick a typography pair that reinforces it. Pick a color logic that does not contradict it. Build the page to the skeleton. Every decision is downstream of the composition, not parallel to it.
What goes wrong when you fight slop with parameters
A common reaction to this catalog: "OK, I'll write a Tailwind theme that picks one of 21 hero variants and randomizes the colors, the typography, and the spacing." Please do not. We have seen the result. It is worse than the original Centered Sparkle Stack.
Variation by parameter — different colors, different fonts, different paddings — does not break the silhouette. The silhouette is the structural skeleton: where the headline goes, what is above it, what is below it, what the proportions are. If you keep the centered-stack-with-pill-and-buttons skeleton and swap from-blue-500 to-purple-500 for from-emerald-500 to-teal-500, you have produced exactly what the slop economy already produces in volume. The page still feels the same. The user still clocks the silhouette in two seconds.
Real variation is structural. The Editorial Slab, the Sidebar, and the Marquee have different skeletons — different content orders, different grids, different proportions, different reading paths. Switching between them changes what the page *is*, not just what it looks like. That is the level at which anti-slop work happens.
A second warning. Do not mix elements from multiple compositions in one hero. A Terminal Hero with a Marquee headline overlay and an Editorial Slab byline is not three times as anti-slop. It is illegible. Each composition is internally coherent. Pick one. Build the page to it. Rotate to a different one for your next project.
For a deeper survey of how the slop economy works structurally — why the same compositions recur across generators, what training-data pressure produces the monoculture, and what to do about it at the system level rather than the page level — the state of the AI-generated web in 2026 is the longer companion. For a brutally specific tour of the major generators, see the honest reviews of v0.dev, Lovable, and Bolt.new; each ships its own variant of the centered stack as the default, and each needs specific prompting to escape it.
Closing: the hero is the seam
Every page has a seam where the audience decides whether they trust the maker. For most of the AI-generated web, that seam is the hero. It is the first surface, the largest visual element, the place where the silhouette loads and the unconscious decision happens — "I have seen this before, I know what this is, I know how seriously to take it". When the silhouette is the Centered Sparkle Stack, the audience has filed the page into the bin marked "AI-generated, not interesting" before reading a word.
The work is to break the silhouette. Not with an extra parameter, not with a different shade of purple, but with a different skeleton entirely. Twenty-one of those skeletons live in this article. Pick one that fits your audience and your voice, build it, and let everything else follow from it. The hero is supposed to be the place the audience meets the maker. Make it look like there is one.
Take the catalog. Build something that doesn't look like a generator made it. The web will thank you, in a quiet way, by reading.
SHIP CODE THAT LOOKS INTENTIONAL
Scan your frontend for AI patterns. Generate a unique design system. Stop shipping the same blue gradient as everyone else.