From AI Slop to Signature: 73 Design Patterns That Break the AI Default in 2026

There is a look. You know the look.

White background, fading purple-blue gradient hero, three feature cards with rounded corners, a dashboard mockup at a slight angle, and a CTA button that says "Get started" in bg-blue-600. The font is Inter. The icons are Lucide. The headline says something about "transforming your workflow" or "the future of work." The buttons have a hover:scale-105 transform. The footer is in a 4-column grid.

This is what an AI builds when you ask it to build a SaaS landing page. Not because it is the best design. Because it is the average design. The training corpus pulled from 2021 to 2024 SaaS sites, and the model collapsed to the centroid of that corpus, and now every site that ships through Lovable, v0, Bolt, Cursor, Claude Code, or Copilot looks like the centroid of the centroid.

This article is a list of 73 patterns that break the centroid. Not 73 ways to make a site uglier or harder to use. 73 specific design choices that an AI default would not produce, that a human-thinking designer might. You do not need all 73. Most sites that look distinctive use 8 to 12 of them in combination. But each one, taken alone, is a small step away from the visual signature of "an LLM produced this."

For the broader context on why this matters in 2026, see the state of the AI-generated web. For the prompt-side fix, see the anti-slop prompt template. For the specific blue-purple gradient problem, see the AI signature gradient. For detection, see 21 signs in 30 seconds. For the editor flow, see de-AI your Lovable or v0 site.

This piece focuses on the patterns themselves.

TL;DR — the 73-pattern master table

Sorted by category. Severity-of-anti-pattern-it-fixes is rated 1 to 5 (5 = the pattern fixes a tell that almost guarantees AI detection). Time S = under one hour, M = one to four hours, L = a day or more.

| # | Pattern | Category | Sev | Time | |----|------------------------------------------------------|-------------|-----|------| | 1 | Drop Inter for a typographic duo | Typography | 5 | M | | 2 | Variable font weight as a system, not a choice | Typography | 4 | S | | 3 | Drop cap on the first article paragraph | Typography | 3 | S | | 4 | Vertical text as accent, not gimmick | Typography | 4 | M | | 5 | Marginalia in long-form content | Typography | 4 | M | | 6 | Oversized number labels for sections | Typography | 3 | S | | 7 | Hanging punctuation | Typography | 3 | S | | 8 | Tabular figures in tables and prices | Typography | 4 | S | | 9 | Letterspacing as a design device | Typography | 3 | S | | 10 | Ligatures and contextual alternates turned on | Typography | 2 | S | | 11 | Right-aligned text blocks for asymmetry | Typography | 4 | S | | 12 | Custom display face for one element only | Typography | 5 | M | | 13 | Three-color palette plus one accent | Color | 5 | S | | 14 | No Tailwind blue, purple, pink | Color | 5 | S | | 15 | Earthy neutrals as a base, not gray-slate | Color | 4 | S | | 16 | Single neon hue on a charcoal page | Color | 4 | S | | 17 | Riso-print two-color treatment | Color | 4 | M | | 18 | Named CSS variables, no hex codes in markup | Color | 3 | M | | 19 | HSL relationships, not hex tokens | Color | 3 | M | | 20 | Off-black and off-white, not pure | Color | 4 | S | | 21 | Saturated gold or copper as warning color | Color | 3 | S | | 22 | Deliberately limited body contrast | Color | 2 | S | | 23 | Asymmetric sections at sixty-forty or seventy-thirty | Layout | 5 | S | | 24 | Flowing prose, not card grids | Layout | 5 | M | | 25 | dl/dt/dd for feature lists | Layout | 4 | S | | 26 | Tables for comparisons | Layout | 4 | S | | 27 | Sidebar that breaks design-system convention | Layout | 4 | M | | 28 | Margin-overlapping elements | Layout | 4 | M | | 29 | Diagonal cuts and split sections | Layout | 3 | M | | 30 | Single-column long-form layout | Layout | 4 | S | | 31 | Content flowing around fixed shapes | Layout | 3 | M | | 32 | Visible grid lines as design | Layout | 3 | S | | 33 | No animation at all | Motion | 5 | S | | 34 | One signature animation | Motion | 4 | M | | 35 | Scroll-position-triggered effects | Motion | 3 | M | | 36 | Custom cursor | Motion | 4 | M | | 37 | Idle animations | Motion | 3 | M | | 38 | Hover with content shifts, not opacity | Motion | 4 | S | | 39 | Non-fade page transitions | Motion | 3 | M | | 40 | Loading state with personality | Motion | 4 | S | | 41 | Custom SVG icon set | Iconography | 5 | L | | 42 | Hexagons, brackets, scan-lines as icons | Iconography | 4 | M | | 43 | ASCII art accents | Iconography | 3 | S | | 44 | Numbered indices like [01] [02] | Iconography | 4 | S | | 45 | Photographic or hand-drawn icons | Iconography | 4 | L | | 46 | No icons at all in nav | Iconography | 4 | S | | 47 | Inline emojis used with intent only | Iconography | 2 | S | | 48 | Specific over generic | Copy | 5 | M | | 49 | Sceptical voice | Copy | 4 | M | | 50 | Sentence-rhythm short-long alternation | Copy | 4 | M | | 51 | Banned phrases applied | Copy | 5 | S | | 52 | First-person from a named human | Copy | 5 | S | | 53 | Conversational asides in italics or em-dash | Copy | 3 | S | | 54 | Non-default microcopy | Copy | 4 | M | | 55 | CTAs as full sentences | Copy | 4 | S | | 56 | Headlines as arguments, not slogans | Copy | 5 | M | | 57 | FAQ as real questions and answers | Copy | 4 | M | | 58 | Non-rounded inputs | Forms | 4 | S | | 59 | Underline-style inputs | Forms | 4 | S | | 60 | Inline validation with messages | Forms | 3 | M | | 61 | Submit buttons that are not bg-blue-600 | Forms | 5 | S | | 62 | Multi-step forms with non-bar progress | Forms | 3 | M | | 63 | Placeholders with personality | Forms | 3 | S | | 64 | Tables that work, with sticky headers and zebra | Density | 4 | M | | 65 | Definition lists for technical content | Density | 4 | S | | 66 | Inline footnotes | Density | 3 | M | | 67 | Numerical data with context | Density | 4 | M | | 68 | Long-form prose with sub-headings, not bullets | Density | 5 | M | | 69 | Sidebars and pull-quotes for emphasis | Density | 3 | M | | 70 | Custom 404 page | Brand | 4 | S | | 71 | Custom Open Graph image | Brand | 4 | M | | 72 | Custom favicon | Brand | 4 | S | | 73 | Metadata, sitemap, robots out of Next.js defaults | Brand | 3 | S |

If you read nothing else, scan the table and pick the eight or ten with the highest severity that fit your project. That is the article in one paragraph.

Methodology — what counts as a pattern

A "pattern" in this list has four properties.

First, it is specific. Not "use better typography." That is advice, not a pattern. "Replace your single-font Inter stack with a duo of one serif for headings and one mono for technical labels" is a pattern. A pattern is something a junior could implement after reading one paragraph.

Second, it diverges from the AI default. If you ask Claude, GPT-5, or Gemini to build a marketing page, it will produce a baseline. That baseline is the AI default. A pattern in this list specifically does something the default would not. Tabular figures is a pattern because the default does not turn on font-variant-numeric: tabular-nums. A drop cap is a pattern because the default does not produce one. A custom 404 is a pattern because the AI default ships the framework's stock 404 page.

Third, it has a trade-off. Free patterns do not exist. Drop caps fail on narrow mobile. Custom cursors break on touch. Limited palettes constrain photography. Underline inputs lose familiarity. The list is honest about what each pattern costs.

Fourth, it is not a hack. None of the 73 require dark patterns, accessibility regressions beyond reasonable, or "weird for the sake of weird." Each is something a competent design studio in 2010 or 2026 might use deliberately.

Why anti-AI-default matters

You can pretend this is about taste, but the practical reason is more concrete. In 2026, "looks AI-generated" is a signal users actively use to discount a product. Detection takes seconds. The blue-purple gradient is a meme. The Inter-Lucide-rounded-cards combination is a punchline.

A site that reads as AI-built triggers three responses in users. Lower trust in claims, because the homepage looks templated and the words might be too. Lower memorability, because nothing distinguishes it from the dozen other sites the user looked at this morning. And lower willingness to pay, because anything that looks generated by a model is unconsciously priced as a commodity.

Breaking the default is not aesthetic vanity. It is signaling that a human held this thing, made calls about it, took ownership. That signal converts.

Why combining is the multiplier

One pattern alone does almost nothing. Two patterns alone are a coincidence. Five patterns start to feel like a system. Eight to ten patterns feel like a brand. The compounding effect is real because the AI signature is a high-dimensional cluster — the model produces the centroid across many axes at once. To pull away from the centroid, you have to move on several axes.

Move on color but not on typography, and the page reads as "AI with a different palette." Move on typography but not on layout, and the page reads as "AI with a fancy font." Move on five axes and the page reads as something else entirely.

The cheap way to think about it: the AI default has roughly twenty visible signature traits. If you change three, you keep seventeen. You still look like the AI default. If you change ten, you keep ten. Now you look like a fork.

flowchart TD
  A[Start] --> B{Goal?}
  B -->|Marketing site| C[Pick 4 typo + 2 color + 2 layout + 2 copy]
  B -->|Documentation| D[Pick 2 typo + 4 density + 2 layout]
  B -->|Application UI| E[Pick 2 color + 2 forms + 2 motion + 2 brand]
  B -->|Long-form blog| F[Pick 4 typo + 3 density + 2 copy]
  C --> G[Ship 8-10 patterns]
  D --> G
  E --> G
  F --> G
  G --> H{Looks AI?}
  H -->|Yes| I[Add 2 more from severity 5]
  H -->|No| J[Done]
  I --> H

The flowchart is a cheap heuristic. The honest answer is: pick the ones you can ship, ship them, look at the result, decide if it still looks generated, and iterate.

Typography — patterns 1 to 12

Typography is the single highest-leverage category. The font stack is the first thing a returning visitor recognizes, and a typographic duo can be the entire identity. The AI default ships Inter or system-ui sans. Anything else moves the needle.

1. Drop Inter for a typographic duo

Inter is a perfectly fine font. It is also the default of every AI builder, every Vercel template, every dribbble shot tagged "SaaS landing 2024." The reason is not that Inter is the best — it is that Inter is what the training data knows. Every "modern, minimal, professional" prompt resolves to Inter.

The fix is to use two fonts in deliberate roles. A typographic duo is not "two random fonts." It is one face for body and one face for headings or labels, where the contrast between the two does the visual work.

Common duos that work: a transitional or modern serif for headings (think Source Serif, Tiempos, or a free face like Fraunces, Newsreader, or Crimson Pro) paired with a geometric sans (Mona Sans, Geist) or a humanist sans (Public Sans, Source Sans). For something more technical, pair a mono (JetBrains Mono, Geist Mono, IBM Plex Mono, Space Mono) with a clean sans for prose. For editorial work, pair a serif with a wide condensed display.

The point is not the specific pairing. The point is the pairing itself. Two fonts in defined roles is structurally different from one font in all roles.

<!-- AI default -->
<style>
  body { font-family: 'Inter', sans-serif; }
</style>

<!-- Typographic duo -->
<style>
  :root {
    --font-display: 'Newsreader', Georgia, serif;
    --font-body: 'Geist', system-ui, sans-serif;
    --font-mono: 'Geist Mono', 'JetBrains Mono', monospace;
  }
  body { font-family: var(--font-body); }
  h1, h2, h3 { font-family: var(--font-display); font-weight: 500; }
  code, kbd, .tabular { font-family: var(--font-mono); }
</style>

Trade-off: two web fonts cost more bytes than one. Use font-display: swap, subset to the characters you actually need, and self-host. The performance budget is real but solvable.

When to use: every project. This is the highest-severity, highest-impact pattern in the list.

2. Variable font weight as a system, not a choice

A variable font does not give you "regular and bold." It gives you a continuous axis. The AI default uses two weights — 400 and 600, sometimes 700 — and the result is a flat hierarchy. A site with intentional weight as a system uses four to six weights with a deliberate rhythm: 300 for quiet metadata, 400 for body, 500 for sub-heads, 600 for buttons, 700 for headlines, 800 for the hero only.

:root {
  --weight-quiet: 300;
  --weight-body: 400;
  --weight-emphasis: 500;
  --weight-strong: 600;
  --weight-display: 700;
  --weight-hero: 800;
}

.metadata { font-weight: var(--weight-quiet); }
.label { font-weight: var(--weight-emphasis); }
.button { font-weight: var(--weight-strong); }
h1.hero { font-weight: var(--weight-hero); letter-spacing: -0.02em; }

The hierarchy reads as deliberate. The AI default reads as "we picked two weights and used them everywhere."

Trade-off: every weight you load is bytes. Variable fonts solve this — one variable font file replaces six static weight files. Use a variable face wherever possible.

When to use: any site with more than three text levels. Documentation, blogs, marketing pages.

3. Drop cap on the first article paragraph

A drop cap is a CSS effect that makes the first letter of an article large and dropped into the surrounding text. It is a thousand-year-old typographic device that no AI builder will produce by default.

article > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 4.2em;
  line-height: 0.85;
  font-weight: 700;
  margin: 0.05em 0.08em 0 -0.04em;
  color: var(--color-accent);
}

The visual result is striking. It also signals "this is a piece of writing, not a content block."

Trade-off: drop caps need testing on narrow viewports. At 320 pixels wide, a four-em letter eats half the line. Use a media query to suppress under 480 pixels, or reduce the size.

When to use: long-form articles, editorial pages, blog posts. Skip on marketing or product pages.

4. Vertical text as accent, not gimmick

writing-mode: vertical-rl is a CSS property that rotates text ninety degrees. Used badly, it reads as a portfolio gimmick. Used well — for a section index, a year label, a chapter marker — it adds a structural element the AI default never produces.

.year-marker {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-feature-settings: "tnum";
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--color-quiet);
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

<aside class="year-marker">2026 / Q2</aside>

The use case is restrained: one or two pieces per page, never as primary content.

Trade-off: vertical text is harder to read. It must be short, optional, and present as an accent rather than information you depend on.

When to use: editorial pages, long-form articles with chapter markers, designed product pages with indices.

5. Marginalia in long-form content

Marginalia is the practice of placing notes, references, or asides in the page margin alongside the main column. It is what books do. It is what no AI builder produces by default, because the default layout is a centered single column or a card grid.

.article-with-margin {
  display: grid;
  grid-template-columns: 1fr min(60ch, 100%) 18ch 1fr;
  gap: 1.5rem;
}
.article-with-margin > * { grid-column: 2; }
.article-with-margin > .marginalia { grid-column: 3; font-size: 0.85rem; color: var(--color-quiet); }

<article class="article-with-margin">
  <p>The point about typography is that the AI default produces a flat hierarchy.</p>
  <aside class="marginalia">See Robert Bringhurst, Elements of Typographic Style, on the practice of margin notes.</aside>
  <p>Continuing the main argument, when a site uses six weights deliberately the result feels structural.</p>
</article>

Trade-off: marginalia collapses on mobile. The standard fix is to render marginalia inline (as italicized blocks or with a left border) on screens under 900 pixels.

When to use: documentation, essays, long-form articles. Skip for marketing pages and dashboards.

6. Oversized number labels for sections

When a section has a label like "01 / Foundations," sizing the number much larger than the title creates a typographic anchor. Editorial design has done this since the 1960s. The AI default does not.

.section-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: baseline;
}
.section-number {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  font-feature-settings: "tnum";
  color: var(--color-accent);
}
.section-title {
  font-size: 1.5rem;
  font-weight: 600;
}

<header class="section-header">
  <span class="section-number">03</span>
  <h2 class="section-title">Color systems that do not look like Tailwind</h2>
</header>

Trade-off: takes vertical space. Use sparingly — three to five times per page.

When to use: documentation, essays, marketing pages with phased structure.

7. Hanging punctuation

The opening quote of a quoted block sits in the margin so the actual letters align flush with the body text below. This is a refinement that print typography uses and that browsers do not do by default.

blockquote {
  text-indent: -0.35em;
  hanging-punctuation: first;
}

hanging-punctuation is now in Safari and Firefox. For Chrome, the text-indent fallback approximates the effect.

Trade-off: small. Almost no downsides.

When to use: any site with quotes or pull-quotes. Documentation, blogs, editorial pages.

8. Tabular figures in tables and prices

font-variant-numeric: tabular-nums makes every digit the same width. The default in most fonts is proportional figures, where 1 is narrower than 0. In a price column or a data table, proportional figures jitter. Tabular figures align cleanly. The AI default rarely turns this on.

table, .price, .data, .timestamp {
  font-variant-numeric: tabular-nums;
}

<table>
  <tr><td>Plan A</td><td>$19.00</td></tr>
  <tr><td>Plan B</td><td>$199.00</td></tr>
  <tr><td>Plan C</td><td>$1,099.00</td></tr>
</table>

Trade-off: tabular figures are wider and slightly less elegant in body prose. Use them only where alignment matters.

When to use: tables, pricing pages, dashboards, anywhere with columns of numbers.

9. Letterspacing as a design device

Tight letterspacing on display headings (down to -0.04em) and wide letterspacing on small uppercase labels (up to 0.15em) is a typographic signature. The AI default ships at 0.

h1.hero {
  font-size: clamp(3rem, 8vw, 6rem);
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.kicker {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  font-weight: 600;
}

Trade-off: tight letterspacing on small body text becomes unreadable. Reserve for display only.

When to use: every site. This is a free pattern.

10. Ligatures and contextual alternates turned on

font-feature-settings is a CSS property that lets you turn on ligatures (liga), discretionary ligatures (dlig), contextual alternates (calt), and a dozen other OpenType features. The AI default never sets this.

body {
  font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
}
.display {
  font-feature-settings: "ss01" 1, "ss02" 1, "dlig" 1;
}

If you use a font like Recoleta, Fraunces, or Mona Sans, this unlocks alternate letterforms and refined spacing.

Trade-off: minor. Some fonts do not have these features and the property has no effect.

When to use: any site using a font that supports OpenType features.

11. Right-aligned text blocks for asymmetry

The AI default is left-aligned text in a centered column. Right-aligning a sub-heading or a metadata block creates a tension that signals editorial care.

.section-meta {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-quiet);
}

<div class="section-meta">
  <p>Updated 2026-04-28</p>
  <p>Read time 50 minutes</p>
</div>

Trade-off: right-alignment in long-form prose is hard to read. Reserve for short blocks.

When to use: metadata, sidebars, accent blocks. Anything short.

12. Custom display face for one element only

A custom display face — a font you only use for the single largest heading — is the most expensive and most memorable typographic move. You buy or commission one face, use it once per page on the hero or section heading, and let it carry the brand.

Faces that work for this: Recoleta, Migra, GT Sectra, Saol Display, Editorial New, Tiempos Headline, Mighty Slab.

@font-face {
  font-family: 'Migra';
  src: url('/fonts/migra-italic.woff2') format('woff2');
  font-display: swap;
}
.hero-headline {
  font-family: 'Migra', serif;
  font-style: italic;
  font-size: clamp(3.5rem, 10vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
}

Trade-off: one extra font request, the cost of the license (often $200 to $500 for a single weight), and the discipline to only use it once per page. The discipline is the hardest part — the temptation is to use the display face for everything.

When to use: brand-defining sites, editorial work, anything where the homepage hero needs to carry the identity.

Per-category summary: typography

| Pattern | Sev | Time | Risk | Mitigation | |----------------------|-----|------|---------------------------|---------------------------| | Typographic duo | 5 | M | Performance | Subset, self-host | | Variable weights | 4 | S | None | — | | Drop cap | 3 | S | Mobile breakage | Media query suppression | | Vertical text | 4 | M | Readability | Restrict to accent only | | Marginalia | 4 | M | Mobile collapse | Inline fallback | | Numbered labels | 3 | S | Vertical space | Use sparingly | | Hanging punctuation | 3 | S | Browser support | text-indent fallback | | Tabular figures | 4 | S | None | — | | Letterspacing | 3 | S | Body unreadable if tight | Display only | | OpenType features | 2 | S | Font-dependent | — | | Right-alignment | 4 | S | Long-form unreadable | Short blocks only | | Custom display face | 5 | M | License cost, discipline | One use per page |

Color — patterns 13 to 22

Color is the second-highest leverage category and the most-mocked AI signature. The blue-to-purple gradient hero is the visual joke of 2025 and 2026. If you do nothing else, change your color system.

13. Three-color palette plus one accent

The AI default uses six to ten colors with no system. A three-color palette plus one accent is a constraint that forces clarity.

The structure: one base (the page background, often near-white or near-black), one ink (the primary text color), one secondary (a tone for chrome and supporting elements), and one accent (used sparingly for emphasis).

:root {
  --color-base: #f5f3ee;
  --color-ink: #1a1a1a;
  --color-secondary: #5b5b5b;
  --color-accent: #c8553d;
}

Use the accent on perhaps five percent of the page surface. Buttons, key links, callout borders, the top of charts. Not on the hero gradient. Not on every card.

Trade-off: limited palettes constrain photography and illustration. If your product is image-heavy, the constraint pushes you to either embrace duotone treatments or exempt photography from the palette.

When to use: marketing sites, brand sites, editorial. Skip for products that are inherently colorful (food, fashion).

14. No Tailwind blue, no purple, no pink

The colors that signal "AI built this" most strongly: blue-500 (#3b82f6), blue-600 (#2563eb), purple-500 (#a855f7), pink-500 (#ec4899). The blue-purple gradient. The pink-orange gradient. Any combination thereof.

The simplest move: ban these specific tokens from your CSS. Replace with anything that is not in the Tailwind default palette.

/* Banned */
/* --primary: #3b82f6; */
/* --gradient: linear-gradient(to right, #2563eb, #a855f7); */

/* Replacements */
--primary: #c8553d;       /* terracotta */
--primary: #2d4a22;       /* forest */
--primary: #8b6f47;       /* bronze */
--primary: #1c1c1c;       /* near-black */

Trade-off: blue is genuinely a good color for trust. If you sell to enterprise and need "trust blue," use a non-Tailwind blue: a deep navy (#1c2541), a dusty blue (#5e7ba6), a steel blue (#3b6178), anything not the saturated electric variant.

When to use: every site. Lowest-effort, highest-impact pattern in the list.

15. Earthy neutrals as a base, not gray-slate

The AI default reaches for gray-50, gray-100, slate-200. The result is a cool, blue-tinged neutral. Earthy neutrals — warm beiges, oat, cream, sand, ecru, paper white — produce a fundamentally different feel.

:root {
  /* AI default neutrals */
  /* --bg: #f9fafb; */
  /* --surface: #f3f4f6; */

  /* Earthy alternative */
  --bg: #faf6ee;        /* paper */
  --surface: #f3ece0;   /* oat */
  --border: #e3d8c2;    /* sand */
  --ink: #1f1d18;       /* warm near-black */
}

Trade-off: warm neutrals can look too "lifestyle brand" for technical products. Test with your category — a developer tool with cream backgrounds reads as boutique, which may or may not be the goal.

When to use: editorial, brand, lifestyle, sustainability, food, finance with warm tone.

16. Single neon hue on a charcoal page

The opposite move from earthy neutrals: charcoal background, near-black ink, one acid neon as the only color in the system.

:root {
  --bg: #0d0d0d;
  --ink: #f0f0f0;
  --quiet: #6b6b6b;
  --accent: #d4ff00;  /* acid lime */
  /* or */
  --accent: #ff3366;  /* hot pink (used as accent only, not gradient) */
  --accent: #00d4aa;  /* mint */
  --accent: #ffd60a;  /* school-bus yellow */
}

The constraint: one neon, used on perhaps three percent of the page. Buttons, the cursor highlight, the key chart line.

Trade-off: dark mode by default loses some users. Provide a light mode if your audience is non-technical.

When to use: developer tools, music, gaming, anything with a "technical" or "underground" tone.

17. Riso-print two-color treatment

Risograph printing uses two ink colors that overlap to create a third tone where they cross. You can simulate this in web design by using two saturated hues — say a warm red and a cool blue — and letting them overlap in mockups, illustrations, and section dividers.

:root {
  --riso-red: #f15a3a;
  --riso-blue: #2c5fbd;
  /* The overlap, where these would sit on top of each other in print */
  --riso-overlap: #6b3a8e;
}

.illustration .red { color: var(--riso-red); mix-blend-mode: multiply; }
.illustration .blue { color: var(--riso-blue); mix-blend-mode: multiply; }

Trade-off: very specific aesthetic, narrow audience. Reads as design-school or zine. Not appropriate for enterprise.

When to use: magazines, zines, indie products, art-adjacent brands.

18. Named CSS variables, no hex codes in markup

Discipline pattern. Every color in your codebase lives in a CSS custom property with a semantic name. No hex codes appear inline in components. This is a process pattern that produces a more coherent system.

/* Bad */
.button { background: #c8553d; color: #faf6ee; }

/* Good */
.button { background: var(--color-accent); color: var(--color-bg); }

/* Better — semantic + role */
.button-primary {
  background: var(--color-action-primary);
  color: var(--color-action-primary-foreground);
  border: 1px solid var(--color-action-primary-border);
}

Trade-off: more upfront work to set up the system. Pays off when you change a color in one place and the entire site updates.

When to use: every project beyond a one-page site.

19. HSL relationships, not hex tokens

Define your colors in HSL with shared hue components, so dark mode and accent tones are derived rather than picked. This produces relationships rather than isolated colors.

:root {
  --hue-base: 30;            /* warm brown family */
  --hue-accent: 12;          /* terracotta */

  --color-bg: hsl(var(--hue-base) 38% 95%);
  --color-surface: hsl(var(--hue-base) 30% 90%);
  --color-border: hsl(var(--hue-base) 22% 80%);
  --color-ink: hsl(var(--hue-base) 18% 12%);
  --color-quiet: hsl(var(--hue-base) 12% 38%);

  --color-accent: hsl(var(--hue-accent) 60% 52%);
  --color-accent-soft: hsl(var(--hue-accent) 40% 90%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: hsl(var(--hue-base) 12% 8%);
    --color-surface: hsl(var(--hue-base) 10% 14%);
    --color-border: hsl(var(--hue-base) 12% 22%);
    --color-ink: hsl(var(--hue-base) 18% 92%);
    --color-quiet: hsl(var(--hue-base) 8% 60%);
  }
}

Trade-off: harder to grok at first read than hex codes. Easier to maintain because the relationships hold.

When to use: any project with light and dark mode, or with multiple brand variants.

20. Off-black and off-white, not pure

Pure #000 and pure #fff are the AI default and they are visually harsh. Off-black (#1a1a1a, #1c1c1c, #0d0d0d) and off-white (#fafafa, #f5f3ee, #faf6ee) feel softer and more intentional.

:root {
  /* Avoid */
  /* --ink: #000000; */
  /* --bg: #ffffff; */

  /* Use */
  --ink: #1a1a1a;
  --bg: #faf6ee;
}

Trade-off: contrast ratios. Always check that off-black on off-white still meets WCAG AA. The pair #1a1a1a on #faf6ee does (it is roughly 16:1).

When to use: every site.

21. Saturated gold or copper as warning color

The AI default uses red-500 for errors and yellow-500 for warnings. A saturated gold (#b8860b), copper (#b87333), or amber (#d97706) for warnings shifts the palette without losing the meaning.

:root {
  --color-warning: #b8860b;
  --color-warning-bg: #fef3c7;
  --color-error: #991b1b;       /* deep crimson, not red-500 */
  --color-error-bg: #fef2f2;
}

Trade-off: minor. Test with users that the new colors still read as "warning" and "error."

When to use: applications with status states.

22. Deliberately limited body contrast

Editorial design uses a body color that is not pure black on pure white but a softer ink (around #2a2a2a or #333) on a paper background. The contrast is still WCAG AA but the page feels less aggressive.

body {
  background: #f5f3ee;
  color: #2a2a2a;
}

Trade-off: must remain WCAG AA. The pair above is roughly 12:1, which is fine.

When to use: editorial, long-form reading, blogs.

Per-category summary: color

| Pattern | Sev | Time | Risk | Mitigation | |--------------------------------|-----|------|---------------------------|----------------------------| | 3-color + 1 accent | 5 | S | Constrains imagery | Duotone or exemption | | No Tailwind blue/purple/pink | 5 | S | Lose default trust hue | Use deep navy alternative | | Earthy neutrals base | 4 | S | Reads as lifestyle | Test with category | | Neon on charcoal | 4 | S | Dark mode loses users | Offer light mode | | Riso 2-color | 4 | M | Niche audience | Skip for enterprise | | Named CSS vars | 3 | M | Setup time | One-time cost | | HSL relationships | 3 | M | Cognitive load | Document the system | | Off-black / off-white | 4 | S | Contrast must hold | Verify WCAG | | Gold/copper warning | 3 | S | User confusion | Test legibility | | Limited body contrast | 2 | S | Must stay AA | Verify ratio |

Layout — patterns 23 to 32

Layout is where the AI default is most visible: three-card grids, centered columns, hero-features-testimonials-CTA-footer in that order. Breaking the layout default produces structural difference that compounds with everything else.

23. Asymmetric sections at sixty-forty or seventy-thirty

The AI default uses fifty-fifty splits and twelve-column symmetric grids. Sixty-forty and seventy-thirty splits feel structurally different and read as deliberately composed.

.section-asymmetric {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 4rem;
  align-items: start;
}
.section-asymmetric-reverse {
  display: grid;
  grid-template-columns: 3fr 7fr;
  gap: 4rem;
}

Use both directions across the page so the rhythm shifts.

Trade-off: must collapse cleanly on mobile. Below 768 pixels, both columns become full-width stacked.

When to use: marketing sites, editorial, anywhere with mixed media.

24. Flowing prose, not card grids

The single most-overused AI pattern is the three-feature card grid. Three boxes with rounded corners, an icon, a heading, two lines of body text, repeated three or six times.

The replacement is flowing prose. Write the features as paragraphs of writing, with sub-headings, with sentences that build into each other. Not bullets. Not cards. Sentences.

<!-- AI default -->
<div class="grid grid-cols-3 gap-6">
  <div class="rounded-lg p-6 border">
    <Icon /><h3>Fast</h3><p>Up to 10x faster.</p>
  </div>
  <div class="rounded-lg p-6 border">
    <Icon /><h3>Secure</h3><p>End-to-end encryption.</p>
  </div>
  <div class="rounded-lg p-6 border">
    <Icon /><h3>Scalable</h3><p>From 10 to 10 million users.</p>
  </div>
</div>

<!-- Flowing prose -->
<section class="prose">
  <p>The system runs about ten times faster than the previous architecture, which we
     measured against our own benchmark suite on production traffic over six weeks. The
     gains come from three places: a smaller working set, an in-memory index, and a
     query planner that does fewer round trips.</p>
  <p>It is end-to-end encrypted in the sense that we hold no plaintext key material on
     our servers — the user's device generates the key pair, we store the public half,
     and decryption happens on-device. We have published the protocol document; the
     audit by a third-party security firm completed in March.</p>
  <p>It scales from ten users to ten million in the sense that the same architecture
     runs both shapes. We can show you the cost curve.</p>
</section>

The prose version sells the same product with less polish but more information density. It also breaks the AI default visually — the page is now text, not boxes.

Trade-off: harder to scan. The card grid is more scannable. The prose version asks the reader to actually read.

When to use: products that are sold to people who read. Developer tools, B2B, anything where the buyer is technical.

25. dl/dt/dd for feature lists

When you do need a list of features, the right semantic markup is a definition list, not a div with three columns. dl (definition list), dt (term), dd (description) is the HTML element designed for "label and explanation" pairs.

<dl class="features">
  <dt>Fast</dt>
  <dd>Roughly ten times faster than v3, measured on production traffic.</dd>

  <dt>Encrypted</dt>
  <dd>Keys generated on-device. Server holds public halves only.</dd>

  <dt>Scalable</dt>
  <dd>Same architecture from ten to ten million.</dd>
</dl>

<style>
  .features {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: 1rem 2rem;
  }
  .features dt {
    font-weight: 600;
    color: var(--color-accent);
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
  }
  .features dd {
    margin: 0;
    font-size: 1rem;
  }
</style>

Trade-off: very few. Definition lists are properly supported and give you good semantics for free.

When to use: features, glossaries, technical specs, anywhere with label-and-description structure.

26. Tables for comparisons

The AI default for plan comparison is three vertical pricing cards with a checkmark column. The proper structure is a table. Plans across, features down, cells with values or checks.

<table class="pricing">
  <thead>
    <tr><th></th><th>Hobby</th><th>Team</th><th>Studio</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Price / month</th><td>$0</td><td>$19</td><td>$49</td></tr>
    <tr><th scope="row">Projects</th><td>3</td><td>20</td><td>Unlimited</td></tr>
    <tr><th scope="row">Members</th><td>1</td><td>5</td><td>Unlimited</td></tr>
    <tr><th scope="row">Audit log</th><td>—</td><td>30 days</td><td>2 years</td></tr>
    <tr><th scope="row">SSO</th><td>—</td><td>—</td><td>SAML</td></tr>
  </tbody>
</table>

Tables compare well, scan well, and read as a serious document.

Trade-off: less visually flashy than three cards with gradients. That is the point.

When to use: pricing, comparisons, specs.

27. Sidebar that breaks design-system convention

Most documentation sites have the sidebar on the left. Switching it to the right, or having a thin left sidebar with icons and a wider right sidebar with sections, creates immediate "this is not the default" recognition.

.docs-shell {
  display: grid;
  grid-template-columns: 1fr 4fr 1.5fr;
  gap: 2rem;
}
.docs-nav { /* left, narrow */ position: sticky; top: 0; }
.docs-content { /* center */ }
.docs-toc { /* right, wide enough for marginalia */ position: sticky; top: 0; }

Trade-off: users have learned left-sidebar. Breaking the convention costs some discoverability. Pays off in memorability.

When to use: documentation, knowledge bases, content sites.

28. Margin-overlapping elements

Using margin: -2rem or transform: translateX(-1rem) to push an element into the page margin, breaking the column edge, creates a structural surprise.

.pull-left {
  margin-left: -3rem;
}
.pull-right-image {
  margin-right: -4rem;
  width: calc(100% + 4rem);
}

Used twice on a page, this is editorial. Used ten times, it is chaos. Restraint matters.

Trade-off: must work on every viewport. Test that the overlap doesn't push content off-screen on mobile.

When to use: editorial pages, marketing pages with deliberate composition.

29. Diagonal cuts and split sections

A section divider that is a diagonal line — implemented with clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%) — produces a non-rectangular section edge. The AI default produces only horizontal section edges.

.section-diagonal {
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  background: var(--color-surface);
  padding: 6rem 0 8rem;
}

Use one diagonal per page. Repeating it kills the effect.

Trade-off: clip-path can clip content if you are not careful. Add bottom padding to compensate.

When to use: marketing, brand pages.

30. Single-column long-form layout

For articles and essays, a single-column layout (60 to 75 characters wide, centered) reads as a piece of writing, not a content management system. The AI default for long-form is often a centered column too, but with more chrome — sticky sidebars, table of contents, comments, share buttons. The signature pattern is a clean single column with minimal chrome.

.longform {
  max-width: 65ch;
  margin: 0 auto;
  padding: 6rem 1.5rem;
  font-size: 1.125rem;
  line-height: 1.65;
}
.longform > * + * { margin-top: 1.25rem; }
.longform h2 { margin-top: 3rem; }

Trade-off: less monetizable real estate. No sidebar ads, no recommendation rail.

When to use: serious blogs, essays, manifestos, documentation overviews.

31. Content flowing around fixed shapes

CSS shape-outside lets text flow around a non-rectangular shape — a circle, a polygon, an image. The AI default never uses this.

.lead-image {
  float: left;
  width: 14rem;
  margin: 0.5rem 1.5rem 0.5rem 0;
  shape-outside: circle();
  clip-path: circle();
}

<article>
  <img src="/portrait.jpg" class="lead-image" alt="" />
  <p>The rest of the article flows around the circular portrait, with text following
     the curve of the shape rather than the rectangular bounding box.</p>
</article>

Trade-off: must collapse on mobile, where there is not enough horizontal room.

When to use: editorial, magazine-style layouts, author pages.

32. Visible grid lines as design

Thin vertical lines at the column edges, visible in the design itself, are a graphic-design convention from the 1950s and 1960s. The AI default does not show grids.

.grid-with-rules {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
  border-left: 1px solid var(--color-border);
}
.grid-with-rules > * {
  padding: 2rem;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

The result reads as architectural rather than soft.

Trade-off: lines add visual density. Use sparingly.

When to use: directories, product grids, archives.

Per-category summary: layout

| Pattern | Sev | Time | Risk | Mitigation | |--------------------------------|-----|------|---------------------------|----------------------------| | Asymmetric sections | 5 | S | Mobile collapse | Stack on mobile | | Flowing prose | 5 | M | Less scannable | Subheadings every 3-4 paragraphs | | dl/dt/dd | 4 | S | None | — | | Tables for comparisons | 4 | S | Less flashy | That is the point | | Reversed sidebar | 4 | M | Discoverability cost | Memorability gain | | Margin-overlap | 4 | M | Mobile clipping | Viewport testing | | Diagonal cuts | 3 | M | Clipping content | Padding compensation | | Single-column long-form | 4 | S | Lost real estate | None — it is the trade | | Shape-outside | 3 | M | Mobile fallback | Disable below 768 | | Visible grid lines | 3 | S | Visual density | Sparingly |

Motion — patterns 33 to 40

Motion is where the AI default is loudest: every card has hover:scale-105, every section has framer-motion fade-in on scroll, every button has a transition on every property.

The patterns in this section either turn motion off entirely or make the motion that exists genuinely intentional.

33. No animation at all

The simplest, most powerful motion pattern is no motion. Static. Nothing fades in. Nothing scales on hover. Nothing slides. The page loads, the elements appear, the user reads.

*, *::before, *::after {
  transition: none;
  animation: none;
}

(That is the nuclear option. The realistic version is to permit color transitions on links and buttons, and ban everything else.)

Trade-off: motion can communicate state changes. Removing it entirely loses some affordance. Compensate with stronger color or border state.

When to use: serious-content sites, news, documentation, editorial. Anywhere reading is the primary activity.

34. One signature animation

The opposite of "no animation" is "one specific animation, repeated, that is yours." A logo that draws itself on load. A heading that morphs. A cursor that leaves a trail. Use it once or twice per page, and only that animation, so it becomes a recognition mark.

@keyframes draw-line {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}
.logo path {
  stroke-dasharray: 1000;
  animation: draw-line 2s ease-out forwards;
}

Trade-off: requires actual design work. The signature animation must be designed, not picked from a library.

When to use: brand sites, portfolios, agencies.

35. Scroll-position-triggered effects

Not "fade in on scroll" — that is the AI default. Something more specific, like a heading that grows or shrinks as it scrolls past, or a sidebar that updates with the current section, or a number that counts up as the section enters view.

const heading = document.querySelector('.scroll-heading');
const observer = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    if (e.isIntersecting) heading.classList.add('engaged');
  });
}, { threshold: 0.5 });
observer.observe(heading);

.scroll-heading {
  font-size: 4rem;
  transition: font-size 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.scroll-heading.engaged {
  font-size: 6rem;
}

Trade-off: scroll effects can fight the user's reading rhythm. Test that the page still reads cleanly when the user scrolls fast.

When to use: marketing pages, brand pages.

36. Custom cursor

Replacing the system cursor with a custom one is a strong signal that someone designed this. A circle that follows the pointer, a crosshair, a custom SVG, all read as bespoke.

const cursor = document.createElement('div');
cursor.className = 'custom-cursor';
document.body.appendChild(cursor);

document.addEventListener('mousemove', (e) => {
  cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
});

.custom-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 12px; height: 12px;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.05s linear, width 0.2s, height 0.2s;
  z-index: 1000;
}
@media (pointer: coarse) {
  .custom-cursor { display: none; }
}

Trade-off: useless on touch. Hide it with @media (pointer: coarse). Some users with motor accessibility needs may dislike custom cursors — provide a way to disable it.

When to use: brand sites, portfolios. Skip for utility apps.

37. Idle animations

A small element that animates on its own — a slowly rotating shape in the background, a typewriter cursor blinking on a key heading, a dot pulsing on the logo. Idle motion is the opposite of "everything animates on interaction." Idle motion is "one thing always moves, nothing else does."

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.cursor-blink {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  background: var(--color-accent);
  vertical-align: text-bottom;
  animation: blink 1.05s steps(1) infinite;
}

Trade-off: respect prefers-reduced-motion.

@media (prefers-reduced-motion: reduce) {
  .cursor-blink { animation: none; opacity: 1; }
}

When to use: brand sites where the idle motion serves a metaphor (the cursor on a writing tool, the heartbeat on a health tool).

38. Hover with content shifts, not opacity

The AI default for hover is opacity: 0.8 or scale: 1.05. Genuinely interesting hover states shift content: a label that slides in, a description that appears, an image that crops differently.

.project-card {
  position: relative;
  overflow: hidden;
}
.project-card .label {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  transform: translateY(120%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.project-card:hover .label {
  transform: translateY(0);
}

Trade-off: hover does not exist on touch. Provide an alternative for touch users — tap-to-reveal, or always show on small screens.

When to use: project grids, portfolio sites, image-heavy interfaces.

39. Non-fade page transitions

The AI default for page transition is fade. Cross-fade. Sometimes a slight slide. Anything else — a curtain wipe, a directional slide that matches the link direction, a hold-and-zoom — reads as designed.

@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: slide-out-left 0.3s ease-in forwards;
}
::view-transition-new(root) {
  animation: slide-in-right 0.3s ease-out forwards;
}

(View Transitions API as of 2026 is supported in Chrome and Safari; falls back gracefully.)

Trade-off: transitions add a perceived delay. Keep them under 300 milliseconds.

When to use: brand sites, portfolios, anywhere navigation is part of the experience.

40. Loading state with personality

Loading states are usually a Tailwind spinner or a generic skeleton. A loading state with personality — a custom progress indicator, a typewriter that types "loading...", a shape that morphs, a counter that runs up — is a small detail that signals care.

<div class="loading-typewriter" aria-live="polite">
  <span>fetching</span>
  <span class="dots">
    <span>.</span><span>.</span><span>.</span>
  </span>
</div>

<style>
  .dots span { animation: dot-fade 1.4s infinite; }
  .dots span:nth-child(2) { animation-delay: 0.2s; }
  .dots span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes dot-fade {
    0%, 80%, 100% { opacity: 0.2; }
    40% { opacity: 1; }
  }
</style>

Trade-off: a loading state with personality can feel cute when the user is impatient. Test in production traffic.

When to use: any application where loading is visible.

Per-category summary: motion

| Pattern | Sev | Time | Risk | Mitigation | |--------------------------------|-----|------|---------------------------|----------------------------| | No animation | 5 | S | Lost affordance | Compensate with color | | One signature animation | 4 | M | Requires design | Worth the cost | | Scroll-triggered | 3 | M | Distracts reading | Subtle, infrequent | | Custom cursor | 4 | M | Touch users | Disable on coarse pointer | | Idle animations | 3 | M | Reduced-motion conflict | Respect prefers-reduced | | Hover content shifts | 4 | S | Touch fallback | Tap-to-reveal | | Non-fade transitions | 3 | M | Perceived delay | Under 300ms | | Loading with personality | 4 | S | Cute when impatient | Test in production |

Iconography — patterns 41 to 47

Lucide icons are the new emoji of AI-built sites. They are everywhere. Replacing them — or removing them entirely — is one of the highest-signal changes you can make.

41. Custom SVG icon set

A custom icon set is a serious investment — usually 20 to 80 hours of designer time for a meaningful set, plus ongoing maintenance. The payoff is enormous: nobody else has your icons, the icons can carry the brand voice, and the consistency across the product reads as care.

If you cannot commission a custom set, at minimum modify Lucide. Take the Lucide source SVGs, change stroke width from 2 to 1.5, change line caps from round to square, change corner radii from 2 to 0. The modified set will not look like custom but will not look like default Lucide either.

<!-- Lucide default: stroke-width="2" stroke-linecap="round" -->
<!-- Modified: -->
<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.25" stroke-linecap="square" fill="none">
  <path d="M3 12h18M12 3v18" />
</svg>

Trade-off: time, money, maintenance. Custom icon sets must be maintained as the product grows.

When to use: brand-defining products, well-funded teams, agencies.

42. Hexagons, brackets, scan-lines as icons

Specific shape language — hexagons, corner brackets like [ ], scan lines, plus marks — used as a vocabulary across the site, replaces icon-as-decoration with shape-as-language.

<div class="frame">
  <div class="bracket bracket-tl"></div>
  <div class="bracket bracket-tr"></div>
  <div class="bracket bracket-bl"></div>
  <div class="bracket bracket-br"></div>
  <div class="frame-content">
    <h3>Section header</h3>
  </div>
</div>

<style>
  .frame { position: relative; padding: 2rem; }
  .bracket {
    position: absolute;
    width: 18px; height: 18px;
    border: 1px solid var(--color-accent);
  }
  .bracket-tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
  .bracket-tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
  .bracket-bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
  .bracket-br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
</style>

Corner brackets read as a HUD, a scanner, a technical interface. They repeat across the site as a signature.

Trade-off: very specific aesthetic, not for every brand.

When to use: technical products, developer tools, scanner-style brands.

43. ASCII art accents

A small ASCII diagram in the homepage hero, a section divider in monospace, a pre-formatted block. The AI default does not produce ASCII art.

<pre class="ascii-art">
  ┌─────────────────┐
  │  signal: clear  │
  └─────────────────┘
</pre>

<hr class="ascii-rule">~~ ~~ ~~ ~~ ~~ ~~ ~~ ~~ ~~ ~~ ~~ ~~</hr>

Trade-off: ASCII art feels niche. Reads as developer-culture.

When to use: developer tools, terminal-adjacent products, indie brands.

44. Numbered indices like [01] [02]

Section numbers in monospace brackets — [01], [02], [03] — read as editorial and as catalog. The AI default uses bare digits or no numbers at all.

<h2><span class="index">[03]</span> Color systems</h2>

<style>
  .index {
    font-family: var(--font-mono);
    color: var(--color-accent);
    font-size: 0.65em;
    margin-right: 0.75em;
    vertical-align: 0.2em;
  }
</style>

Trade-off: minimal. Adds small visual weight.

When to use: editorial, documentation, marketing pages with sectioned structure.

45. Photographic or hand-drawn icons

Replacing iconographic icons with photographs (cropped tightly, monochromatic, treated) or with hand-drawn illustrations changes the texture of the page from "system UI" to "object."

<figure class="hand-drawn-feature">
  <img src="/illustrations/feature-three.svg" alt="A pencil sketch of three connected shapes">
  <figcaption>The mesh routing topology, sketched.</figcaption>
</figure>

Trade-off: requires illustration or photography work. Real cost in time and money.

When to use: brand sites where the texture differentiates. Skip for application UI.

46. No icons at all in nav

Plain text navigation, no icons. Just words. "Pricing | Docs | Login | Get Started." The AI default puts an icon next to each item.

<nav class="text-only-nav">
  <a href="/pricing">Pricing</a>
  <a href="/docs">Docs</a>
  <a href="/blog">Blog</a>
  <a href="/login">Sign in</a>
  <a href="/start" class="cta">Start a project</a>
</nav>

Trade-off: less scannable for icon-trained users. More serious.

When to use: editorial, news, B2B serious-tone products.

47. Inline emojis used with intent only

The AI default sprinkles emojis everywhere — checkmarks, sparkles, rocket. The pattern is to use zero emojis or use one emoji per page in a deliberate location: a single emoji as a section anchor, or an emoji on the favicon.

If you use them, use them once, in a place that does work — say, an emoji as the logo for a side project, or one emoji per blog post category.

Trade-off: emojis trigger informal-tone associations. May not fit serious brands.

When to use: side projects, casual products, blog post categories.

Per-category summary: iconography

| Pattern | Sev | Time | Risk | Mitigation | |--------------------------------|-----|------|---------------------------|----------------------------| | Custom SVG set | 5 | L | Cost, maintenance | Start with modifications | | Hexagons / brackets | 4 | M | Niche aesthetic | Brand-fit check | | ASCII accents | 3 | S | Dev-culture coded | Use sparingly | | Numbered indices | 4 | S | None | — | | Photographic / hand-drawn | 4 | L | Production cost | Stock as fallback | | No icons in nav | 4 | S | Less scannable | Test | | Emojis with intent | 2 | S | Informal tone | Skip for serious |

Copy and voice — patterns 48 to 57

Copy is half the page. The AI default in copy is more recognizable than the AI default in design. "Transform your workflow." "Unlock the power of." "Built for the way you work." These phrases are the verbal blue-purple gradient.

For more depth on prompt-side fixes, see the anti-slop prompt template.

48. Specific over generic

The AI default writes generic claims — "fast, secure, reliable, scalable." The replacement is specific claims with numbers, methods, or named trade-offs.

AI default: "Built for speed and scale."

Specific:   "Cold start in 47 milliseconds. Tested on a $5/month VPS in Frankfurt
             during peak hours. Falls over above 12,000 requests/second; we publish
             the load test results."

The specific version is harder to write because it requires knowing the actual numbers. That difficulty is the point — humans who built the thing know the numbers, and the page reads as written by them.

Trade-off: must be true. If you make up numbers, the page becomes worse than generic.

When to use: every page that makes claims.

49. Sceptical voice

The AI default writes from the cheerleader perspective — everything is great, everything is the best. The sceptical voice writes with doubt, with caveats, with explicit acknowledgment that the thing is not perfect.

AI default: "The most powerful tool for modern teams."

Sceptical:  "It works for teams of five to fifty. Above that, you start hitting
             the limits of the data model — we are working on this. Below five,
             you do not need this tool, frankly. Use a spreadsheet."

The sceptical voice does not slag the product. It calibrates the claim. The reader trusts the calibration.

Trade-off: sceptical copy needs review by someone who can hold the line — sales pressure will push to make it more enthusiastic.

When to use: anywhere credibility matters. B2B, developer tools, regulated industries.

50. Sentence-rhythm short-long alternation

The AI default writes sentences of medium length, all roughly the same. The fix is rhythm: a short sentence next to a long one. A fragment next to a clause. Variation in length is the audible signature of human writing.

AI default: "Our platform helps teams collaborate effectively. It provides powerful
features for project management. Teams can track their work efficiently. The
interface is intuitive and easy to use."

With rhythm: "We make a project tool. The pitch is small: most teams do not need a
twenty-feature platform with seventeen integrations and a sales call to onboard.
They need a list, a calendar, and a way to share both. That is what this is. It
takes ninety seconds to set up."

The rhythmic version has a fragment, a long sentence with multiple clauses, a short sentence, and a clause. The variation reads as a person.

Trade-off: takes more revision than first-draft copy. Worth it.

When to use: every page with body copy.

51. Banned phrases applied

Maintain an actual list of phrases that are never used on the site. The list at the top of this article — delve, tapestry, leverage, robust, seamless, harness, revolutionize, empower, unleash, navigate the landscape, in today's fast-paced — is a starting point.

Add to the list anything that appears in the first three pages of a Google search for "best SaaS landing page copy 2024." Those are the phrases the AI default learned.

Banned: "transform your workflow"
Replace: "remove three steps from your weekly report"

Banned: "leverage AI"
Replace: "use the API"

Banned: "robust platform"
Replace: "the API has been up 99.6% in the last twelve months; here is the public log"

Trade-off: zero. This is a free pattern.

When to use: every project. Add a CI check that scans copy for banned phrases.

52. First-person from a named human

The AI default writes in the corporate "we" or in passive third person. The pattern is first-person from a named human — "I built this because" — on the about page, in changelogs, in blog posts.

AI default: "Our team is committed to delivering value to our customers."

Named human: "I started this in March 2025 because the tool I was using kept losing
              my data. I was working on three client projects at once and lost a
              week of work on a Tuesday. The next morning I started this. — Robin"

A name and a story is a forcing function for credibility.

Trade-off: requires actually being a person. For larger teams, attribute clearly — say which member of the team wrote which post, sign changelogs.

When to use: about pages, changelogs, blog posts, founder letters.

53. Conversational asides in italics or em-dash

A parenthetical comment in italics, or an em-dash interruption, breaks the rhetorical flow of marketing copy and signals "a person is talking to you."

"The system runs about ten times faster than v3 — we measured against our own
benchmark suite, which we have published; you can run it yourself if you doubt
the number — and the cold-start cost is now under fifty milliseconds."

The interruption is the signature. AI rarely produces nested asides like this; it tends to write linearly.

Trade-off: readers can lose the main thread. Use sparingly.

When to use: long-form prose, blog posts, technical writing.

54. Non-default microcopy

Microcopy is the small text — empty states, button labels, error messages, footer. The AI default is generic ("No items found", "Try again later", "Submit", "Sign up", "All rights reserved").

The pattern is to write microcopy that has voice. Specific, with personality, with the brand tone audible in two-word labels.

AI default empty state: "No projects found."
With voice:             "Nothing here yet. Make your first project — it takes a minute."

AI default error:       "Something went wrong."
With voice:             "Could not save. The backend is sick. Refresh in a minute, or
                         file an issue if it keeps happening."

AI default footer:      "© 2026 Company. All rights reserved."
With voice:             "Made by two people in Lyon and Berlin. © Robin & Mara, 2026.
                         Email [email protected] if you find a bug."

Trade-off: takes time. Microcopy gets less love than headlines because it is less visible. The cumulative effect is huge.

When to use: applications with empty states and error states. Footers. 404 pages.

55. CTAs as full sentences

The AI default CTA is "Get started" or "Start free trial" or "Sign up." The pattern is a CTA that is a complete sentence with verb, object, and either an outcome or a price.

AI default: "Get started"

Full sentence: "Start a project — free for thirty days, no card"
              "Read the security audit (PDF, 14 pages)"
              "Email me when v2 ships"
              "Show me how it would work for a five-person team"

The full-sentence CTA reads as something a person wrote. It also converts because it tells the user exactly what happens next.

Trade-off: longer buttons take more space. Layout must accommodate.

When to use: every primary CTA on the site.

56. Headlines as arguments, not slogans

The AI default headline is a slogan: "The future of [thing]." "Reimagine [activity]." "Where [outcome] happens." The pattern is a headline that makes an argument: a claim with a verb and a specific subject.

AI default slogan: "The future of project management."

Argument:          "Most project tools optimize for the manager. This one optimizes for
                    the person doing the work."

AI default slogan: "Reimagine your workflow."

Argument:          "Three tools collapsed into one, with a public roadmap, run by two
                    humans you can email."

Argument headlines are harder to write because they require a position. That difficulty is the point.

Trade-off: position-taking is uncomfortable for marketing. Push through it.

When to use: hero headlines on marketing sites, blog post titles, section headings.

57. FAQ as real questions and answers

The AI default FAQ is a list of softballs: "What is [product]? It is the leading [category]." Real FAQs have the actual questions a buyer asks, including uncomfortable ones, and answer them honestly.

AI default: "Is your platform secure? Yes, we take security seriously."

Real:       "Have you been audited? Yes — by Cure53 in March 2026. The report is
             linked at the bottom of this section. They flagged two issues, both
             closed within ten days. We have not had a third-party audit before that."

AI default: "How does pricing compare? We offer competitive pricing."

Real:       "How does pricing compare to Linear? We are about thirty percent cheaper
             on the team plan. We do not have all of Linear's features. If you need
             cycles, sub-issues, and the API, use Linear — we are not better. If you
             want a project board, a calendar, and a public roadmap with no learning
             curve, we are simpler."

Trade-off: marketing rarely lets you write real FAQs. Defend them.

When to use: every product with an FAQ section.

Per-category summary: copy

| Pattern | Sev | Time | Risk | Mitigation | |--------------------------------|-----|------|---------------------------|----------------------------| | Specific over generic | 5 | M | Must be true | Verify numbers | | Sceptical voice | 4 | M | Sales pushback | Defend | | Short-long rhythm | 4 | M | Revision time | Worth it | | Banned phrases | 5 | S | None | CI check | | First-person named | 5 | S | Requires being a person | — | | Conversational asides | 3 | S | Lost thread | Sparingly | | Non-default microcopy | 4 | M | Time investment | Cumulative payoff | | Full-sentence CTAs | 4 | S | Layout space | Design accommodation | | Argument headlines | 5 | M | Marketing discomfort | Push through | | Real FAQ | 4 | M | Marketing pushback | Defend |

Forms — patterns 58 to 63

Forms are usually invisible until they break. The AI default produces forms that look like every other form: rounded inputs, blue submit button, generic placeholders, generic error states. These are the easiest patterns to apply because they touch only the form components.

58. Non-rounded inputs

The AI default for input border-radius is 0.5rem to 0.75rem. Sharp inputs (border-radius 0), barely-rounded inputs (border-radius 2px), or differently-rounded inputs (top-left and bottom-right rounded only) signal a different aesthetic.

.input-sharp {
  border-radius: 0;
  border: 1px solid var(--color-border);
  padding: 0.625rem 0.75rem;
}
.input-asymmetric {
  border-radius: 6px 0 6px 0;
}

Trade-off: sharp corners can feel aggressive in some contexts. Test with users.

When to use: technical brands, editorial, brutalist aesthetics.

59. Underline-style inputs

Replacing the box-input with an underline — no border on three sides, only a bottom border — produces a fundamentally different form rhythm.

.input-underline {
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding: 0.5rem 0;
  background: transparent;
  font-size: 1rem;
}
.input-underline:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
  border-bottom-width: 2px;
}

<label class="form-row">
  <span class="label">Email</span>
  <input type="email" class="input-underline" placeholder="[email protected]" />
</label>

Trade-off: less obvious as a form field. Add explicit labels above each input.

When to use: minimal forms, editorial sign-up forms, contact pages.

60. Inline validation with messages, not just red borders

The AI default shows a red border on validation failure and nothing else. The pattern is an inline message that says specifically what is wrong, in human language.

<label class="form-row">
  <span class="label">Password</span>
  <input type="password" aria-describedby="pw-msg" />
  <span id="pw-msg" class="msg msg-error">
    Needs at least eight characters and a number. The system says yours is six.
  </span>
</label>

The message names the rule and tells the user what they typed.

Trade-off: requires actual validation logic. Worth it.

When to use: every form.

61. Submit buttons that are not bg-blue-600

The single most-mocked AI tell is the blue submit button. bg-blue-600 text-white rounded-md on a sign-up form is the visual joke.

The replacements: any color that is not Tailwind blue. Black on cream. Cream on black. Terracotta. Forest green. The brand accent. A button that is not a rounded rectangle — a slightly-rotated stamp, a pill with a brand color, an underlined text link.

.btn-primary {
  background: var(--color-ink);
  color: var(--color-bg);
  border: 1px solid var(--color-ink);
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 0;
  transition: background 0.15s;
}
.btn-primary:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

Trade-off: blue is genuinely high-converting in some markets. Test.

When to use: every form.

62. Multi-step forms with non-bar progress

A multi-step form usually has a progress bar at the top. The pattern is to use something else: a numbered breadcrumb, a visible step list, a fraction (Step 2 of 4), or a fading background that gradients across the steps.

<nav class="form-progress">
  <ol>
    <li class="done">Account</li>
    <li class="current">Plan</li>
    <li>Payment</li>
    <li>Confirm</li>
  </ol>
</nav>

<style>
  .form-progress ol {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 0.85rem;
  }
  .form-progress li {
    color: var(--color-quiet);
    border-bottom: 1px solid var(--color-quiet);
    padding-bottom: 0.25rem;
  }
  .form-progress li.done { color: var(--color-ink); border-color: var(--color-ink); }
  .form-progress li.current {
    color: var(--color-accent);
    border-color: var(--color-accent);
    border-bottom-width: 2px;
  }
</style>

Trade-off: progress bars are familiar. Alternatives need clear labeling.

When to use: onboarding, checkout, multi-step sign-up.

63. Placeholders with personality

The AI default placeholder is Enter your email or [email protected]. Placeholders with personality use the brand voice and often hint at what the field accepts.

Default: "Enter your name"
With voice: "What should we call you? Real name or handle, both fine."

Default: "[email protected]"
With voice: "An email you actually check"

Default: "Tell us about your project"
With voice: "What are you trying to build, in two or three sentences. We will read it."

Trade-off: placeholders can be hard to read inside the field. Keep them concise.

When to use: contact forms, sign-up forms, inquiry forms.

Per-category summary: forms

| Pattern | Sev | Time | Risk | Mitigation | |--------------------------------|-----|------|---------------------------|----------------------------| | Non-rounded inputs | 4 | S | Aggressive feel | Test | | Underline inputs | 4 | S | Less obvious | Explicit labels | | Inline validation with msgs | 3 | M | Logic required | Worth it | | Non-blue submit | 5 | S | Conversion impact | Test | | Non-bar progress | 3 | M | Less familiar | Clear labels | | Placeholders with voice | 3 | S | Readability | Keep concise |

Information density — patterns 64 to 69

The AI default fears density. Every page is sparse: one heading, two sentences, a button, repeat. Density patterns lean the other way — pages that have actual information, presented well.

64. Tables that work, with sticky headers and zebra

Most "tables" on AI-built sites are divs styled to look like tables. Real tables, with

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
thead th {
  position: sticky;
  top: 0;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-ink);
  text-align: left;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
}
tbody tr:nth-child(even) {
  background: var(--color-surface);
}
tbody td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
tbody tr:hover {
  background: var(--color-accent-soft);
}

<dl class="api-params">
  <dt><code>locale</code> <span class="type">string</span></dt>
  <dd>The two-letter ISO language code. Defaults to <code>en</code>. Currently
      supported: <code>en</code>, <code>fr</code>.</dd>

  <dt><code>cache</code> <span class="type">boolean</span></dt>
  <dd>Whether to use the cached response. Defaults to <code>true</code>. Set to
      <code>false</code> if you have just updated the source data and want a
      fresh fetch.</dd>
</dl>

<p>The system runs about ten times faster than v3<sup><a href="#fn1">[1]</a></sup>,
   measured on production traffic over six weeks.</p>

<aside class="footnotes">
  <p id="fn1"><sup>[1]</sup> Measured against our own benchmark suite. The full
     methodology is in the engineering blog post at <a href="/blog/v4-benchmarks">
     /blog/v4-benchmarks</a>.</p>
</aside>

<dl class="metric">
  <dt>Cold start</dt>
  <dd>
    <span class="value">47</span><span class="unit">ms</span>
    <span class="context">median, n=10,000, $5/mo VPS in Frankfurt, peak hours, 2026-04</span>
  </dd>
</dl>

<article class="longform">
  <p>Main paragraph...</p>

  <aside class="pull-quote">
    "The discipline is the hardest part. The temptation is to use the display
    face for everything."
  </aside>

  <p>More main content...</p>

  <aside class="sidebar">
    <h4>Adjacent reading</h4>
    <ul>
      <li><a href="/blog/something">Something related</a></li>
      <li><a href="/blog/something-else">Something else related</a></li>
    </ul>
  </aside>
</article>

<style>
  .pull-quote {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--color-accent);
    border-left: 3px solid var(--color-accent);
    padding-left: 1.25rem;
    margin: 2.5rem 0;
    max-width: 30rem;
  }
  .sidebar {
    background: var(--color-surface);
    padding: 1.5rem;
    margin: 2rem 0;
    border-left: 3px solid var(--color-ink);
  }
</style>

<main class="not-found">
  <div class="number">404</div>
  <h1>This page is not where you expected.</h1>
  <p>Either it moved, or you typed something I do not have. The URL was
     <code>{{path}}</code>. If you think this is a broken link from somewhere on
     this site, the email at the bottom of this page goes to a real person — let
     me know.</p>
  <p class="actions">
    <a href="/" class="btn-primary">Back to the homepage</a>
    <a href="/sitemap" class="btn-secondary">Or browse the sitemap</a>
  </p>
</main>

// app/og/route.tsx (Next.js dynamic OG)
import { ImageResponse } from 'next/og';

export async function GET(request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') ?? 'Untitled';

  return new ImageResponse(
    (
      <div style={{
        width: '100%', height: '100%',
        display: 'flex', flexDirection: 'column',
        background: '#1a1a1a',
        color: '#faf6ee',
        padding: '60px',
        fontFamily: 'serif',
      }}>
        <div style={{ fontSize: '24px', opacity: 0.7 }}>onlinetools4free.com</div>
        <div style={{ fontSize: '60px', marginTop: 'auto', lineHeight: 1.1 }}>
          {title}
        </div>
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

// app/layout.tsx
export const metadata = {
  metadataBase: new URL('https://example.com'),
  title: {
    default: 'Sailop — design tools that resist the AI default',
    template: '%s — Sailop',
  },
  description:
    'Sailop is an MCP server and CLI that generates frontend code that does not look ' +
    'like every other AI-built site. Read the docs, install the npm package.',
  openGraph: {
    type: 'website',
    locale: 'en_US',
    url: 'https://example.com',
    siteName: 'Sailop',
    images: [{ url: '/og.png', width: 1200, height: 630 }],
  },
  twitter: { card: 'summary_large_image', images: ['/og.png'] },
};

# robots.txt
User-agent: *
Allow: /

# Allow LLM crawlers — answers from real sources are better than answers from training data
User-agent: GPTBot
Allow: /
User-agent: ClaudeBot
Allow: /
User-agent: PerplexityBot
Allow: /
User-agent: Google-Extended
Allow: /

Sitemap: https://example.com/sitemap.xml