90+ AI Design Patterns to Avoid: The Definitive List
The most comprehensive catalog of AI-generated design patterns on the web. 90+ patterns across color, typography, layout, animation, components, structure, and spacing -- each with detection criteria, examples, and human-crafted alternatives.
This is the definitive reference for AI-generated design patterns. Every pattern listed here appears with high frequency in LLM-generated frontend code. For each pattern, we explain why it signals AI origin, provide a code example of the problem, and show what a human designer would do instead.
Use this list as a checklist for your own projects. Use it during code review. Use it to train your eye. The more patterns you can recognize, the better you can avoid them -- whether you are writing code by hand or directing an AI to write it for you.
Sailop detects all of these patterns automatically. But understanding them matters, because detection without understanding just produces a score. Understanding produces better design.
Introduction
We have cataloged these patterns through analysis of over 10,000 AI-generated landing pages, component libraries, and full-stack applications generated by GPT-4, Claude, Gemini, and open-source models between 2024 and 2026. For the framework behind these dimensions, read what is AI slop: the 7 dimensions of generic design. The patterns are organized by dimension and numbered for reference.
Each entry follows this format:
- Pattern name and number
- Why it signals AI: What about this pattern reveals LLM origin
- Example: Code showing the AI-default version
- Instead: What to do differently
Let us begin.
Color Patterns
C01: The Blue Primary
The single most common AI color choice. Models default to Tailwind blue-500 (#3B82F6) or indigo-500 (#6366F1) as the primary brand color because these appear most frequently in training data.
Why it signals AI: Over 60% of AI-generated sites use a primary in the blue-600 to indigo-600 range. Real brands distribute across the full color wheel.
/* AI default */
--primary: #3B82F6;
--primary-dark: #2563EB;Instead: Choose a primary outside the blue-indigo range. Earth tones, warm neutrals, greens, and muted reds are underrepresented in AI output and immediately feel more intentional.
/* Human alternative */
--primary: #2D5A3D;
--primary-dark: #1E3F2B;C02: Blue-to-Purple Gradient
The gradient from blue-600 to purple-600 (or variations) across hero sections. This pattern was rare before 2023 and is now the dominant AI hero treatment.
Why it signals AI: This specific gradient direction and color combination appears in training data from hundreds of SaaS landing pages that were themselves AI-generated, creating a feedback loop.
/* AI default */
background: linear-gradient(to right, #2563EB, #7C3AED);Instead: Use a flat background color, a subtle texture, or a gradient between closely related hues rather than complementary ones.
/* Human alternative */
background: #FEFCF8;
/* Or a subtle warm gradient */
background: linear-gradient(165deg, #F4EDE4, #FEFCF8);C03: Gray-50 Background (#F9FAFB)
Tailwind's gray-50. The most common AI background color. It is the "safe neutral" that every model reaches for.
Why it signals AI: The exact hex value #F9FAFB appears so frequently in AI output that it has become a signature.
Instead: Use a warm off-white like #FEFCF8 or #F5F0EB, or a tinted neutral that relates to your primary color.
C04: Insufficient Palette Depth
AI generates 3-4 colors: primary, background, text, maybe an accent. Human designers work with 8-12 colors including tints, shades, semantic colors, and contextual variations.
Why it signals AI: A shallow palette creates a flat, monotonous visual experience that reads as "unconfigured."
Instead: Generate a full palette with at least primary, secondary, accent, background, surface, text, muted, success, warning, and error colors. Use sailop palette to generate a complete set.
C05: Pure White Cards on Gray Background
White (#FFFFFF) cards sitting on a gray-50 (#F9FAFB) background. The contrast is so low it looks unintentional, yet this is the universal AI default for card sections.
Why it signals AI: The combination of #FFFFFF on #F9FAFB creates a 1.01:1 contrast ratio between card and background -- barely perceptible and visually flat.
Instead: Use a tinted surface color for cards (e.g., #F4EDE4) on a slightly different background, or remove the card container entirely and use spacing and typography for separation.
C06: Oversaturated Accent Colors
AI accent colors are typically fully saturated: yellow-400, green-500, red-500. These clash with the muted palette elsewhere and look like afterthoughts.
Instead: Desaturate accents. Use OKLCH to maintain perceptual lightness while reducing chroma. A muted terracotta (#C4553A) signals more craft than a pure red (#EF4444).
C07: Linear Gradient Buttons
Buttons with linear-gradient backgrounds that shift from one saturated color to another.
Instead: Use flat-colored buttons with subtle hover state changes. Gradients on small interactive elements feel decorative rather than functional.
C08: Colored Badge Pills
Small rounded-full pills with a light tinted background and darker text of the same hue: bg-blue-100 text-blue-800. Every AI hero has one.
Instead: Use plain text with tracking-widest and uppercase, or a simple border-bottom treatment.
C09: Star Rating Yellow (#FACC15)
AI always uses yellow-400 for star ratings. Every testimonial section, every review component.
Instead: If ratings are necessary, use your brand color or a neutral tone. Better yet, remove star ratings from testimonials entirely -- they add noise without credibility.
C10: Identical Dark Mode Inversion
Dark mode that simply inverts light values to dark values without any consideration for how colors behave differently on dark backgrounds.
Instead: Design dark mode as a separate palette. Dark backgrounds need lighter, slightly desaturated colors. Reduce chroma and increase lightness for text on dark surfaces.
C11: Status Colors from Tailwind Defaults
Using green-500 for success, red-500 for error, yellow-500 for warning without customization.
Instead: Adjust status colors to harmonize with your palette. A muted forest green for success and a muted rust for error maintain semantics while feeling intentional.
C12: Background Gradients with Fixed Blobs
Decorative gradient blobs positioned with absolute positioning as background elements. Purple and blue blurred circles in the hero background.
Instead: If you need visual texture, use subtle grain overlays, geometric patterns, or photographic backgrounds. Blurred color blobs are an AI signature.
C13: Ring Offset Focus States
focus:ring-2 ring-offset-2 ring-blue-500 on every interactive element. This is Tailwind's default focus pattern and AI applies it universally.
Instead: Design custom focus states that use your brand color and complement your design system. Consider outline-offset, box-shadow, or background-color changes.
C14: Hover Color Shifts to Darker Variant
Every hover state just shifts to the -700 variant of the current color: hover:bg-blue-700 on a bg-blue-600 button.
Instead: Use varied hover treatments: subtle background shifts, underline reveals, icon movements, or opacity changes. Not every hover needs a color darkening.
C15: Decorative Dividers as Gradient Lines
between sections.
Instead: Use a simple
Typography Patterns
T01: Inter as the Only Font
Inter is the default AI font. It appears in over 70% of AI-generated projects because it is the most common font in training data.
Instead: Choose a body font that is not in the top 10 most popular Google Fonts. Consider IBM Plex Sans, Source Serif 4, Instrument Serif, or DM Sans. See why Inter is killing your brand for 10 tested pairings.
T02: System-UI Font Stack Only
font-family: system-ui, -apple-system, sans-serif; with no custom font loaded. This is the "I did not choose a font" font.
Instead: Load at least a body font and a display font. The pairing of two intentional typefaces signals design thought.
T03: Uniform Type Scale (1rem Increments)
h1: 3rem, h2: 2.25rem, h3: 1.5rem, body: 1rem. This mathematically uniform scale is the AI default.
Instead: Use a modular scale with a custom ratio. A 1.25 or 1.35 ratio produces more interesting size relationships. Or hand-pick sizes that create visual tension.
T04: No Letter-Spacing Adjustments
AI never adjusts letter-spacing by size. Display headings need tighter tracking (-0.02em to -0.04em) and small text needs looser tracking (0.02em to 0.05em).
Instead: Add letter-spacing: -0.03em to headings above 2rem and letter-spacing: 0.01em to text below 0.875rem.
T05: Bold for All Headings
Every heading is font-bold (700 weight). No variation between heading levels.
Instead: Use font-weight variation: h1 at 400 italic, h2 at 600, h3 at 500. Weight variation creates rhythm.
T06: text-gray-600 for All Body Text
AI uses text-gray-600 (#4B5563) for virtually all non-heading text. It is the universal "secondary text" color.
Instead: Use a custom muted color from your palette. Warm grays (#6B6560) feel more human than blue-tinted Tailwind grays.
T07: No Display Font
AI projects use a single font family for everything. Human designers pair a display face (for headings) with a body face (for text).
Instead: Add a display font for h1 and h2 elements. Serif + sans-serif pairings are classic. Instrument Serif + IBM Plex Sans is one example.
T08: Leading-7 or Leading-Relaxed Everywhere
AI sets one line-height globally. Real typography adjusts line-height per context: tighter for headings, looser for body, even looser for small text in dense UI.
Instead: Display text: 1.1. Body text: 1.6. Small text: 1.5. Caption text: 1.4. Adjust per context.
T09: No Prose Styling
Long-form content without max-width, hanging punctuation, or paragraph spacing optimized for readability.
Instead: Limit prose width to 65ch. Add text-rendering: optimizeLegibility. Use paragraph spacing of 1.5em.
T10: Centered Text in Every Section
Every section centers its text content with text-center. Human designs use left-alignment as the default and center only intentionally.
Instead: Left-align by default. Center only hero headings and CTAs. Mixed alignment creates visual interest.
T11: No Font Feature Settings
AI never enables OpenType features: ligatures, old-style figures, contextual alternates. These are craft signals.
Instead: Add font-feature-settings: "kern", "liga", "calt" to body text and "ss01" or "ss02" stylistic sets if your font supports them.
T12: All-Caps Without Tracking
Uppercase text without increased letter-spacing looks cramped and unpolished.
Instead: Always pair uppercase with tracking-widest or at least tracking-wider. The extra spacing is what makes uppercase text readable.
Layout Patterns
L01: Three-Column Equal Grid
grid-cols-3 gap-6 with identical children. The most recognized AI layout pattern.
Instead: Use asymmetric grids (2/3 + 1/3), definition lists, or varied-width columns. If you must use three columns, vary the content height or visual treatment. We dedicated an entire article to this pattern: the card grid problem.
L02: max-w-7xl mx-auto on Every Section
Every section wraps content in the same max-width centered container. No full-bleed sections, no narrow content sections, no varied widths.
Instead: Vary your max-width between sections. Use max-w-3xl for text-heavy sections, max-w-6xl for feature sections, and full-bleed for hero sections.
L03: Symmetric py-24 px-6 Padding
Identical vertical and horizontal padding on every section. No rhythm, no breathing, no intentional density variation.
Instead: Vary section padding. Use pt-32 pb-20 on one section and pt-16 pb-24 on the next. Create vertical rhythm through asymmetric spacing.
L04: Hero / Features / Testimonials / Pricing / CTA / Footer
The AI section order. Every AI landing page follows this exact sequence.
Instead: Reorder sections based on your content strategy. Lead with a case study. Put pricing before features. Break the expected flow.
L05: All Content Centered Horizontally
Every element is centered: mx-auto text-center. No left-aligned content, no right-aligned elements, no asymmetric positioning.
Instead: Left-align body content. Use ml-[8%] or ml-[12%] for intentional off-center positioning.
L06: Equal-Height Cards via Grid Stretch
Using CSS Grid's default stretch alignment to force all cards to the same height, even when content varies significantly.
Instead: Use align-items: start to let cards size to their content. Varying heights creates organic, human layouts.
L07: Full-Width Section with Centered Content Column
Every section is full-width with a single centered column. No sidebar layouts, no split sections, no multi-column text.
Instead: Use split layouts (50/50 or 60/40), sidebar-and-content arrangements, or multi-column text for variety.
L08: Sticky Nav with Blur Backdrop
sticky top-0 backdrop-blur-md bg-white/80. Every AI navigation bar uses this exact pattern.
Instead: Use a solid background navigation, or hide the navigation on scroll and reveal on scroll-up, or use a minimal text-only header.
L09: No Full-Bleed Content
AI never breaks content out of its container. No images that span edge-to-edge, no background changes that escape the content column.
Instead: Let key elements break out of the content container. A full-bleed image or a background color that spans the viewport creates visual punctuation.
L10: Footer with 4-Column Grid
The standard AI footer: logo column, three link columns, copyright bar at the bottom.
Instead: Use a simple single-column footer, a two-row footer, or a minimal footer with just copyright and essential links.
L11: Mobile-First Grid Collapse to Stack
Every grid collapses to a single column on mobile via grid-cols-1 md:grid-cols-3. No intermediate layouts, no creative small-screen arrangements.
Instead: Consider 2-column layouts on tablet, horizontal scrolling sections on mobile, or accordion patterns for mobile features.
L12: No Off-Grid Elements
Every element sits perfectly in the grid. No overlapping elements, no negative margins, no elements that break the grid.
Instead: Use occasional negative margins, overlapping elements, or absolute-positioned accents to break grid rigidity.
L13: Z-Pattern Layout Applied Uniformly
Hero image right, text left. Next section: image left, text right. Alternating Z-pattern for every section.
Instead: Break the alternating pattern. Use two consecutive left-aligned sections. Use a full-width section between alternating ones.
L14: No Whitespace as Design Element
AI fills every section with content. There is no intentional empty space used as a design element.
Instead: Use generous whitespace between sections. Let a heading stand alone with 200px of space below it. Whitespace signals confidence.
L15: Fixed Aspect Ratio Image Containers
All images forced into 16:9 or 4:3 containers regardless of content. No varied aspect ratios.
Instead: Let images use their natural aspect ratio, or choose aspect ratios that complement the content.
Animation Patterns
A01: Fade-Up on Scroll
opacity: 0, y: 20 transitioning to opacity: 1, y: 0 triggered by scroll intersection. Every section, every element.
Instead: Use no animation for most content. Reserve animation for a single hero element or a key interaction. Stillness is a craft signal.
A02: Hover Scale 1.05 + Shadow
Cards that scale to 1.05 and add a shadow on hover. The universal AI hover effect.
/* AI default */
.card:hover { transform: scale(1.05); box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); }Instead: Use subtle background color changes, border-color transitions, or no hover effect at all. Movement on hover should be purposeful.
A03: Stagger Delay 0.1s
When multiple elements animate, they stagger at exactly 0.1 second intervals. Every time.
Instead: Use irregular stagger timing (0.05s, 0.12s, 0.08s) or animate groups rather than individual elements.
A04: Spring Physics Defaults
Framer Motion spring with default stiffness (100) and damping (10). Every animated element uses the same physics.
Instead: Vary spring parameters by element type. Use stiffer springs for small elements and softer springs for large ones, or use CSS transitions with custom cubic-bezier curves.
A05: Duration 300ms on Everything
transition-duration: 300ms on every transitioning element. It is Tailwind's duration-300 and AI applies it universally.
Instead: Use shorter durations (150ms) for small UI elements and longer durations (500ms) for large layout transitions. Vary by context.
A06: Ease-in-out on Everything
transition-timing-function: ease-in-out everywhere. No custom easing curves.
Instead: Use cubic-bezier(0.22, 1, 0.36, 1) for entrances and cubic-bezier(0.55, 0, 1, 0.45) for exits. Custom easing is an immediate craft signal.
A07: Infinite Pulse on Badges
animate-pulse or animate-bounce on notification badges or status indicators. Distracting and unnecessary.
Instead: Use a static indicator or a single subtle flash on state change.
A08: Parallax Scroll on Hero Image
Hero background image scrolling at a different rate than content. Overused and often causes performance issues.
Instead: Use a static hero image or a subtle CSS-only effect like a slight scale on scroll.
A09: Loading Skeleton Shimmer
The gray-to-light-gray shimmer animation on loading skeletons. Every AI loading state uses the same shimmer.
Instead: Use a simple opacity pulse or a solid gray placeholder. The shimmer pattern has become associated with template code.
A10: Counting Number Animation
Numbers that count up from 0 to their final value when scrolled into view. Every stats section does this.
Instead: Display numbers statically. The counting animation adds no information and delays comprehension.
A11: Typewriter Effect on Hero Heading
Hero text that types out character by character. This was novel in 2023 and is now an immediate AI signal.
Instead: Display text immediately. If you want entrance animation, use a single fade or clip-path reveal.
A12: Continuous Float or Bob on Icons
Decorative icons that float up and down in an infinite loop. Distracting and purposeless.
Instead: Keep decorative elements static. Animation should respond to user interaction, not run continuously.
Component Patterns
CP01: Icon + Heading + Paragraph Card
The standard AI feature card structure. An icon in a colored circle, a heading below, a paragraph below that.
Instead: Use a numbered list, a definition list, a table, or a flowing paragraph with inline emphasis.
CP02: Hero with Badge + H1 + Subtitle + Two Buttons
The exact AI hero structure: a small badge pill, a large heading, a subtitle paragraph, and two buttons (primary + ghost).
Instead: Simplify. Use just a heading and one button. Or use a heading with an inline link. Remove the badge. Break the template.
CP03: Testimonial Cards with Circle Avatars
Three cards, each with a circular avatar image, a name, a title, and a quoted paragraph.
Instead: Use a single large blockquote. Remove avatars. Use text-only attribution. Feature one testimonial prominently rather than three equally.
CP04: Pricing Cards with Popular Badge
Three pricing tiers. The middle one is "popular" with a colored badge and a different border or background.
Instead: Use a comparison table. Or highlight the recommended plan with a different layout entirely (larger, different position) rather than just a badge.
CP05: FAQ Accordion with Chevron Icons
Questions that expand to reveal answers with a rotating chevron icon. Every FAQ section uses this exact pattern.
Instead: Display all answers by default (if there are fewer than 8). Or use a simple toggle without the chevron. Or present FAQs as a flowing document.
CP06: Newsletter Input with Inline Button
An email input with a button attached to its right side inside a rounded container.
Instead: Stack the input and button vertically. Or use just a text link "Get updates" that opens a modal. The inline input-button combo is an AI signature.
CP07: Stats Section with Large Numbers
A row of 3-4 large numbers with labels below: "10K+ Users", "99.9% Uptime", "150+ Countries".
Instead: Integrate stats into prose. "Used by over 10,000 teams across 150 countries" communicates the same information without the template pattern.
CP08: Logo Cloud with Grayscale Filter
A row of partner/client logos with grayscale filter and opacity reduction. Hover reveals color.
Instead: Display logos at full color and small size in a simple row. Or mention clients by name in a text paragraph. The grayscale treatment is an AI default.
CP09: CTA Section with Gradient Background
A call-to-action section with a gradient background (blue to purple), centered white text, and a white button.
Instead: Use your brand background color. Left-align the text. Use a simple underlined link instead of a button. Break every expectation.
CP10: Feature with Screenshot and Description
Alternating sections of screenshot-left/text-right and screenshot-right/text-left.
Instead: Use a single column with the screenshot above the text. Or use an annotated screenshot with callout numbers. Or skip the screenshot and use a code example.
CP11: Team Grid with Hover Social Links
Team member photos in a grid with social media links that appear on hover.
Instead: Use a simple list with names, titles, and one-line bios. Social links can be inline text. The hover-reveal pattern is overused.
CP12: Timeline with Alternating Sides
A vertical timeline where events alternate left and right of a central line.
Instead: Use a simple vertical list with dates. Or a horizontal scrolling timeline. The alternating-sides pattern is an AI default from training data.
CP13: Tabs with Underline Indicator
Tab navigation where the active tab has an underline that slides between tabs.
Instead: Use filled tab backgrounds, vertical tab lists, or segmented controls. The sliding underline is ubiquitous in AI output.
CP14: Modal with Backdrop Blur
Modals with a blurred, darkened backdrop overlay.
Instead: Use a simple dark overlay without blur, or slide-in panels from the side, or inline expansion rather than modals.
CP15: Toast Notifications with Icons
Success/error toasts with a colored icon, title, description, and close button.
Instead: Simplify toasts to a single line of text with a dismiss action. Remove the icon. Reduce the visual complexity.
Structural Patterns
S01: Components Directory with Index Files
/components/ui/Button/index.tsx pattern with every component in its own directory.
Instead: This is a valid pattern, but AI over-applies it. Small components can be colocated in a single file. Not everything needs a directory.
S02: Utility Class Soup
Elements with 15+ Tailwind classes in a single className. No extraction, no composition.
Instead: Extract repeated patterns into CSS custom properties or component-level styles. Keep className strings under 8-10 classes.
S03: div Soup Without Semantic HTML
Everything is a Instead: Use semantic HTML. AI adds Instead: Mark decorative elements with Passing the same styling props to every sibling component in a list. Same size, same variant, same color. Instead: Vary component props based on content. The first item could be "large", secondary items "small". Not everything needs to be uniform. Pages composed of flat component trees: Header, Hero, Features, Testimonials, Pricing, CTA, Footer. No nesting, no composition. Instead: Create intermediate composition components that combine multiple sections with shared context or styling. Components with 10+ visual props (size, variant, color, rounded, shadow, etc.) creating a configuration explosion. Instead: Limit component variants. A button needs size and variant. Most other visual properties should come from the design system, not props. Instead: Write out static content explicitly when there are fewer than 5 items. Mapping is for dynamic data, not three features. Every file uses Instead: Prefer named exports. They are easier to refactor, search, and tree-shake. Using a Instead: Only use cn() when you have conditional or merged classes. Static classNames should be plain strings. Every spacing value is a multiple of 4: 4, 8, 12, 16, 20, 24, 32, 48, 64. No odd values, no non-standard increments. Instead: Use a base grid of 5px or 6px. Or use a modular scale (1.35 ratio) that produces irregular but harmonious values. The 4px grid is the AI default because it is the Tailwind default. Instead: Vary gap values by context. Use gap-3 for tight UI, gap-8 for loose content, gap-16 for section spacing within a grid. Padding of 24px on every card, every container, every boxed element. Instead: Vary padding by content type. Text-heavy cards might use p-8 or p-10. Icon cards might use p-4. Asymmetric padding (pt-8 pb-6 px-7) adds character. A margin-top of 16px between every consecutive element inside a component. Heading, mt-4, paragraph, mt-4, button. Instead: Vary vertical spacing by element relationship. More space after headings (mt-6), less between related paragraphs (mt-2), most before CTAs (mt-10). Vertical padding of 96px on every full-width section. No variation between sections. Instead: Vary section padding. Use pt-32 pb-20 on the hero, py-16 on a dense info section, py-40 on a spacious CTA section. AI never uses negative margins, negative padding via calc(), or overlapping elements. Every element is contained within its parent. Instead: Occasional negative margin (-mt-8 to overlap a header with its following section, for instance) creates visual connection. Instead: Vary horizontal padding. Use px-4 on mobile, px-8 on tablet, px-0 on full-bleed desktop sections. AI never adjusts spacing for optical alignment. A heading with descenders (g, y, p) needs different bottom margin than one without. AI treats all text boxes identically. Instead: Make micro-adjustments. If a heading ends in a round letter (O, C), reduce bottom margin by 1-2px. This is invisible consciously but registers as "polished" subconsciously. These are positive patterns that signal human craftsmanship. Their presence lowers your AI score and increases perceived quality. Sailop checks for these and rewards projects that include them. Style the AI never does this. It takes 3 lines of CSS and immediately signals intentional design. Override browser default focus rings with your own design: Wrap animations in a motion preference query: Style the scrollbar to match your design system: Add basic print styles that hide navigation, adjust colors, and optimize layout: Not just inverted colors -- a separately designed dark palette with reduced chroma and adjusted contrast: This moves quotation marks and other punctuation outside the text block for optical alignment. Extremely rare in AI output. Tabular (fixed-width) numbers align properly in columns. AI uses proportional figures everywhere. Prevents awkward single-word last lines in headings. A small detail that makes a large visual difference. Using the native View Transitions API for page transitions signals awareness of modern platform APIs. Using container queries instead of only media queries shows component-level design thinking. Custom underline properties (offset, thickness, color) signal typographic attention that AI never demonstrates. This list is a living reference. As AI models evolve, new patterns emerge and old ones fade. But the core principle remains: AI converges on defaults, and defaults are detectable. To use this list effectively: Every pattern you fix moves your site further from the AI default and closer to looking like it was designed by someone who cares. For step-by-step guidance on applying these fixes, see our complete guide to anti-AI design or the practical Grade F to Grade A case study. And in a web increasingly filled with generated content, that distinction matters more every month. Bookmark this page. Come back to it during code reviews. Share it with your team. The patterns are not going away -- but your awareness of them is the first step to building something that stands out. Start scanning your projects today at sailop.com. Scan your frontend for AI patterns. Generate a unique design system. Ship code that looks intentional., , , , or other semantic elements. for page sections, for testimonials, S04: aria-label on Decorative Elements
aria-label to decorative elements like icons and dividers that should be aria-hidden="true" instead.aria-hidden="true". Reserve aria-label for interactive elements without visible text.S05: Identical Props on Sibling Components
S06: Single-Level Component Hierarchy
S07: Props for Every Visual Variation
S08: Mapped Arrays for Static Content
{items.map(item => where items is a static array defined in the same file. If the content is static and small (3-5 items), it reads better as explicit JSX.S09: Default Export on Every File
export default. AI defaults to this pattern because it appears most frequently in training data.S10: cn() Utility for Every className
cn() utility (clsx + twMerge) on components that have no conditional classes. The utility is imported and called even when the className is static.Spacing Patterns
SP01: 4px Base Grid with No Deviation
SP02: gap-6 on Every Grid
gap-6 (24px) is the universal AI gap value. Every grid, every flex container.SP03: p-6 on Every Card
SP04: mt-4 Between Every Element
SP05: py-24 on Every Section
SP06: No Negative Space Usage
SP07: Identical Horizontal Padding
px-6 on every section, every container, at every breakpoint.SP08: No Optical Spacing Adjustments
Craft Signals -- What TO Do
CS01: Custom Selection Colors
::selection pseudo-element with your brand colors.::selection {
background-color: #2D5A3D;
color: #FEFCF8;
}CS02: Custom Focus-Visible Styles
:focus-visible {
outline: 2px solid #2D5A3D;
outline-offset: 3px;
border-radius: 2px;
}CS03: Prefers-Reduced-Motion Support
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}CS04: Custom Scrollbar Styling
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #F4EDE4; }
::-webkit-scrollbar-thumb { background: #6B6560; border-radius: 2px; }CS05: Print Styles
@media print {
nav, footer, .no-print { display: none; }
body { color: #000; background: #fff; }
a { text-decoration: underline; }
a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}CS06: Proper Dark Mode Palette
@media (prefers-color-scheme: dark) {
:root {
--background: #1A1917;
--surface: #252420;
--text: #E8E0D6;
--muted: #8B8580;
--primary: #5B9E74; /* Lighter, less saturated than light mode */
--accent: #D4745A; /* Lighter, less saturated */
}
}CS07: Smooth Scroll with Preference Check
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}CS08: Hanging Punctuation
blockquote, .prose { hanging-punctuation: first last; }CS09: Custom List Markers
ul { list-style: none; }
ul li::before {
content: "\2013"; /* en-dash */
color: #C4553A;
font-weight: 600;
margin-right: 0.75em;
}CS10: Tabular Figures in Data
.data-table, .price, .stat {
font-variant-numeric: tabular-nums;
}CS11: Subpixel Antialiasing Control
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}CS12: Balanced Text Wrapping
h1, h2, h3 {
text-wrap: balance;
}CS13: View Transitions API
@view-transition {
navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.3s;
}CS14: Container Queries
.card-container { container-type: inline-size; }
@container (min-width: 400px) {
.card { flex-direction: row; }
}CS15: Custom Underline Styling
a {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1.5px;
text-decoration-color: #C4553A;
}Using This List
sailop scan ./src to get your current score and see which patterns are present# Quick start
npm install -g sailop
sailop scan ./src
# See which specific patterns from this list are detected
sailop scan --verbose --rules ./src
# Auto-fix the highest-impact patterns
sailop transform --priority high ./srcTry Sailop