Hero Section Anti-Slop: 21 Compositions That Don't Look AI-Generated (2026)
The centered eyebrow pill + gradient headline + 'Get Started / Learn More' button row is in 60% of AI-generated landings. Here are 21 hero compositions that read as designed, with code patterns and breakdowns.
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 5xl or 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, often with a CSS shadow-2xl and 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 the various 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. The structure has become so ambient that 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 been using 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 — let us call it the "Centered Sparkle Stack" or CSS for short, since it is the unofficial default of CSS-the-language-of-the-web — 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 (usually space-y-6 or gap-8). There is 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 small rounded-full element above the headline containing 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-2023 landing pages. It serves no information design function. It is decorative scaffolding that the model has been taught is required.
The third is the gradient text. Some half of the headline is rendered with a CSS gradient clip, almost always a blue-to-purple, blue-to-pink, or purple-to-pink. This is so common that we wrote a separate piece on it (see the Tailwind blue-purple gradient signature analysis). The gradient is supposed to add visual energy. After the ten-thousandth instance, it adds nothing. It is wallpaper.
The fourth is the muted-gray subhead. One sentence, sometimes two, set in text-gray-600 or text-muted-foreground, explaining what the product does in B2B-SaaS English. "Streamline your workflow with AI-powered automation that scales." The subhead reads like every other subhead because the model has been trained to write subheads, and there is exactly one subhead voice in the training data.
The fifth is the dual button row. A filled primary CTA and an outlined secondary CTA, side by side, with an arrow icon on the primary. Always two buttons. 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 inside a div with rounded-2xl shadow-2xl border, sometimes with a faux browser chrome (three colored dots), sometimes inside a transform: perspective 3D tilt. The screenshot is rarely actually informative — it is just an image of "an interface" in the same way the eyebrow pill is "a label".
Once you can name those six tells, you can never unsee them. That is the bad news. The good news is that walking away from any single one of them — even just one — already breaks the silhouette. Walking away from all six is the project of this article.
If you want the fuller catalog of how AI-generated sites give themselves away across the whole page, not just the hero, see Detect an AI-generated site in 30 seconds: 21 signs. For the deeper structural argument about 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 subhead in the marketing sense. 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, and 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 horizontal 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 you have lost the entire effect.
2. The Asymmetric Split
Two columns of unequal weight. Left column (typically forty percent of the viewport) carries the headline, a short paragraph, and a single text link with an underline. Right column (sixty percent) carries either a single product photograph, a chart, a code snippet, or a piece of generative artwork. The split is offset — the left column starts higher than the right, the right column extends past the bottom of the left, and there is a deliberate vertical mismatch that 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 an honest piece of 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 columns 7 to 12 (note the gap on column 6). Headline left-aligned, set in a precise sans (Söhne, Inter Display, Neue Haas Grotesk) at a moderate size (48 to 72 pixels). The right column is offset down by one or two grid rows from the left. The image or snippet on the right has no rounded corners, no shadow, no border — it sits flat on the page 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 of the asymmetric split 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 entire viewport width, set in massive type (often 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 the marquee, in dramatically smaller type, there is one line of context — usually a sentence fragment, a date, a subtitle, or a colophon. No buttons.
When it works: brand sites, agencies, fashion, music, conference landing pages, 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. You 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, Drukar, Reckless, ABC Diatype Mono, FK Display. Track tight (-0.04em). One color, no gradient. Below the marquee, a small bar of metadata in 12 to 14 pixel type. 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 — set in 14 to 16 pixel type — describes the product in plain language. Below that, a generous expanse of whitespace. Then, anchored to the bottom of the viewport, a wider headline in a moderate type size acts as the page's signature, almost like a footnote returning to the main text. The reading order is reversed: details first, identity second.
When it works: products that are confident enough to bury the lede. Consultancies, research labs, designers' own portfolios, products with a quiet voice. Also works as 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, set in a regular weight at moderate size. The bottom headline is heavier (medium or semibold), larger but not extreme (40 to 64 pixels), and has 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 in 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-like 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 visual 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. Also extremely good for products with quirky names — turning the name into a "definition" makes the unfamiliar feel canonical.
Visual breakdown: mixed serif (for the headword) and sans (for the part-of-speech tag and definitions). Numbered list using 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 the 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, critical 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 or left-aligned (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, set 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 of the hero is a numbered list of section names, each with a brief one-line description and a small page-number-style indicator on the right. The page itself becomes the index, and 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 column for the section name and description, right column for the section number, page reference, or category. Type is set in a strict scale (e.g. 18 pixels for the entries) with consistent leading. A horizontal rule separates each entry. The entry numbers are right-aligned and use tabular numerals. The brand mark appears once, small, in the 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 content 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 holds a continuous stream of content from the next section. The hero text is therefore vertically tall and narrow — a column of copy rather than a banner. This inverts the usual hero direction.
When it works: editorial sites, software documentation home pages, products with strong photography, single-page sites where the content scrolls in the right column while the sidebar stays fixed. Also good for niche products that want to feel inhabited rather than announced.
Visual breakdown: a fixed or sticky left column, around 280 to 360 pixels wide. Inside the column: the brand mark at the top, a vertical stack of headline (set in a moderate size, 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 that scrolls 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 — usually a horizontal scale across the top and a vertical scale down one side — are drawn as thin rules with tick marks. A few labels are positioned at specific coordinates inside the grid. The brand name and a one-line description sit at one of those coordinates, usually off-center. The composition is geometric, technical, and reads as something you'd encounter in 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 works as 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, and a clean sans for the headline. Color: usually 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 animation, not GIF. The background is 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. That is the most over-used decorative tic in AI-generated landing pages. A real terminal has no window chrome inside its content area — it's a solid panel of text. Keep it that way.
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 (a single hero photograph or illustration) takes up the central two-thirds, and a column of body copy sits beside the image like a magazine caption-and-pull-quote. The grid is asymmetric in 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 works for premium SaaS that wants to feel curated rather than developed.
Visual breakdown: a 12-column grid. Headline spans cols 1-12 at the top, set 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 a "caption" feel. Body copy in a clean sans, the 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 Hero 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
A composition where 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 the brackets, 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 works as 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 sits in one corner, outside the brackets. Color: typically dark surface with a single accent (warm white, an industrial green, an amber). The brackets themselves are 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 whole 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 number of customers, the latency in milliseconds, the percentage improvement) takes up most of the viewport. A small line of text underneath explains what the number is. The brand name appears small, in a corner. The composition is built around a single 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 works for 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-aligned numeric face — Söhne Breit, Inter Display, FK Display, or a heavily geometric typeface like Druk or Reckless. Below the number, two short lines of text 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 animation 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, marginal notes, footnote-style commentary in the left or right margin, in a smaller and lighter type 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. Also 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 in a smaller size (12 to 14 pixels), often in a different family (italic serif, mono, or a humanist sans), and are 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 whole effect depends on the marginal notes being already present, like notes on a page that someone else has read before you. 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 multiple lines with bars or rules between them, and 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 horizontal rules separating different lines of the headline, the way an old playbill might announce 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 works for 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. The composition is centered. Color: paper plus one saturated ink. No images. No buttons. Date/location metadata at the bottom in a 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 requires 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 the rectangle: 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 useful as a friendly tone for indie products with a personal voice.
Visual breakdown: a centered card with subtle paper-texture background and a thin border that sits inside the visible box. Two columns inside the card. 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 as a continuous paragraph. The aesthetic is web-1.0 academic page meets contemporary brutalist design.
When it works: developer tools, indie technical products, terminal-adjacent software, opinionated SaaS, programming languages, infrastructure, low-level tools. Also works as a deliberate counter-statement against the prevailing design monoculture for any product whose audience values the gesture.
Visual breakdown: one typeface throughout (a single monospace), one color, paper background. No grid — the text is 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 in a masthead-style logotype across the full width. Below, a single dominant image. Layered over the image (in the way a magazine cover layers cover-line text over photography) are several short headlines in different sizes and positions: a main cover line, two or three secondary cover lines, and a small "issue / month" indicator. There are no buttons.
When it works: products with a publication identity. Newsletters, content products, podcasts, conferences, event landings, fashion brands, lifestyle products. Also useful for companies that want to feel like a thing you "subscribe" to rather than a thing you "use".
Visual breakdown: a viewport-height container with a single full-bleed background image. The masthead logotype sits at the top — large, bold, often in a serif or wide sans, often with a thin rule below it. Cover lines are positioned with absolute layout in three or four spots — top right, lower left, etc. — at different sizes. Each cover line has a different visual weight. 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 Hero requires a single, considered, ideally commissioned image. A stock photo collapses the whole 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 (in a tabular monospace), a wider right column for the entries (in a serif or humanist sans). Entries are stacked, separated by extra spacing rather than rules. The brand mark is set as if handwritten — either 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 use 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 tiles (4 to 9), each containing 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. Also good when you do not know which audience is landing on your site and you want to give them all an obvious door to walk through.
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, and 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 Hero works because it is type-driven and reads as a directory. Adding a Heroicon to each tile turns it into a generic feature grid, which is the second-most-common slop pattern after the Centered Sparkle Stack.
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, followed by a definition sentence in straightforward encyclopedic prose. Below the paragraph, a small "Contents" table of contents with anchor links to the page's 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 to tell, enterprise software, and any product whose audience is skeptical of marketing voice. Also 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 — set at 16 to 18 pixels with 1.6 line-height. The brand name is bolded inline at the start of the paragraph. A pronunciation in IPA (or pseudo-IPA) appears in slashes after the name. The contents block is a small numbered list with anchor links. There are no images in the hero itself. Color: dark ink on warm paper, no accent color, 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 above 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 to apply on top of the matrix: 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 the hero only needs to plant a flag (brand recognition, single message), use Marquee, Datum, Letterpress, or Postcard. If the hero needs to carry an argument (manifesto products, opinionated software), use Manifesto Block, Editorial Slab, or Wikipedia-Stub. If the hero 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 in this article, fourteen are currently 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 available as opt-in overrides when the seed has strong signal in their direction (a literary product, a multi-surface product, a hospitality product, etc.).
The mechanism is structural, not parametric. Sailop does not pick "hero variant 7 with blue accent". It picks a compositional skeleton — Editorial Slab, say — and then derives every other choice in the system (typography pair, color palette, spacing scale, accent placement, navigation style, even the way buttons are styled if buttons exist at all) so that 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 set in monospace metadata. A Terminal seed gets a single mono face, dark or paper background, ASCII rules, prompts as headings, and no decorative imagery. The skeleton drives everything.
This 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 that difference matters in from AI-slop to signature: 73 patterns for 2026. For the prompt-engineering side — how to ask Claude or another model 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 same approach works manually. Pick the skeleton first. Pick a typography pair that reinforces the skeleton. Pick a color logic that does not contradict the skeleton. Build the page to the skeleton. The decisions are downstream of the composition, not parallel to it.
A short addendum on what goes wrong when you fight slop with parameters
A common reaction to this catalog will be: "OK, I can write a Tailwind theme that picks one of 21 hero variants and randomizes the colors, the typography, and the spacing." Please do not do that. We have seen the result. It is worse than the original Centered Sparkle Stack.
The reason is that 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 just swap the gradient for a different gradient, you have produced what the AI-slop economy already produces in volume. The pages still feel 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, related warning. Do not mix and match elements from multiple compositions in the same 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.
If you want a deeper survey of how the AI-slop economy works structurally — why the same compositions keep recurring 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 to this article. 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 requires 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, the place where the eye lands 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 already filed the page into the bin labeled "AI-generated, not interesting" before they have read a word.
The work, then, 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 in the page 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.