The Anti-Slop Manifesto: 73 Rules for Unique Design
A complete reference of NEVER/ALWAYS rules that separate AI-generated defaults from intentional design. The anti-slop rulebook.
This is the manifesto. 73 rules. Each one a line in the sand between default and intentional, between slop and craft. These aren't opinions. They're measurable signals that distinguish AI-generated visual output from designed work.
Why Rules Matter
Rules aren't constraints on creativity. They're constraints on laziness. When an AI generates code, it reaches for defaults because it has no opinion -- this is what we call AI slop across 7 dimensions. A designer reaches for specifics because they do.
Every rule below follows the same format: NEVER (the AI default) and ALWAYS (the intentional alternative). You don't have to follow all 73. Pick the ones that matter for your project. But know what you're choosing and what you're leaving behind.
Color Rules (12 Rules)
NEVER use a primary color with hue between 200 and 290 (the blue-indigo-violet band). ALWAYS choose a primary hue outside this range.
NEVER use pure #ffffff as a background. ALWAYS use a hue-tinted off-white (e.g., #f5f0eb for warm, #eef2f1 for cool).
NEVER use pure #000000 for text. ALWAYS use a warm or cool off-black (e.g., #1c1714 for warm, #141820 for cool).
NEVER use Tailwind's default color scale values directly. ALWAYS define custom color tokens.
NEVER use the same opacity for all muted text. ALWAYS have at least 3 text hierarchy levels (fg, fg-body, fg-muted, fg-faint).
NEVER leave accent colors without a soft/transparent variant. ALWAYS define accent-soft as rgba with 8-12% opacity.
NEVER use a single hue for your entire palette. ALWAYS include a complementary or split-complementary secondary color.
NEVER use gray-50 through gray-900 without hue shifting. ALWAYS tint your neutrals toward your base hue.
NEVER skip ::selection styling. ALWAYS set a custom selection background using your accent color.
NEVER use the same border color as your muted text. ALWAYS define separate border and border-strong tokens.
NEVER generate colors in RGB or hex without HSL reasoning. ALWAYS think in HSL and convert. Learn how Sailop uses HSL math to generate infinite unique palettes.
NEVER ignore WCAG contrast ratios. ALWAYS ensure 4.5:1 for body text and 3:1 for large text.
Typography Rules (11 Rules)
NEVER use Inter, system-ui, or sans-serif alone. ALWAYS specify a named font with a category fallback. See why Inter is killing your brand for 10 tested alternatives.
NEVER use a single typeface for both headings and body. ALWAYS pair a display font (often serif) with a body font (often sans-serif).
NEVER use font-weight: 700 for all headings. ALWAYS vary weights (800 for h1, 700 for h2, 600 for h3).
NEVER skip letter-spacing on headings. ALWAYS use negative tracking (-0.02em to -0.04em) on display text.
NEVER use the same line-height everywhere. ALWAYS use tighter line-height for headings (1.1-1.2) and looser for body (1.5-1.7).
NEVER omit text-wrap: balance on headings. ALWAYS include it to prevent awkward line breaks.
NEVER omit text-wrap: pretty on body text. ALWAYS include it for better paragraph formatting.
NEVER use default browser font sizes without a scale. ALWAYS define a type scale (ideally with clamp() for fluid sizing).
NEVER forget a monospace font token. ALWAYS specify a monospace font for code elements.
NEVER load fonts without preconnect. ALWAYS add for your font provider.
NEVER load more than 3 font families. ALWAYS keep the font budget to display + body + mono.
Layout Rules (10 Rules)
NEVER use grid-template-columns: repeat(3, 1fr) as your default. ALWAYS use asymmetric columns (e.g., 5fr 3fr, 3fr 5fr).
NEVER center everything. ALWAYS have at least one section with left-aligned or asymmetric layout.
NEVER use max-w-7xl (1280px) as your only max-width. ALWAYS choose a specific value (e.g., 980px, 1060px).
NEVER use the same gap value for all grids. ALWAYS vary gaps based on content relationship.
NEVER make the hero full-width centered with the same padding as other sections. ALWAYS give the hero distinct padding (e.g., 148px top).
NEVER use identical padding for all sections. ALWAYS define at least 3 different section paddings (section-a, section-b, section-c).
NEVER stack sections in the predictable hero>features>testimonials>cta>footer order without variation. ALWAYS break the template with unexpected section types or orderings.
NEVER skip mobile responsive breakpoints. ALWAYS ensure grids collapse to single column on mobile.
NEVER use identical column spans for all content. ALWAYS have at least one layout with 7:5 or 5:7 ratios.
NEVER ignore container queries when appropriate. ALWAYS consider whether content-based sizing beats viewport-based.
Animation Rules (10 Rules)
NEVER use transition: all. ALWAYS specify exact properties (transform, opacity, color, background-color).
NEVER use ease-in-out for interactive elements. ALWAYS use a custom cubic-bezier (e.g., cubic-bezier(0.22, 1, 0.36, 1)).
NEVER use the same duration for all transitions. ALWAYS use shorter durations for small elements (200ms) and longer for large ones (500-700ms).
NEVER skip prefers-reduced-motion media query. ALWAYS reduce or eliminate motion for users who request it.
NEVER use animate-pulse, animate-bounce, or animate-spin on content elements. ALWAYS reserve these for loading states only.
NEVER use duration-300 on everything. ALWAYS pick durations that match the interaction (150ms for hover, 400ms for layout shifts).
NEVER use the same easing for enter and exit animations. ALWAYS consider different curves for appearing vs. disappearing.
NEVER animate layout properties (width, height, top, left). ALWAYS prefer transform and opacity for performance.
NEVER use @keyframes for simple state transitions. ALWAYS prefer CSS transitions for hover/focus states.
NEVER forget to define animation-fill-mode. ALWAYS use forwards or both when the end state should persist.
Component Rules (10 Rules)
NEVER use rounded-lg (8px) on all elements. ALWAYS define varied radii (btn: 4px, card: 7px, container: 1px).
NEVER use shadow-md on all cards. ALWAYS define specific shadows or use border-based elevation.
NEVER make all buttons the same style. ALWAYS have primary, secondary, and ghost button variants with distinct styling.
NEVER put icons in every card. ALWAYS consider whether the icon adds information or just fills space.
NEVER use the same card structure for different content types. ALWAYS vary card layouts based on the content they contain.
NEVER make all interactive elements the same size. ALWAYS size controls based on their hierarchy and frequency of use.
NEVER use backdrop-blur on every overlay. ALWAYS consider solid backgrounds, gradients, or hard edges as alternatives.
NEVER make all list items the same height. ALWAYS let content determine item height with consistent padding.
NEVER use the same hover effect on everything. ALWAYS vary hover feedback (scale for cards, color for links, underline for nav).
NEVER put a "Get Started" CTA on every section. ALWAYS vary CTAs based on context (Learn more, See examples, Read docs, Try it free).
Structure Rules (10 Rules)
NEVER use only NEVER flatten all content to the same nesting level. ALWAYS use appropriate nesting depth for content hierarchy. NEVER skip heading hierarchy (h1 > h2 > h3). ALWAYS maintain proper heading levels without skipping. NEVER use class names that describe appearance (blue-button, big-text). ALWAYS use names that describe purpose (primary-action, page-title). NEVER put all scripts and styles inline without organization. ALWAYS separate concerns appropriately. NEVER skip alt text on images. ALWAYS provide meaningful alt text or mark decorative images with alt="". NEVER use the same meta description for all pages. ALWAYS write unique, descriptive meta for each route. NEVER forget Open Graph and Twitter card meta tags. ALWAYS include them for social sharing. NEVER skip canonical URL declarations. ALWAYS set canonical URLs to prevent duplicate content. NEVER use generic page titles. ALWAYS include descriptive, keyword-rich page titles. NEVER use only multiples of 4 for spacing. ALWAYS include at least some off-grid values (5px, 14px, 22px). NEVER use the same padding on all sections. ALWAYS define 3+ section padding variants. NEVER use the same gap in all grids. ALWAYS vary gap sizes based on content density. NEVER use p-4 (16px) as your universal small padding. ALWAYS try 14px, 18px, or other non-standard values. NEVER make hero padding the same as content section padding. ALWAYS give the hero significantly more vertical space. NEVER use margin-auto as your only centering strategy. ALWAYS combine with intentional max-width values. NEVER skip micro-spacing (2-5px). ALWAYS use small, precise values for fine adjustments. NEVER use the same vertical rhythm for all text blocks. ALWAYS vary spacing between different content types. NEVER set spacing only in one unit (px, rem, or em). ALWAYS use the appropriate unit for the context. NEVER forget negative space. ALWAYS use generous whitespace to create visual breathing room. You don't need to memorize all 73. Sailop encodes every rule into its scanner. Run The manifesto is a living document. As AI models evolve, new patterns emerge. Sailop's rules update to match. For an even more exhaustive catalog, see the definitive list of 90+ AI design patterns to avoid. For the full workflow from detection to prevention, read our complete guide to anti-AI design. The goal remains the same: intentional design, not default design. Read the full rules at sailop.com/product and start scanning at sailop.com/scan. Scan your frontend for AI patterns. Generate a unique design system. Ship code that looks intentional., , , , Spacing Rules (10 Rules)
Using the Rules
sailop scan and you'll see which rules your code violates and how to fix each one.# See all rules
sailop rules --list
# Check specific dimension
sailop scan ./src --dimension typography
# Auto-fix violations
sailop fix ./src --apply --dimension colorTry Sailop