The Anti-Slop Design Guide

A field manual for making interfaces that look designed, not generated

Part 1 — The Anatomy of Slop

1.1 What AI slop is

AI slop is not ugly design. That is the first thing to understand, and the thing most people get wrong when they try to diagnose it. Slop is frequently pretty in a screenshot. It has gradients. It has rounded corners. It has shadows that whisper "premium." It passes the two-second glance test, which is precisely why so much of it ships.

Slop is the absence of decisions. Every element on a slop page is the statistically most likely element to appear in that position, rendered in the statistically most likely style, with the statistically most likely copy. Nothing on the page exists because a person looked at the specific product, the specific audience, and the specific message, and chose. It is design by autocomplete.

A human designer with taste makes hundreds of small commitments: this typeface because it matches the product's voice; this much space above the heading because the heading belongs to what follows, not what precedes; this one accent color because the palette needs exactly one; this feature gets a full-width treatment because it is the reason people buy, and the other five get a quiet list because they are table stakes. Slop makes none of these commitments. It hedges everything. Every feature gets an identical card. Every section gets identical padding. Every heading gets the same size, weight, and centering. The result is a page that says nothing because it emphasizes everything.

Here is the working definition this document uses:

Slop is design where no decision can be traced to the specific content, product, or audience it serves. Swap the product name and logo, and the page works equally well — which is to say, equally poorly — for a CRM, a dog-walking app, or a blockchain.

The test is transplantability. Take any section of the page and imagine it on a competitor's site. If it fits perfectly, it was never designed for you.

1.2 Why generators produce it

Understanding why the slop aesthetic exists makes it much easier to avoid, because you stop treating the symptoms and start treating the cause.

Language models trained on the public web have seen millions of landing pages, tutorials, component libraries, and Dribbble shots. When asked to "make a modern, beautiful landing page," they produce the centroid of that distribution. The centroid of all landing pages is: a centered hero with a gradient, a badge that says "✨ Announcing our Series A" or similar, three feature cards with icon circles, a testimonial wall, a pricing table with the middle tier highlighted, and a dark footer. This is not a bug in the model. It is the correct answer to an underspecified question. "Make it modern" means "make it look like the average of everything tagged modern."

Three properties of generated design follow directly from this:

1. It optimizes for first-glance impressiveness, not sustained coherence. Training rewards outputs that look right in isolation. A gradient headline looks impressive in isolation. Sixteen gradient elements on one page look like a carnival, but the model generated each one locally, one token at a time, without a global budget. Human designers keep a running account: "I've spent my one gradient. I've spent my one big type moment." Generators have no account to keep.

2. It decorates instead of structuring. When a model can't make a hierarchy decision (what matters most on this page?), it substitutes decoration (make everything matter visually). Bold everything. Card everything. Shadow everything. Decoration is the noise you get when structure is missing. A page with real hierarchy can survive being rendered in one font, one weight, and zero ornaments — the structure carries it. Slop collapses instantly under that test, because remove the ornaments and every element has equal rank.

3. It has no system, only instances. A design system is a small set of rules that generate all the specific values on the page: a type scale, a spacing scale, a palette with assigned roles, a radius scale. Slop has values without rules — padding of 18px here, 24px there, 20px elsewhere, each locally plausible, globally random. You can always detect this with an audit: list every font size, every spacing value, every radius, every hex code on the page. A designed page produces short lists. Slop produces long ones.

1.3 The taxonomy of tells

The following is a catalog of the specific artifacts that mark a page as generated. Later parts of this document explain the underlying principle each one violates and what to do instead; this section is the field-identification guide. If your page has three or more of these, it reads as slop regardless of how polished each individual element is.

Typography tells

Layout and spacing tells

Color tells

Component tells

Copy tells

Structural tells

None of these is individually fatal. Real designers use dark footers, card grids, even the occasional gradient. The difference is that a designer uses a pattern because it serves this page, and pays for it somewhere else with restraint. Slop uses every pattern at once because each was independently "the done thing."

1.4 The three root causes

Every tell in the catalog above traces back to one of three underlying failures. Fix these three and the symptoms disappear on their own; chase the symptoms without fixing these and new tells will regenerate in their place.

Root cause 1: No point of view

A designed page takes a position: this product is calm infrastructure, or sharp tooling for experts, or friendly software for people who hate software. Everything downstream — typeface, palette, density, copy register — flows from the position. Slop has no position, so it defaults to "modern SaaS," which is not a position but the absence of one.

The fix is to write the position down before touching any visual property. One sentence: "Outpost is the monitoring tool that treats downtime as an emergency, not a dashboard — it should feel like a well-run fire station: calm, legible, instant." Every subsequent decision can now be tested against the sentence. Would a well-run fire station have a purple gradient? A drifting blob? Twelve pastel icon circles? The sentence answers questions the mood board can't.

Root cause 2: Decoration substituting for hierarchy

Hierarchy is the ranked ordering of what the viewer should perceive first, second, third. It is built with contrast in size, weight, color, and position — which means it is built by withholding emphasis from most elements so a few can have it. Decoration is what fills the vacuum when nobody ranked anything: if you can't decide what deserves the shadow, everything gets the shadow.

The squint test diagnoses this in five seconds. Squint at the page (or blur the screenshot 8px). On a designed page you can still see the ranking: one dominant element, clear groups, an obvious reading path. On slop, squinting produces uniform gray porridge punctuated by identical card rectangles.

Root cause 3: Instances without a system

Every value on a designed page is drawn from a small named set. Font sizes come from a modular scale with six steps. Spacing comes from a base-8 progression. Colors come from a palette with roles: one neutral ramp doing 90% of the work, one primary, at most one accent. Radii come from a three-step scale tied to element size. When every value is drawn from a set, the page becomes self-consistent — parts agree with each other even when they never appear side by side. That agreement is most of what people mean when they say a design feels "clean" or "professional," and its absence is most of what they mean by "off."

The audit is mechanical and always available: extract every font-size, every margin/padding/gap, every border-radius, every color from the page. Count the distinct values. A designed landing page typically has 5–7 font sizes, 8–10 spacing values, 2–3 radii, and under a dozen colors including all the neutrals. Slop routinely doubles or triples every one of those counts.

1.5 Operating principles

The rest of this document is organized by discipline — typography, spacing, color, components, copy — but five principles run through all of them. They are the generators; everything else is generated.

1. Subtraction is the default move. When a page feels wrong, the first hypothesis is that it has too much, not too little. Remove the badge. Remove the second button. Remove the card borders and let space do the grouping. Remove four of the five font weights. Every removal that doesn't break the page was overhead. Slop is additive by nature — the fix is subtractive by discipline.

2. One idea per surface. Each screen, each section, each component gets one job. The hero's job is the value proposition; it is not also the feature tour, the social proof, and the announcement banner. When a section tries to do three things, split it or cut two.

3. Hierarchy before aesthetics. Rank the content first — literally write the ranked list — then spend visual contrast according to rank. No element may be more visually prominent than its rank justifies. This single rule, enforced honestly, eliminates most decoration, because most decoration is unearned prominence.

4. Systems over instances. Never choose a value; choose a scale, then pick from it. If a design need can't be met by the scale, the scale gets amended deliberately — one new value, adopted globally — rather than patched locally with a one-off.

5. Spend your weirdness budget in one place. A memorable page has exactly one unusual move: a striking typeface, an unexpected layout, a bold color field, a distinctive illustration style. One. The rest of the page is disciplined and quiet so the move can land. Slop inverts this: ten timid decorations and zero memorable moves. If you want the gradient, you can have the gradient — and nothing else.

1.6 How to use this document

Parts 2 through 5 cover the visual disciplines in order of leverage: typography first because text is 90% of a landing page by area and 100% by function; then spacing, which is the discipline slop most visibly lacks; then color, where slop is most flamboyant; then components, surfaces, imagery, and motion. Part 6 covers copy — which is design, not something poured into design afterwards — the anatomy of a landing page that isn't the canonical slop skeleton, and the audit checklists that make all of this enforceable rather than aspirational.

Concrete numbers are given throughout — specific scales, specific ratios, specific hex values. They are defaults, not laws. The point of a default is that departing from it is a decision, and decisions are the whole game. You can violate any rule in this document on purpose. You may not violate it by accident.

Part 2 — Typography

2.1 Text is the interface

A landing page is a written argument with a layout. Measured by area, 80–90% of what a visitor actually processes is text: the headline, the subhead, the feature explanations, the pricing numbers, the button labels. Typography is therefore not one discipline among several — it is the load-bearing wall. Get typography right and a page with no images, no gradients, and no icons can be excellent. Get it wrong and no amount of surface polish recovers it.

This is also why typography is the highest-leverage place to defeat slop. Generated pages treat text as gray filler to pour between decorations. Designed pages treat text as the product on display and everything else as shelving.

Start every design with text. Literally: write the page's content in a plain-text file, unstyled, and read it. If the argument doesn't work as plain text, no layout will save it. Then style the text — sizes, weights, spacing, measure — before drawing a single box. Boxes come last, and most of the boxes you thought you needed turn out to be unnecessary once the text carries its own structure.

2.2 Choosing typefaces

The Inter problem

Inter is a superb typeface. It is also what every generator reaches for, because it is the most common font in its training data's "modern" cluster. The problem isn't Inter; it's that unconsidered Inter signals that nobody considered anything. The same goes for system-ui defaults deployed as a shrug rather than a choice.

You have three honest options:

  1. Choose a typeface with character that matches your position (see Part 1.4, root cause 1). This is the strongest move and costs one font file.
  2. Use a workhorse (including Inter) deliberately, and let spacing, scale, and weight discipline carry the personality. Perfectly valid — Stripe built an empire on restrained sans-serifs — but then the rest of the system must be flawless, because the typeface isn't contributing personality.
  3. Use the system stack on purpose for speed and nativeness: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif. Honest, fast, and fine — for tools, docs, and dashboards more than for landing pages.

What to look for

For display type (headlines), you want personality that survives at 48–96px: distinctive terminals, real italics, tight tracking that doesn't collapse. For body text, you want the opposite: even color, open apertures, tall-enough x-height, unremarkable at 16–18px. Many failures come from using a display face for body (unreadable) or a body face for display (bland at scale, the Inter-headline problem).

Check before committing:

Pairing

One family is enough for most pages. Two is the practical maximum for a landing page; three is almost always a mistake. When pairing, the rule is contrast in one axis, agreement in the rest: a serif display over a sans body contrasts in style but should agree in proportions (similar x-height) and mood. Pairs that differ slightly (two similar sans-serifs) read as an error, not a choice — if the viewer can't tell instantly that the pairing is deliberate, it isn't working.

Reliable, non-slop pairings (all on Google Fonts, all free):

A monospace used for small labels and data — never for body — is one of the cheapest ways to give a technical product a distinct voice.

Loading discipline

Self-host with font-display: swap, subset to Latin if that's your audience, preload the display face's main weight, and cap total font payload around 200KB. Two families × two weights each is four files maximum. Every additional weight is a decision, not a default. (A page that loads eight weights of one family is a spacing-entropy tell rendered in fonts.)

2.3 The scale

Font sizes must come from a modular scale: a base size multiplied by a consistent ratio. This is the single highest-leverage system on the page, because type sizes are the skeleton of hierarchy.

Base: 16px minimum for body; 18px reads better for marketing pages where line lengths are generous.

Ratio: how fast sizes grow.

A practical scale at base 18, ratio ≈1.25, rounded to sensible values:

Step Size Use
-1 14px captions, footnotes, legal
0 18px body
1 22px lead paragraph, large body
2 28px H3 / card titles
3 36px H2 / section headings
4 48px large H2 / small hero
5 64px hero H1
6 84px oversized display, used once if at all

Seven steps. That is the entire size vocabulary of the page. If a design need seems to require 31px, the answer is 28 or 36 — the need was imaginary. Slop pages, audited, regularly show 12+ distinct sizes; that's not richness, it's static.

Fluid sizing: the hero should scale with the viewport, and clamp() does it without breakpoint stutter:

h1 { font-size: clamp(2.5rem, 1.5rem + 4.5vw, 4rem); }   /* 40px → 64px */
h2 { font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.25rem); }

Body text does not need to be fluid — 16–18px is right at every width. Only display sizes flex.

The gap rule: adjacent hierarchy levels that appear together must differ visibly. A 48px heading over 18px body is instantly legible as two ranks. A 22px card title over 18px body is ambiguous — at that distance, use weight or color to separate, not a 4px size difference nobody perceives as intentional.

2.4 Hierarchy: spending contrast

You have four levers for making one piece of text outrank another: size, weight, color, and space. The craft is spending them precisely — and the discipline is that most text gets none of them.

A landing page needs about three visible ranks per screen:

  1. Primary — the thing read first. Large, heavy, near-black. One per screen.
  2. Secondary — headings and leads. Medium size or medium color.
  3. Body — everything else. One size, one weight, one color.

Common slop failures and their corrections:

The eyebrow (small label above a heading — "PRICING", "How it works") is a legitimate pattern that slop abuses. Done right: 13–14px, 500–600 weight, +0.06em tracking, uppercase or small caps, in a muted color or the primary — and 8px from its heading, tightly bound to it. Done slop: gradient pill badge with an emoji and a border, floating equidistant between sections.

2.5 Line height

Line height is inversely proportional to size. Big text needs tight leading; small text needs open leading. Generators apply one line-height everywhere, which strangles body text and inflates headlines.

Always unitless (line-height: 1.6, never 24px), so it scales with the element.

Related, and criminally under-used: text-wrap: balance on headings equalizes ragged lines (no more one-word orphan under a two-line headline), and text-wrap: pretty on body paragraphs prevents single-word last lines. Two CSS lines that remove a whole class of amateur artifacts:

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

2.6 Measure: line length

Body text should run 45–75 characters per line, with ~66 as the classic ideal. Below 45, the eye ping-pongs; above 75–80, it loses the return sweep back to the next line's start and rereads or skips.

The unit built for this: max-width: 65ch on any text block. Not a container width — a text width. Containers can be 1200px wide; the paragraph inside them still stops at ~65ch.

This is one of the most common and most damaging slop failures: a centered subheading running 120 characters across a 900px container, or feature paragraphs stretched across full-width columns. The text technically fits; it just can't be comfortably read.

Practical widths:

2.7 Letter spacing

Three rules cover 99% of cases:

  1. Large display type gets slightly negative tracking. Typefaces are drawn for body sizes; at 64px the default letterfit looks loose. Apply −0.01em to −0.03em from ~32px up, scaling with size (−0.025em is right for most 64px sans headlines). Some display faces (Fraunces, Instrument Serif) are pre-tightened — trust your eyes over the number.
  2. Uppercase labels get positive tracking. Capitals are drawn to follow lowercase, not each other; all-caps at default tracking looks cramped. +0.05em to +0.1em for 12–14px uppercase eyebrows and table headers.
  3. Body text gets nothing. letter-spacing: 0. Tracking out body text to "airy it up" is a tell — openness comes from leading and measure, never from letterfit.

2.8 Weights, styles, and caps

Skip weights. Adjacent weights (400 next to 500) are indistinguishable at a glance, so the distinction costs a font file and communicates nothing. Use 400 + 600, or 400 + 700. Three weights total (e.g., 400/500/700) is the ceiling, with 500 reserved for UI labels — and only if you can articulate the role of each.

Italic is for emphasis within body text and for editorial voice — one italic phrase in a hero can be a beautiful, cheap "one memorable move" (see 1.5, principle 5). It requires a real italic, not browser-slanted roman; check the font ships one.

ALL CAPS is for short labels only — eyebrows, table headers, tiny buttons — never headings, never sentences. Caps at heading size is shouting; caps in a paragraph is unreadable. Always tracked out (rule 2 above), always ≤14px, usually 500–600 weight.

Sentence case everywhere else. "Monitor your uptime from 12 regions" — not "Monitor Your Uptime From 12 Regions." Title Case On Everything is a strong generated-page tell (models learn it from American headlines and apply it to buttons), and sentence case reads as more confident and more human. Buttons too: "Start free trial", not "Start Free Trial!".

2.9 Text color

Never pure black on pure white. #000 on #FFF vibrates at high contrast displays; every strong text system uses a very dark neutral instead — and per Part 4, a hue-tinted one that matches the palette's temperature (e.g., #1A1D21 cool, #211D1A warm).

The text-color system is three values, used everywhere, with nothing in between:

  1. Primary text — near-black, for headings and body. e.g. #16181D
  2. Secondary text — for subheads, descriptions, captions. e.g. #5A6069 — must still clear WCAG AA (4.5:1) against its background.
  3. Tertiary/disabled — for the faintest metadata only. e.g. #9AA1AB — decoration-adjacent; never for anything a user must read.

The slop failure is body copy set in tertiary gray (#9CA3AF on white — 2.5:1, an accessibility failure) because pale gray photographs as "elegant." Elegance that can't be read is decoration. Body text is primary or secondary, nothing lighter, ever.

And the strongest single rule in this entire part: no gradient text. Not on the headline, not on stats, not on one special word. Gradient-filled type is the most reliable generated-design watermark there is, it breaks subpixel rendering, it fails contrast tools, and it makes the most important text on the page the hardest to read. The exceptionally rare defensible use — a single word, high contrast at every point of the gradient, in a brand with a gradient identity — is a decision for a brand designer, not a default for a landing page. When in doubt, and you should always be in doubt: solid ink.

2.10 Alignment

The deeper point: slop centers everything because centering is the no-decision alignment — it requires no grid, no relationship between elements, no commitment. A left-aligned page has to actually construct alignment lines (Part 3.5). That work is visible in the result, which is exactly why left-aligned pages read as more designed.

2.11 Typographic details

The details that separate typeset text from typed text, all nearly free:

No visitor consciously notices any of these. All of them together are a large part of why a page feels typeset. Craft is mostly invisible; its absence is not.

2.12 The typography audit

Run against any page in minutes:

  1. List every font-size in the CSS. More than 7 → collapse to the scale.
  2. List every font-weight. More than 3 → cut.
  3. Blur test: blur a screenshot 8px. Can you still see 3 ranks? If it's uniform porridge, the scale ratio is too timid or contrast is being spent evenly.
  4. Measure body line length at desktop width. Over 75ch → add max-width: 65ch.
  5. Check line-heights: display ≤1.15, body ≥1.5.
  6. Any centered paragraph over 2 lines → left-align or cut.
  7. Any gradient text → solid ink. No exceptions survive this audit.
  8. Any Title Case headings or button labels → sentence case.
  9. Body text contrast ≥4.5:1. Headings ≥3:1 (large text) but aim for 4.5:1 anyway.
  10. Straight quotes, double hyphens, letter-x dimensions → typeset them.

Part 3 — Spacing, Layout, and Breathing Room

3.1 Whitespace is the material

Amateurs think of whitespace as the absence of design — the leftover parts of the canvas that content didn't reach. Designers think of whitespace as the material design is made from. Spacing is how a page communicates structure without saying a word: what belongs together, what is separate, what is important enough to be isolated, where one thought ends and the next begins.

Slop is terrified of emptiness. Watch a generated page handle a gap: it fills it. With a card. With a badge. With a blob. With a divider, a border, an icon. The generator learned that "content" is rewarded, so it manufactures content until every region of the viewport hosts an object. The result has the visual rhythm of a storage unit.

The confident move — the one that instantly separates designed pages from generated ones — is leaving space empty on purpose. A hero with 160px of clean air above it. A single sentence sitting alone in a full-width band. Margins that are obviously, deliberately larger than they needed to be. Emptiness signals that the designer had so much control over the page that they could afford to spend area on nothing. It is the visual equivalent of a confident pause in speech. Slop never pauses; it fills every silence, and that's how you can tell it's nervous.

Two mindset rules before the mechanics:

  1. When a layout feels wrong, add space before adding anything else. Nine times out of ten, "this looks cheap" means "these elements are crowding each other," not "this needs a border."
  2. Density is a voice, not a defect — but it must be chosen. A dense pricing comparison table is right; a dense hero is wrong. Designed pages modulate density deliberately: airy where the reader should slow down (hero, big claims), denser where they scan (feature lists, tables). Slop is uniformly medium-dense everywhere, which reads as nothing being important.

3.2 The spacing scale

Like font sizes, every spacing value on the page — margins, paddings, gaps — comes from one scale. The universal choice is base-8 with a couple of small steps for fine work:

4  8  12  16  24  32  48  64  96  128  (192)

Ten values. Every gap on the page is one of them. Not 18px, not 27px, not 40px (40 is defensible as 8×5, but a tighter scale that jumps 32→48 forces bigger, clearer decisions — the in-between values are where waffling lives).

Why a scale works has nothing to do with the number 8 being magic:

Name them as tokens and use only the tokens:

:root {
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-6: 24px;  --space-8: 32px;
  --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --space-32: 128px;
}

The audit from Part 1.4 applies with full force: grep every margin, padding, and gap from the stylesheet and list distinct values. A designed page produces the scale back. Slop produces confetti. This single grep is the fastest slop detector that exists.

3.3 Proximity: spacing is information

The Gestalt principle of proximity: things that are close together are perceived as related; things that are far apart are perceived as unrelated. Every spacing decision is therefore a statement about relationships, and inconsistent spacing makes false statements.

The rule that operationalizes it: space between groups must be meaningfully larger than space within groups. As a working ratio, between-group spacing should be at least 2× within-group spacing.

Concretely, for a feature section:

Each level of the hierarchy gets a clearly bigger gap than the level below it. The page becomes scannable structurally — you can perceive the grouping with your eyes unfocused, before reading a word.

The heading attachment error

The most common single spacing mistake, in both human and generated work: equal space above and below a heading. A section heading belongs to the content after it. When the gap above equals the gap below, the heading floats ambiguously between two sections, attached to neither.

The correction: space above a heading should be 2–4× the space below it.

h2 { margin-top: 96px; margin-bottom: 24px; }
h3 { margin-top: 48px; margin-bottom: 12px; }

This applies fractally: an eyebrow sits 8px above its headline but 96px below the previous section; a card title sits 8px above its body but 24px below the card's icon. Every text element should be visibly pulled toward what it labels and pushed away from what it doesn't. Once you see this rule, you can never unsee its violation — and generated pages violate it almost universally, because symmetric margins are the no-decision default.

Related: label-field, caption-image, icon-text

The same attachment logic covers every labeled thing on the page. A form label sits 6–8px above its input, 24px below the previous input. A caption sits 8–12px under its image, far from the next paragraph. An inline icon sits 8px from its text, optically centered against the x-height (not mathematically centered against the line box — see 3.8).

3.4 Breathing room and vertical rhythm

Landing pages read top to bottom, so vertical spacing carries the page's pacing.

Section spacing: major sections on a desktop landing page need 96–160px of vertical separation (padding-block: clamp(4rem, 3rem + 5vw, 8rem) covers mobile→desktop smoothly). Generated pages often use 40–64px, which makes the page feel like a document; or they use one value uniformly, which makes it feel like a conveyor belt. Vary within the range deliberately: more air around the hero and the final CTA (the emotional peaks), slightly less between mid-page content sections (the argument's body).

The hero deserves the most air on the page. It is one headline, one subhead, one or two actions — and it should still occupy most of the first viewport. 120–200px above the fold's content, real margin below it. If the hero feels empty, the instinct to fill it (badge! blob! screenshot! logo row crammed against the fold!) is exactly the slop reflex; the emptiness is the point. A hero is a stage, and stages are mostly empty.

Rhythm, not uniformity. A page where every section is exactly 96px apart is better than entropy but still monotone. Designed pages breathe in phrases: a tight cluster (heading + features that answer it), then a big pause, then the next phrase. Think in paragraphs of sections. A full-width dark band, a quote sitting in 200px of air, a dense grid — variation in density is the rhythm, and rhythm is what makes scrolling feel like progress instead of repetition. The canonical slop skeleton (identical centered-heading + 3-card sections, five times) is monotone rhythm at its purest — even with perfect spacing values it would still be boring, because every phrase has the same length and the same melody.

3.5 Grids, containers, and alignment lines

One container, honored everywhere

Pick a content max-width and make every section respect the same one. 1100–1200px is the sweet spot for marketing content (it keeps full-width text near measure limits and doesn't strand content on big displays); a wider 1280–1400px stage can exist for screenshots and full-bleed bands, as a second deliberate token, not as per-section improvisation.

.container { max-width: 1140px; margin-inline: auto; padding-inline: 24px; }

The slop failure: the hero constrains to 900, features to 1200, testimonials to 1000, pricing to 1100 — every section's edges land somewhere new, so nothing lines up as you scroll and the page has no spine. Scroll a designed page and watch the left edge: content snaps to the same invisible line the whole way down. That line is the page's posture.

Horizontal padding on the container (24px mobile, up to 32–48px at desktop) must also be constant. A page whose gutters wobble by section reads as assembled from parts — which is exactly what generated pages are.

The 12-column habit

You rarely need a formal grid system for a landing page, but thinking in twelfths keeps layouts honest: a 7/5 split for text-beside-screenshot, 4/4/4 for a three-up, 8-centered for a testimonial. What the twelfths buy you is shared edges — the feature row's text column starts where the pricing table starts. Gutters between columns: 24 or 32px, from the spacing scale like everything else.

Alignment is the cheapest polish that exists

Every element on the page should share an alignment line with something else: left edges, baselines, centers. Misalignments of 2–5px are individually invisible and collectively devastating — they're a large part of the "something's off" feeling that people can't articulate about sloppy pages.

Alignment discipline:

Centering, revisited structurally

Part 2.10 covered centered text; here is centered layout. Symmetric, centered sections work when content is short and singular: a hero (headline + subhead + button), a quote, a final CTA. They fail when content is plural or prose-length: centered lists, centered card grids with centered text inside each card, centered multi-line paragraphs. Slop centers everything because centering requires no alignment lines — each element just references the viewport. A designed page is mostly left-aligned architecture with one or two centered moments used the way a wide shot is used in film: sparingly, for emphasis.

3.6 Cards, boxes, and the justification rule

Cards are the signature slop container, so they deserve their own doctrine.

A card is a border you must justify. Enclosure is the strongest grouping device — stronger than proximity, alignment, or background shift — and strong devices are for when weak ones fail. The correct order of grouping tools:

  1. Space (proximity alone) — almost always enough for feature lists.
  2. Alignment (shared edges make a group read as a unit).
  3. Background shift (a 2–4% tinted band groups a whole region without any borders).
  4. Border/card — for genuinely interactive or comparative units: pricing tiers (compared side by side), clickable entries, dashboard modules.

When a generated page puts six features in six bordered, shadowed, rounded cards, it is using the loudest tool for a job proximity could do silently — and paying for it with 12 extra borders' worth of visual noise. Strip the cards and the section instantly looks more expensive: the features were the content; the boxes were packaging.

Corollaries:

Padding inside containers (when you do use them): proportional to the container, from the scale — 24px for a compact card, 32px for a standard one, 48px for a hero-scale panel. Equal on all sides as the default; if asymmetric, more bottom than top never (text sits high in a box that has more space below it — the box looks like it's drooling). And the classic tell: text hard against a card edge on one side with 32px on the other means someone (something) forgot box-sizing or slapped margins inside paddings. Interior alignment is part of alignment.

3.7 Responsive spacing

Spacing compresses on small screens, but not uniformly — and uniform compression is another generator tell (everything × 0.5).

One more mobile-specific rule: multi-column grids collapse deliberately, not automatically. Three cards → one column, fine. But a 6-item grid that auto-flows into 2+2+2 on tablet and 1×6 on mobile may bury the best content fifth; consider re-ranking or truncating for small screens. Responsive design is re-deciding, not just reflowing.

3.8 The spacing audit

  1. Grep all margin/padding/gap values. Off-scale values (18px, 27px, 13px…) → snap to scale. More than ~10 distinct values → the system is leaking.
  2. Check every heading: is space-above ≥2× space-below? Symmetric heading margins → fix attachment.
  3. Squint at each section: can you see the groups? If items within a group are as far apart as the groups themselves → tighten within, loosen between.
  4. Scroll the page watching the left content edge: does everything sit on one line? Multiple max-widths → unify.
  5. Measure section gaps: under 80px on desktop → the page can't breathe; identical everywhere → add rhythm (hero and final CTA get more).
  6. Count enclosed boxes: for each card, name what the border is doing. No answer → remove the box, keep the content, let space group it.
  7. Mobile: side gutters ≥24px, section gaps ≥64px, nothing touching screen edges, stack order sensible.
  8. Any element you can't move 4px without breaking an alignment → good, that's what a grid feels like. Everything freely movable → there is no grid, only positions.

Part 4 — Color

4.1 Where slop is loudest

Color is where generated design announces itself from across the room. The purple-to-blue gradient hero. The rainbow of pastel icon circles. The teal CTA fighting the indigo links fighting the violet badges. If typography is where slop is most damaging, color is where it is most visible — and, happily, where the fix is most mechanical, because good color on the web is less about artistic gift than about ruthless inventory control.

The core insight: professional interfaces are almost entirely neutral. Open Stripe, Linear, Vercel, Basecamp, or any product you'd call well-designed and count the colored pixels. Text: neutral. Backgrounds: neutral. Borders: neutral. Cards: neutral. The brand color appears in the logo, the primary button, links, and a handful of accents — maybe 5% of the page's area. The design reads as colorful in memory because the few colored moments land hard against all that neutrality. Slop inverts the ratio: color everywhere, so no colored moment means anything.

The 60-30-10 heuristic, adapted for interfaces: ~60% of the page is background neutral, ~30% is text and secondary neutrals, ~10% — at most — is actual color. When in doubt, shift toward neutral. Nobody has ever looked at a landing page and thought "this would convert better with four more hues."

4.2 Building the palette

A complete landing-page palette is three things, and the discipline is that it is only three things:

  1. One neutral ramp (8–10 steps) — does 90% of the work.
  2. One primary (with 2–3 usable tints/shades) — buttons, links, key accents.
  3. At most one accent — optional, for one specific recurring job.

Plus the semantic trio (success/warning/danger) which is functional vocabulary, not palette (4.7).

The neutral ramp

Neutrals are the palette. Get these ten values right and the page is 90% colored.

Tint your grays. Pure gray (#808080-family, equal RGB) reads as lifeless — almost every strong design system warms or cools its neutrals by injecting 2–8% of a hue. Cool gray (blue-tinted) reads technical, precise, infrastructural; warm gray (yellow/brown-tinted) reads human, editorial, calm. Pick the temperature that matches your position statement (Part 1.4) and keep every neutral on it. Mixing warm and cool grays on one page is a subtle but corrosive error — surfaces seem mismatched for reasons viewers can't name.

A cool ramp for a technical product (hue ~220°, saturation 5–15% rising slightly at the dark end):

--n-0:  #FBFCFD   page background alt / cards on tinted bg
--n-1:  #F5F7F9   tinted section bands
--n-2:  #E9EDF1   borders on white, dividers
--n-3:  #D5DBE2   stronger borders, input strokes
--n-4:  #9AA4B1   tertiary text, placeholders
--n-5:  #6B7684   secondary text (4.7:1 on white)
--n-6:  #49525E   strong secondary
--n-7:  #2E3540   headings alternative
--n-8:  #1B2029   primary text
--n-9:  #12151C   near-black: dark sections, footer

Note what this ramp gives you for free: text colors (4.4/4.5/4.8), border colors (4.2/4.3), background bands (4.0/4.1), and a dark-section base (4.9) — all guaranteed to harmonize, because they share one hue and one temperature. This is the machinery behind "cohesive."

White is a color too: decide whether your page background is #FFFFFF or an off-white like --n-0, and use it consistently. Alternating white and slightly off-white bands (a 2–4% lightness difference) is the designed way to delineate sections — quiet, structural. The slop version is high-contrast zebra striping (white / #F3F4F6 / white / dark / white) that chops the page into slices.

The primary

One hue, chosen to mean something (root cause 1 again — what does the fire station wear?), needed in about three strengths:

--primary:        the workhorse — buttons, links   (e.g. #2563EB)
--primary-strong: hover/active                     (e.g. #1D4ED8)
--primary-soft:   tinted backgrounds, selection    (e.g. #EFF4FE)

Rules of engagement:

The accent (optional)

A second non-neutral color, with one named job: highlight marks in headlines, the "most popular" pricing tier, data-viz series two. One job, stated in a comment in the CSS. An accent without a job description migrates everywhere and becomes hue #2 of the eventual rainbow. If you can't name the job, you don't need the accent — most pages don't.

4.3 Gradients

The rule is not "never gradients." The rule is: a gradient may create atmosphere, never carry information.

Slop gradients: purple→blue at 135° behind the hero; gradient text (Part 2.9 — never); gradient buttons; three-hue mesh blobs drifting at 40% blur; a different gradient per section. All of these put maximum-chroma transitions in front of the user and call it energy.

Designed gradients are barely-gradients:

Test: screenshot the gradient and posterize it to 4 levels. If the bands are obviously different colors, the gradient was doing too much.

4.4 Contrast and accessibility

Non-negotiable floors (WCAG AA):

The slop-specific contrast failures, all covered earlier but worth the roll-call because they cluster: pale gray body copy (photographs "clean," reads "invisible"); white text on mid-saturation gradients that passes at one end and fails at the other; colored text on colored soft backgrounds (#2563EB on #EFF4FE is fine at 16px+; the pastel-on-pastel badge zoo mostly isn't).

Check with a tool, not eyes — eyes adapt, monitors lie, and checkers are instant. Every pair on the page, once, during the audit.

4.5 Dark sections and dark mode

Landing pages often carry one dark band (a footer, a stats section, a screenshot showcase) even when the page is light. Dark surfaces have their own physics; inverting hexes produces the characteristic generated-dark-mode mud:

4.6 The rainbow problem: icons, badges, and illustration

The single most common color failure in generated pages after the gradient: per-item hues. Six features, six pastel icon circles — mint, lavender, peach, sky, rose, lemon. A generator does this because each card was generated as its own local unit ("an icon needs a friendly colored circle") with no global budget. The result assigns categorical meaning where none exists — different colors imply the items are different kinds of thing — while spending the entire palette on decoration.

The designed alternatives, in order of preference:

  1. All icons in one ink: the neutral --n-6 or the primary, on no circle at all, or on one shared soft tint (--primary-soft). Quietest, most expensive-looking.
  2. One accent family: all circles in --primary-soft with --primary glyphs. Unified, still friendly.
  3. If categories genuinely differ (a pricing matrix of three product lines), then and only then do hues encode categories — and they come from a designed categorical set (see the data-viz palettes of any serious system), not from pastel roulette.

Badges obey the same law: one badge style, one color, reserved for one meaning ("Most popular", "New"). Five badge colors on one page is the rainbow problem in miniature.

Illustration and screenshots participate in the palette too: a full-color stock illustration with its own six-hue palette detonates a disciplined page. Recolor illustrations to the brand ramp (most good illustration systems are built to be recolored), tint screenshots' chrome to the neutral ramp, and treat any imagery you can't recolor as a palette decision you're importing wholesale — usually the honest answer is to not import it.

4.7 Semantic colors

Success green, warning amber, danger red: these are functional vocabulary, reserved words in the language of interfaces. Two rules:

  1. Never decorate with them. A green feature icon (because the circle-roulette landed on green) sits next to an actual "operational" status dot and dilutes it. Red for anything but errors/destruction makes real errors quieter. If a color has a system meaning, it appears only with that meaning.
  2. They obey the ramp discipline too: each needs a text-safe strong form and a background-safe soft form (e.g., #067647 on #ECFDF3), tinted to your neutral temperature, passing contrast in both forms.

For a monitoring product like the worked example in this repo, this rule is load-bearing: status green/amber/red is the product. Spending those hues on decoration anywhere else on the page would be like a hospital using alarm-red for its lunch menu.

4.8 Practical method: how to actually pick

For the 95% of engineers who don't trust their color sense:

  1. Write the position sentence (1.4). Derive temperature (warm/cool) and energy (calm/vivid) from it.
  2. Steal the structure, not the pixels. Find two shipped products whose color feels right for your position. Count their palette (you'll find: one neutral ramp, one primary, sparse accents — the structure of this chapter). Note the relationships — how dark their text is, how faint their borders are, how rarely the primary fires.
  3. Build the neutral ramp first, in OKLCH if your tooling supports it (perceptually uniform lightness steps; oklch(97% 0.005 250) down to oklch(15% 0.02 250)) — or pick a ramp from Radix Colors / Tailwind's slate-or-stone (choose ONE temperature) and commit.
  4. Pick the primary by placing candidate hues next to your ramp on a mock button + link + soft badge. Judge in context, never on a swatch grid.
  5. Lock the inventory. Write every approved hex into :root custom properties with role names (--text-primary, --border, --primary), and make raw hex values anywhere else in the CSS a lint error. The palette is now closed; new colors require amending the system, which is exactly the friction that prevents drift. Instances without a system (root cause 3) can't happen if instances can't be expressed.

4.9 The color audit

  1. Count distinct hues (not shades — hues). More than 3 non-neutral hues + semantics → cut until 3.
  2. Count total distinct color values. A disciplined page: ~10–15 including every neutral step. 25+ → the system leaked.
  3. Squint/grayscale test: convert a screenshot to grayscale. Does hierarchy survive? If two elements were distinguished only by hue, they now collide — color was carrying information it isn't allowed to carry alone (also an accessibility failure for color-blind users).
  4. Area check: eyeball the colored-pixel percentage. Way past ~10% → desaturate large fields toward neutrals/tints.
  5. The primary-scarcity check: on any viewport, count primary-colored elements. More than ~3 → the CTA has competition; demote the others.
  6. Contrast-check every text/background pair with a checker. Fix every failure; no "it looks fine" exemptions.
  7. Gradient inventory: for each, does it carry information (text, button, chart)? → kill. Is it multi-hue at high chroma? → tame to same-hue small-delta.
  8. Semantic hijack check: any green/amber/red used decoratively → recolor.
  9. Temperature check: all neutrals on one temperature? Warm text on cool borders → unify the ramp.
  10. Dark sections: off-white text (not #FFF), desaturated accents, border-based elevation, at most one dark band besides the footer.

Part 5 — Components, Surfaces, Imagery, and Motion

5.1 Buttons

Buttons are where hierarchy, color, spacing, and copy converge in twenty square pixels, which is why generated buttons are so reliably diagnostic: gradient fill, pill radius, glowing shadow, hover scale, "Get Started 🚀". Five decorations, zero decisions.

Hierarchy: one primary per view

A view has one primary button. The primary action is a scarce resource by definition — if two actions were equally important, the designer's job was to decide anyway. Everything else steps down a defined ladder:

  1. Primary: solid fill in the primary color, white text. The only solid-filled colored button on screen.
  2. Secondary: quiet — neutral border + primary-colored or neutral text, transparent or faint fill.
  3. Tertiary: a text link with intent (optionally an arrow), no box at all.

The classic hero pattern is primary + secondary ("Start free trial" solid, "View live demo" quiet). The slop pattern is two solid gradient buttons of equal weight — a decision refused, passed on to the visitor.

Anatomy

5.2 Forms and inputs

Landing pages carry at least one form (email capture, signup) and generated forms fail in consistent ways: floating placeholders doing label duty, ghost-faint borders, mismatched heights between input and adjacent button.

5.3 Border radius: one system, three sizes

Radius is a system property, like spacing — and "rounded-2xl on everything" (16px on cards, buttons, badges, images, inputs alike) is the single most recognizable component-level tell after gradient text.

Pick a personality point on the spectrum — sharp (0–2px, editorial/serious), soft (6–10px, product default), round (12–16px+, friendly/consumer) — then build a three-step scale tied to element size:

--radius-s: 6px    inputs, buttons, badges, small chips
--radius-m: 10px   cards, dropdowns, alerts
--radius-l: 16px   modals, hero screenshots, large panels

Small things get small radii; large things get larger ones. A 24px-tall badge with a 16px radius is a pill whether you meant it or not; a 600px panel with a 4px radius looks like it was cut with scissors.

The nesting rule: an element inside a rounded parent takes inner = outer − gap. A screenshot sitting 8px inside a 16px-radius card gets an 8px radius — concentric corners. Matching them (16 inside 16) makes the corners visibly collide; this tiny rule is one of those invisible-craft details (2.11) that separates set from typed.

Consistency beats the specific values: audit-grep border-radius and expect exactly three values back.

5.4 Shadows and borders

Shadows are light, and light comes from somewhere. One imagined light source — above and slightly toward the viewer — governs every shadow on the page: offsets are positive-y, blur exceeds offset, spread is zero or negative, color is a tinted transparent ink (the neutral ramp's dark end at 6–12% alpha, not pure black).

A working two-tier system, replacing the shadow-xl-on-everything reflex:

--shadow-s: 0 1px 2px rgba(18,21,28,.06), 0 1px 3px rgba(18,21,28,.08);
--shadow-m: 0 4px 8px rgba(18,21,28,.06), 0 12px 24px rgba(18,21,28,.08);

(Layered pairs — a tight contact shadow plus a soft ambient one — read as physical; single huge blurs read as glow.)

Assignment follows elevation semantics, not decoration: things that float above the page (dropdowns, modals, popovers) genuinely need shadows; things printed on the page (feature cards, sections, images in flow) mostly don't — a 1px border or a background shift does their job with less noise. The slop page inverts this: fifteen static cards glowing at shadow-xl while the actual dropdown, if any, uses the same value and therefore can't read as above them.

Borders: 1px, low-contrast (--n-2/--n-3), and justified like cards are justified (3.6). Border or shadow is usually enough; border and shadow and background shift on one card is triple enclosure. On dark surfaces, borders go additive: rgba(255,255,255,.08) (4.5).

Glassmorphism — translucent fills + backdrop blur — is a costume the generator puts on everything. It has exactly two defensible homes: a sticky nav bar over scrolling content (blur earns its keep by keeping the nav legible over anything), and small chrome over imagery. As full-card treatment on a plain background it's pure costume — blur with nothing behind it to blur. If you keep it anywhere: real backdrop blur (12–20px), a hairline light border, and a solid-enough fill that text on it always passes contrast. But the honest default is: delete it, use solid surfaces from the ramp.

5.5 Icons

5.6 Imagery, screenshots, and illustration

Nothing exposes a template faster than its pictures.

Product screenshots beat abstractions. For a software product, the screenshot is the proof — and slop avoids it (no product exists) in favor of 3D blobs, isometric mockups of nothing, or AI-generated "diverse team celebrating around laptop." A real, legible screenshot of the actual interface outsells any abstraction. Treatment:

Illustration is a single style decision made once: one line weight, one palette (the page's own — recolor, per 4.6), one level of abstraction. Three sections with three illustration styles (one flat, one 3D, one hand-drawn) is the assembly tell again. No generic "startup Memphis" blob-people unless your position statement genuinely reads "friendly consumer app, 2019."

Photography: only if real (your team, your office, your users). Stock handshakes and stock diversity are copy slop in pixel form — and AI-generated photography currently lands in an uncanny register that makes everything on the page feel synthetic, which is the precise opposite of this document's goal.

Logo walls: grayscale or single-tint them (their native rainbow detonates the palette — 4.6), normalize to one optical height (equal visual mass, not equal pixel height: wordmarks run ~20–24px tall, square marks slightly larger), and only real logos — invented logos in a "trusted by" strip are a lie wearing a tell.

5.7 Motion

Animation is the highest-variance tool on the page: the right 200ms makes an interface feel engineered; the generated page's scroll-triggered fade-up-on-every-section makes it feel like a slideshow begging for applause.

Purpose test. Motion earns its place by doing one of three jobs: feedback (this button noticed you), orientation (this panel came from there), or focus (look here, once). Motion that decorates — ambient gradient drift, floating blobs, perpetual pulse rings, parallax hero layers — is inflation: each instance cheapens every other until the page's real signals can't afford attention.

Physics of trust:

Scroll animation policy: at most one entrance treatment, on at most the first instance of the page's key moments (hero, product screenshot) — not on every card of every grid, and never re-triggering on scroll-up. If the content is worth reading, it's worth being there when the reader arrives. When in doubt: no scroll animation. The page underneath must already work with motion deleted — motion is seasoning, and seasoning on a page that doesn't work plain is the definition of decoration substituting for hierarchy (root cause 2).

Hover policy: interactive elements acknowledge hover through color/ink (fill darkens a step, link underline appears) — not through geometry. Scale transforms and translate-lifts on cards promise interactivity; on a card that isn't clickable, that promise is a small lie told twelve times per section. Cursor pointer obeys the same law: clickable things only.

prefers-reduced-motion is mandatory, and cheap:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

A page whose design collapses under this media query was leaning on motion for structure; a designed page loses nothing but garnish.

5.8 Navigation and footer

The two bookends, both slop-standardized, both cheap to do right.

Nav: one row — logo left, 3–5 links center or right, one primary CTA right, optionally one quiet "Log in" before it. Height 64–72px, container-aligned (the same 1140px line as everything — the nav is the first thing to establish the spine, 3.5). Links in body size or 15px, secondary text color, primary color on hover/current. If sticky: solid or glass-with-contrast per 5.4, plus a hairline bottom border once scrolled — not a permanent heavy shadow announcing stickiness the page hasn't used yet. No mega-menus for a five-page product, no nav-bar badge chips ("v2.0 is here! 🎉").

Footer: sized to reality. A single-product startup does not have forty links; the honest footer is one or two rows — logo + one-line positioning, the same 3–5 nav links, legal links, contact — set small (14px) in secondary color on either the darkest neutral (with 4.5's dark-surface rules) or a quiet tinted band. The five-column enterprise footer with "Solutions / Resources / Company / Legal / Social" placeholder taxonomies is pure cargo cult: the shape of bigness pasted onto a product with four pages. And the newsletter form: only if a newsletter exists and someone sends it; a dead-end email capture wired to nothing is the footer's version of the fake logo wall.

5.9 The component audit

  1. Grep border-radius: more than 3 values → collapse to the scale. Check one nested corner for concentricity.
  2. Count solid primary-filled buttons per viewport: more than 1 → demote the rest to secondary/tertiary.
  3. Grep box-shadow: more than ~2 tiers → collapse; any shadow on a non-floating element → try border/background instead; any glow-colored shadow → delete.
  4. Icons: one family? one weight? one ink? any emoji doing icon duty → replace or remove.
  5. Every input: visible label above, 1px ≥3:1 border, same height as its sibling button, same focus ring as everything else.
  6. Hover inventory: geometry transforms on non-clickable elements → remove; cursor: pointer on non-clickable elements → remove.
  7. Scroll-animation inventory: more than one entrance pattern, or any grid animating card-by-card → strip to ≤1 key moment. Verify prefers-reduced-motion.
  8. Screenshot/illustration: consistent single style, palette-participating, believable data, system radius + frame.
  9. Glassmorphism anywhere but nav-over-content → solid surface from the ramp.
  10. Footer: does every link go somewhere real? Newsletter wired to anything? If no → cut.

Part 6 — Copy, Page Anatomy, and Process

6.1 Copy is design

The words on a landing page are not content poured into a design — they are the design's primary material, and they slop faster than any pixel. A visually disciplined page with generated copy still reads as generated, because the vocabulary itself is a fingerprint.

The banned lexicon

These words appear on generated pages at rates no human marketing team matches. Their presence is diagnostic; their removal is free. Ban them:

Supercharge. Unleash. Unlock. Effortlessly / Effortless. Seamlessly / Seamless. Blazing-fast / Blazingly fast. Revolutionize / Revolutionary. Next-generation / Cutting-edge. Empower. Elevate. Game-changing / Game-changer. All-in-one. Turbocharge. Skyrocket. Streamline (as a verb of vague benefit). Delightful (self-awarded). Robust. Powerful (unqualified). Solutions (as a noun for "products"). Journey. In today's fast-paced world…

The pattern beneath the list: superlatives without referents. "Blazing-fast" compared to what? "Powerful" at what? Each one is a claim with the load-bearing part deleted. The fix is never a synonym (that's how "supercharge" became "turbocharge") — it's specificity:

Specific claims do double duty: they inform, and they prove — only someone who built the thing can cite the numbers. Vagueness is what having nothing to say looks like; the generator is vague because it genuinely has nothing to say about a product that doesn't exist. You do. Say it.

Register rules

Microcopy is where trust is won

Button labels, empty states, error messages, form hints, the pricing table's fine print — this is the copy users actually read at the moment of decision, and it deserves the most care per word. "Start free trial — no card required" answers the exact fear at the exact moment. "Get Started 🚀" answers nothing. The generated page always has beautiful hero copy energy and dead microcopy, because microcopy requires knowing the product's actual edges: what happens after the click, what the trial includes, what "unlimited" excludes. Knowing things is the one advantage the human always has. Spend it.

6.2 Headlines

The headline carries more conversion weight than everything else on the page combined, and it is where the transplantability test (1.1) bites hardest. "Supercharge your workflow" transplants to any product on earth — which is exactly what it was: the centroid headline of every landing page ever scraped.

A working headline does at least one of these, specifically:

  1. States the outcome in the user's terms: "Know your site is down before your customers do." (Outpost's actual job.)
  2. Makes the sharpest true claim: "Downtime alerts in under 30 seconds."
  3. Names the enemy: "Uptime monitoring without the dashboard sprawl."
  4. Says plainly what it is, when the category is the news: "Status pages and uptime monitoring for small teams."

Craft constraints: 4–10 words for the H1 (it must survive at 64px — a 20-word headline sets in tiny type or wraps to four lines, both defeats); the subhead (one sentence, ≤2 lines at 45–55ch) carries the mechanism the headline didn't have room for; together they answer what is it, who is it for, why believe you in five seconds. No colon-constructions ("Outpost: The Ultimate…"), no questions ("Tired of downtime?" — rhetorical questions are the banned lexicon in interrogative form), no title case.

Write twenty, delete nineteen. The generator writes one because one is what was asked for; the human advantage is the other nineteen.

6.3 Page anatomy without the skeleton

The canonical slop skeleton (1.3) isn't wrong because heroes and pricing tables are wrong — it's wrong because it's the same seven sections in the same order with the same shapes, regardless of product. The designed alternative is not exotic structure; it's structure derived from the argument. Write the argument first, in plain text (2.1), as a ranked list of claims; the page is that list, sectioned.

Hero: headline + subhead + one primary action (+ one quiet secondary) + proof. Proof can be the product itself (screenshot, live demo, actual status page), a single number, or one customer line — not a badge, not a logo wall crammed against the fold. Layout: centered stack is fine (short content, 2.10); left-text/right-product is often stronger for tools because the screenshot is the argument. One memorable move lives here if anywhere (1.5, principle 5).

Social proof: only what's real. Real logos (5.6), a real quote with a real name and company, a real number ("14,000 monitors checked every 30 seconds" — counted, not "trusted by 10,000+ teams," vibed). Fabricated proof is worse than none: visitors can't verify it, but they can smell the register of fabrication, because the entire internet has trained them on it.

Features: the ranked list drives the form. The #1 reason people buy gets the full-width treatment — screenshot, real explanation, space. The next two or three get alternating text/image rows (7/5 splits, 3.5) with specific copy. Table-stakes features get a quiet single line each in a compact grid or list — no cards (3.6), no icons unless they inform (5.5), certainly not six identical rounded-2xl boxes granting SSL-expiry-checking the same visual rank as the core product. Emphasis is a budget; the whole section is how you spend it.

How it works: three steps is fine when there are actually three steps. Numbered, verb-first, concrete ("Add your endpoint URL" not "Get connected"), set as a simple numbered row — not three more icon-cards.

Pricing: the one place cards earn their border (compared units, 3.6). Same height, aligned rows (tabular-nums, 2.11), one "recommended" tier marked by one device (border in primary, or the single badge the page allows — not scale-up + gradient + badge + glow). Feature lists honest and parallel in structure; the free tier states its real limits; every tier's button says what happens next.

Final CTA: the emotional close, and the second-most-air section on the page (3.4): one line restating the core promise (not repeating the H1 verbatim), one button, one reassurance ("Free tier forever · no card"). No new arguments — anyone here has already decided and needs only the door.

FAQ: only questions genuinely asked (support inbox, sales calls), with answers that commit. "Can I use it free forever?" — "Yes, 5 monitors, no card, no expiry." An FAQ inventing questions to fill the accordion pattern is the structural version of lorem ipsum.

Ordering is the argument's order, and rhythm (3.4) is checked across the assembled whole: airy hero → proof beat → dense feature argument → quiet how-it-works → structured pricing → airy close. Two identically-shaped sections should never be adjacent; if they are, the argument probably repeated itself too.

6.4 Differentiation: the one memorable move

Principle 5 (1.5) operationalized. After discipline, a page needs one thing a visitor describes to a colleague: "the monitoring site with the live status dot in the logo" — "the one with the huge serif headline" — "the one where the hero is an actual working status page."

Choose exactly one:

The move gets the weirdness budget; everything else on the page pays for it by being quiet. Two moves compete; five moves is slop with taste; zero moves is a very clean template. One.

6.5 Process: how to actually work

The order of operations that produces designed pages:

  1. Position sentence (1.4). Ten minutes, one sentence, written down.
  2. Content outline in plain text (2.1): every claim, ranked. This is the page. If it doesn't persuade as text, stop.
  3. Choose the system: type pairing + scale (2.2–2.3), spacing scale (3.2), palette (4.2), radius/shadow tiers (5.3–5.4). Write them all as tokens in :root before styling anything. ~Twenty decisions; they are the design.
  4. Build mobile and desktop together, text first, boxes last (2.1). Every value from a token; a needed off-scale value means amending the system deliberately, not improvising locally (1.5, principle 4).
  5. Audit passes — the mechanical ones from each part: typography (2.12), spacing (3.8), color (4.9), components (5.9), plus the master checklist below. These audits are the anti-slop mechanism in this document; taste is fallible and tires, but grep does not.
  6. The three squints: blur test (hierarchy survives?), grayscale test (color wasn't carrying structure alone?), and the transplant test (swap in a competitor's logo — does anything on the page resist? Something should).
  7. Read every word aloud once. The banned lexicon hides in copy written at 2am; the ear catches what the eye skims.

6.6 The master slop audit

The consolidated checklist. A designed page passes everything below or knows exactly why it doesn't (violations on purpose are decisions; violations by accident are slop — 1.6).

Typography

Spacing & layout

Color

Components & motion

Copy

Structure

6.7 Closing: taste is trained, not conferred

Nobody is born knowing that heading margins should be asymmetric. Taste is pattern exposure plus the habit of asking why — the same loop that trained the generators, run with intent instead of at scale. Three habits compound:

  1. Collect and dissect. Keep a folder of pages that feel right. For each, extract the system (scales, ramps, radii — the audits run in reverse). You'll find the same small set of decisions this document describes, made with different accents.
  2. Read the canon. Refactoring UI (Wathan & Schoger), Practical Typography (Butterick), The Elements of Typographic Style (Bringhurst), and the design systems of Stripe, Linear, Radix, and GOV.UK — the last being proof that ruthless plainness can be a memorable move.
  3. Audit everything you ship with Part 2–6's checklists until the checks become reflexes. The first audit takes an hour; the tenth takes ten minutes; eventually the violations never get written, and that — decisions made automatically, but made — is the entire difference between a designer and a generator.

The generators will keep improving, and the centroid will keep moving; today's glassmorphism is tomorrow's marble column. What won't change is the definition this document started with: slop is the absence of decisions. The countermeasure is not a style — styles get scraped — it's the practice of deciding, on purpose, with a system, about your specific product for your specific reader, every time.

Make fewer things. Decide all of them.