The Anti-Slop Manifesto: 73 Rules for Unique Design

Three projects open in Cursor, three different prompts, three teams who never spoke. All three shipped #3b82f6 on #ffffff, Inter at font-weight: 700, three rounded-lg cards in a repeat(3, 1fr) grid, every transition set to transition: all 300ms ease-in-out. That is not coincidence. That is the default, and the default has a fingerprint.

This is the manifesto. 73 rules, each a line between default and intentional. They aren't opinions. They're measurable signals that separate AI-generated visual output from designed work, and most of them you can grep for.

Why Rules Matter

Rules aren't constraints on creativity. They're constraints on laziness. When a model generates code it reaches for the statistical center because it has no opinion. That center is AI slop, and it has 7 dimensions. A designer reaches for specifics because they do have one.

Every rule below follows one format: NEVER (the default the model emits) and ALWAYS (the intentional alternative). You don't have to follow all 73. Pick the ones that matter for the project. But know what you're choosing, and know what you're walking away from.

Color Rules (12 Rules)

NEVER use a primary hue between 200 and 290 (the blue-indigo-violet band that gives you #3b82f6 and bg-blue-600). ALWAYS choose a primary hue outside it.

NEVER ship pure #ffffff as a background. ALWAYS tint the off-white (#f5f0eb warm, #eef2f1 cool).

NEVER set text to pure #000000. ALWAYS use an off-black (#1c1714 warm, #141820 cool).

NEVER use Tailwind's default scale values raw (text-gray-500, bg-slate-900). ALWAYS define custom tokens that map to your palette.

NEVER give all muted text the same opacity. ALWAYS ship at least 3 hierarchy levels: fg, fg-muted, fg-faint.

NEVER leave an accent without a soft variant. ALWAYS define accent-soft as the accent at 8-12% alpha for backgrounds and rings.

NEVER build the whole palette from one hue. ALWAYS add a complementary or split-complementary secondary.

NEVER drop gray-50 through gray-900 in unshifted. ALWAYS tint neutrals toward your base hue so the grays belong to the brand.

NEVER skip ::selection. ALWAYS set a custom selection background in your accent. It is one rule almost no generated site bothers with, which is exactly why it reads as human.

NEVER reuse your muted-text color as your border color. ALWAYS split border and border-strong tokens.

NEVER reason in raw hex. ALWAYS think in HSL and convert, so lightness and saturation stay deliberate. This is how Sailop generates infinite unique palettes from hue math instead of a fixed list.

NEVER ignore contrast. ALWAYS hold 4.5:1 for body and 3:1 for large text.

Typography Rules (11 Rules)

NEVER ship Inter, system-ui, or bare sans-serif. ALWAYS name a real typeface with a category fallback. Inter is killing your brand lists 10 tested alternatives.

NEVER use one typeface for headings and body. ALWAYS pair a display face (often serif) with a body face.

NEVER set every heading to 700. ALWAYS vary weight by level: 800 h1, 700 h2, 600 h3.

NEVER leave display text at default tracking. ALWAYS tighten it (-0.02em to -0.04em).

NEVER use one line-height everywhere. ALWAYS run headings tight (1.1-1.2) and body loose (1.5-1.7).

NEVER skip text-wrap: balance on headings. ALWAYS add it so a 5-word headline never breaks to a lonely orphan word.

NEVER skip text-wrap: pretty on body. ALWAYS include it to kill the ragged last line.

NEVER lean on browser default sizes. ALWAYS define a scale, ideally fluid with clamp(1.6rem, 4vw, 2.4rem).

NEVER forget a monospace token. ALWAYS name one for code, not the OS fallback stack.

NEVER load fonts without preconnect. ALWAYS add to the font host.

NEVER load more than 3 families. ALWAYS cap the budget at display + body + mono.

Layout Rules (10 Rules)

NEVER default to grid-template-columns: repeat(3, 1fr). ALWAYS go asymmetric (5fr 3fr, 3fr 5fr). The three-identical-card grid is its own tell, and it kills conversion.

NEVER center everything. ALWAYS give at least one section a left-aligned or asymmetric layout.

NEVER use max-w-7xl (1280px) as the only width. ALWAYS pick a specific value (980px, 1060px).

NEVER reuse one gap for every grid. ALWAYS vary gap by how related the items are.

NEVER give the hero the same padding as other sections. ALWAYS make it distinct (e.g. 148px top).

NEVER repeat one section padding. ALWAYS define 3+ variants (section-a, section-b, section-c).

NEVER stack hero > features > testimonials > cta > footer in that exact order. ALWAYS break the template with an unexpected section type or sequence.

NEVER skip mobile breakpoints. ALWAYS collapse grids to one column.

NEVER give every block identical column spans. ALWAYS ship at least one 7:5 or 5:7 split.

NEVER size purely against the viewport when content should drive it. ALWAYS reach for @container queries on cards and sidebars that get reused at different widths.

Animation Rules (10 Rules)

NEVER write transition: all. ALWAYS name the properties (transform, opacity, color).

NEVER ship ease-in-out on interactive elements. ALWAYS use a custom curve like cubic-bezier(0.22, 1, 0.36, 1).

NEVER use one duration for everything. ALWAYS scale it: small elements ~200ms, large ones 500-700ms.

NEVER skip prefers-reduced-motion. ALWAYS cut or kill motion when it's requested.

NEVER put animate-pulse, animate-bounce, or animate-spin on content. ALWAYS reserve them for loading states.

NEVER glue duration-300 to every element. ALWAYS match it to the act (150ms hover, 400ms layout shift).

NEVER use the same easing for enter and exit. ALWAYS pick different curves for appearing and disappearing.

NEVER animate width, height, top, left. ALWAYS drive motion through transform and opacity.

NEVER reach for @keyframes on a simple state change. ALWAYS use a plain transition for hover and focus.

NEVER forget animation-fill-mode. ALWAYS set forwards or both when the end state should hold. (And if your only animation is fade-in-up on scroll, that's motion slop, not motion design.)

Component Rules (10 Rules)

NEVER put rounded-lg (8px) on everything. ALWAYS vary radii: button 4px, card 7px, container 12px.

NEVER stamp shadow-md on every card. ALWAYS define specific shadows or use a border for elevation.

NEVER make all buttons identical. ALWAYS ship primary, secondary, and ghost variants with real visual distance.

NEVER drop an icon in every card. ALWAYS ask whether it adds information or just fills the corner.

NEVER reuse one card structure for every content type. ALWAYS let the content reshape the card.

NEVER size every control the same. ALWAYS scale by hierarchy and frequency of use.

NEVER slap backdrop-blur on every overlay. ALWAYS weigh solid, gradient, and hard-edged alternatives first.

NEVER force every list item to one height. ALWAYS let content set height with consistent padding.

NEVER apply one hover effect everywhere. ALWAYS vary feedback: scale on cards, color on links, underline on nav.

NEVER repeat "Get Started" on every section. ALWAYS vary the CTA by context (Learn more, See examples, Read docs, Try it free).

Structure Rules (10 Rules)

NEVER build the page from