Files
pbakaus_impeccable/tests/oracle/golden/detect-no-advisory-text.json
T
cb56ed6c19 Fix: detect placeholder contrast (#790) (#799)
* Fix: detect placeholder contrast (#790)

`detect` never read `::placeholder` color, so pale placeholders passed. Score them with the same WCAG math as body text, without host class/clip heuristics.

Prepared with AI assistance.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Fix: match descendant ::placeholder hosts (#790)

`.form ::placeholder` kept the ancestor as the host. Reuse the hover combinator star-fill so the color lands on the inputs inside.

Prepared with AI assistance.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Fix: placeholder-shown and gradient alpha (#790)

Browser scans skip when :placeholder-shown is false, so a live filled field does not keep the HTML value attribute's empty state. Translucent placeholders flatten over each gradient stop before scoring.

Prepared with AI assistance.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Fix: trailing combinator only for ::placeholder hosts (#790)

`star_empty_compounds` turned `.label + ::placeholder` into `.label *+*`. Fill only a trailing empty compound so adjacent-sibling hosts still match.

Prepared with AI assistance.

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-10 13:49:59 -07:00

8 lines
118 KiB
JSON
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{
"stdout": "",
"stderr": "\n<REPO>/tests/fixtures/antipatterns/astro-inset-shadow-stripe.astro\n line 52: [side-tab] [data-case=\"Kinpaku Edge\"] — inset box-shadow 3px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 53: [side-tab] [data-case=\"Patina Edge\"] — inset box-shadow 3px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 54: [side-tab] [data-case=\"Accent Edge\"] — inset box-shadow 4px stripe (right)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 55: [side-tab] [data-case=\"Signal Blue Edge\"] — inset box-shadow 5px stripe (top)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 66: [side-tab] [data-case=\"Chromatic Hex Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 67: [side-tab] [data-case=\"Named Red Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 68: [side-tab] [data-case=\"Chromatic Rgb Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 69: [side-tab] [data-case=\"Chromatic Oklch Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 78: [side-tab] [data-case=\"Trailing Inset Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 79: [side-tab] [data-case=\"Trailing Inset Token Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 81: [side-tab] [data-case=\"Inset Named Token Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 86: [side-tab] [data-case=\"Two Length Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 87: [side-tab] [data-case=\"Two Length Trailing Inset Edge\"] — inset box-shadow 5px stripe (top)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 88: [side-tab] [data-case=\"Important Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 89: [side-tab] [data-case=\"Cascade Override Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 91: [side-tab] [data-case=\"Color First Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 92: [side-tab] [data-case=\"Color First Var Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/blinking-cursor.html\n [pulsing-dot] .pass-round-dot — 8x8px dot with infinite \"blink-anim\" animation\n → Small pulsing status dots simulate liveness decoratively. Reserve pulse animation for indicators tied to genuinely live, changing data; a static indicator with clear labeling is honest and calmer.\n\n<REPO>/tests/fixtures/antipatterns/border-baseline.html\n [side-tab] border-left: 4px + border-radius: 10px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-right: 5px + border-radius: 10px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [border-accent-on-rounded] border-top: 4px + border-radius: 10px\n → Thick accent border on a rounded card — the border clashes with the rounded corners. Remove the border or the border-radius.\n [border-accent-on-rounded] border-bottom: 3px + border-radius: 10px\n → Thick accent border on a rounded card — the border clashes with the rounded corners. Remove the border or the border-radius.\n [side-tab] border-left: 4px + border-radius: 10px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-top: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-bottom: 3px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/buried-raster.html\n [buried-raster] raster background at opacity 0.04 \"Grain\"\n → A background image under a near-opaque gradient wash, or a raster on an element at near-zero opacity, never reaches the screen: the page shows the wash, and the produced texture or photo ships as a compliance token. Let the material show (a tint under 0.9 alpha, a blend mode, an opacity you can see) or remove the file.\n [buried-raster] <img> at opacity 0.05 \"Ghost img\"\n → A background image under a near-opaque gradient wash, or a raster on an element at near-zero opacity, never reaches the screen: the page shows the wash, and the produced texture or photo ships as a compliance token. Let the material show (a tint under 0.9 alpha, a blend mode, an opacity you can see) or remove the file.\n [buried-raster] raster under a near-opaque gradient wash: linear-gradient(rgba(240,237,226,0.96), rgba(240,237,226,0.96)), url(assets/manual-paper.p\n → A background image under a near-opaque gradient wash, or a raster on an element at near-zero opacity, never reaches the screen: the page shows the wash, and the produced texture or photo ships as a compliance token. Let the material show (a tint under 0.9 alpha, a blend mode, an opacity you can see) or remove the file.\n [buried-raster] raster under a near-opaque gradient wash: linear-gradient(0deg, rgba(255,255,255,.95), rgba(255,255,255,.95)), url(\"assets/bone-pape\n → A background image under a near-opaque gradient wash, or a raster on an element at near-zero opacity, never reaches the screen: the page shows the wash, and the produced texture or photo ships as a compliance token. Let the material show (a tint under 0.9 alpha, a blend mode, an opacity you can see) or remove the file.\n\n<REPO>/tests/fixtures/antipatterns/clipped-overflow-container.html\n [cramped-padding] <div> \"pass-split-container\": children flush against border on all sides (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 1216px) of padding inside bordered, outlined, or colored containers.\n [clipped-overflow-container] div.box.flag-overflow-hidden clips a positioned child\n → A clipping container (overflow hidden or clip) wrapping an absolutely-positioned child cuts off tooltips, menus, and popovers that need to escape. Let the overflow be visible, or move the positioned layer out of the clip.\n [clipped-overflow-container] div.box.flag-overflow-clip clips a positioned child\n → A clipping container (overflow hidden or clip) wrapping an absolutely-positioned child cuts off tooltips, menus, and popovers that need to escape. Let the overflow be visible, or move the positioned layer out of the clip.\n [clipped-overflow-container] div.box.flag-overflow-negative clips a positioned child\n → A clipping container (overflow hidden or clip) wrapping an absolutely-positioned child cuts off tooltips, menus, and popovers that need to escape. Let the overflow be visible, or move the positioned layer out of the clip.\n [clipped-overflow-container] div.box.flag-overflow-right clips a positioned child\n → A clipping container (overflow hidden or clip) wrapping an absolutely-positioned child cuts off tooltips, menus, and popovers that need to escape. Let the overflow be visible, or move the positioned layer out of the clip.\n [clipped-overflow-container] div.box.flag-shadow-utility clips a positioned child\n → A clipping container (overflow hidden or clip) wrapping an absolutely-positioned child cuts off tooltips, menus, and popovers that need to escape. Let the overflow be visible, or move the positioned layer out of the clip.\n [clipped-overflow-container] div.box.flag-overlay-surface clips a positioned child\n → A clipping container (overflow hidden or clip) wrapping an absolutely-positioned child cuts off tooltips, menus, and popovers that need to escape. Let the overflow be visible, or move the positioned layer out of the clip.\n\n<REPO>/tests/fixtures/antipatterns/color.html\n [gray-on-color] text #969696 on bg #3b82f6\n → Gray text looks washed out on colored backgrounds. Use a darker shade of the background color instead, or white/near-white for contrast.\n [low-contrast] 1.2:1 (need 4.5:1) — text #969696 on #3b82f6\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [gray-on-color] text #b4b4b4 on bg #10b981\n → Gray text looks washed out on colored backgrounds. Use a darker shade of the background color instead, or white/near-white for contrast.\n [low-contrast] 1.2:1 (need 4.5:1) — text #b4b4b4 on #10b981\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.7:1 (need 4.5:1) — text #c8c8c8 on #ffffff\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 2.1:1 (need 4.5:1) — text #505050 on #1e1e1e\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [gray-on-color] text #808080 on bg gradient(#3b82f6, #8b5cf6)\n → Gray text looks washed out on colored backgrounds. Use a darker shade of the background color instead, or white/near-white for contrast.\n [low-contrast] 1.1:1 (need 3:1) — text #808080 on #8b5cf6\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [gray-on-color] text #666666 on bg gradient(#3b82f6, #8b5cf6)\n → Gray text looks washed out on colored backgrounds. Use a darker shade of the background color instead, or white/near-white for contrast.\n [low-contrast] 1.4:1 (need 4.5:1) — text #666666 on #8b5cf6\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n [low-contrast] 2.2:1 (need 4.5:1) — text #5b4f44 on #1f1a15\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 2.1:1 (need 4.5:1) — text #6c7280 on #374151\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [gray-on-color] text #5c5449 on bg #b6322d\n → Gray text looks washed out on colored backgrounds. Use a darker shade of the background color instead, or white/near-white for contrast.\n [low-contrast] 1.2:1 (need 4.5:1) — text #5c5449 on #b6322d\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [gray-on-color] text-gray-400 on bg-blue-500\n → Gray text looks washed out on colored backgrounds. Use a darker shade of the background color instead, or white/near-white for contrast.\n [gray-on-color] text #9ca3af on bg #3b82f6\n → Gray text looks washed out on colored backgrounds. Use a darker shade of the background color instead, or white/near-white for contrast.\n [low-contrast] 1.4:1 (need 4.5:1) — text #9ca3af on #3b82f6\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [ai-color-palette] Purple/violet text (#a855f7) on heading\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n [ai-color-palette] text-purple-500 on heading\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n [ai-color-palette] Purple/violet gradient (Tailwind)\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n [low-contrast] 4.0:1 (need 4.5:1) — text #ffffff on #a855f7\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.1:1 (need 4.5:1) — text #3d2418 on #17372d\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.3:1 (need 4.5:1) — text #cfc9bd on #e8e2d6\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 4.1:1 (need 4.5:1) — text #ffffff on #7d7d7d\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n [undersized-ui-text] 8px functional text \"tick\" (below 11px floor)\n → Interactive and content-bearing UI text (links, buttons, nav items, labels, table cells, meta rows, timecodes) below 11px is a legibility failure, not a style choice. WCAG sets no absolute pixel floor, but functional text under 11px is a defensible quality bar: it fails on high-DPI and small viewports and it degrades tap and read targets. The 11px floor holds even inside a footer; only non-interactive legal smallprint gets the softer 10px floor. Being ON the DESIGN.md size ramp does not exempt a value here: adding 8px to the ramp launders the token but not the legibility problem, and that is exactly the escape hatch this rule closes. Exempts sup/sub, visually-hidden (sr-only) text, and code/terminal contexts. Decorative letterspaced micro-labels are still functional and stay in scope.\n [skipped-heading] <h1> \"Welcome to Our Platform\" followed by <h3> \"Gradient text\" (missing h2)\n → Heading levels should not skip (e.g. h1 then h3 with no h2). Screen readers use heading hierarchy for navigation. Skipping levels breaks the document outline.\n [skipped-heading] <h1> \"Purple heading text\" followed by <h3> \"Styled <a> and <button> with low contrast\" (missing h2)\n → Heading levels should not skip (e.g. h1 then h3 with no h2). Screen readers use heading hierarchy for navigation. Skipping levels breaks the document outline.\n [skipped-heading] <h1> \"Gradient Clipped Heading Text\" followed by <h3> \"Faint accent-glow gradient (issue #409 Case B — must not fla\" (missing h2)\n → Heading levels should not skip (e.g. h1 then h3 with no h2). Screen readers use heading hierarchy for navigation. Skipping levels breaks the document outline.\n [ai-color-palette] Purple/violet accent colors detected\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n\n<REPO>/tests/fixtures/antipatterns/cramped-padding.html\n [low-contrast] 3.7:1 (need 4.5:1) — text #ffffff on #3b82f6\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n\n<REPO>/tests/fixtures/antipatterns/cream-palette-tailwind.html\n [cream-palette] cream/beige page background (Tailwind bg-amber-50)\n → A warm cream or beige page background has become the default \"tasteful\" AI surface, reached for by reflex. Choose a background that comes from a deliberate palette, not the safe warm off-white.\n\n<REPO>/tests/fixtures/antipatterns/cream-palette.html\n [cream-palette] cream/beige page background rgb(245, 239, 226)\n → A warm cream or beige page background has become the default \"tasteful\" AI surface, reached for by reflex. Choose a background that comes from a deliberate palette, not the safe warm off-white.\n\n<REPO>/tests/fixtures/antipatterns/css-in-prose-should-flag.html\n [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n [gradient-text] bg-clip-text + bg-gradient (Tailwind)\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n [ai-color-palette] Purple/violet gradient (Tailwind)\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n [ai-color-palette] Purple/violet accent colors detected\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n [gradient-text] bg-clip-text + bg-gradient (Tailwind)\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n\n<REPO>/tests/fixtures/antipatterns/cssinjs-should-flag.tsx\n line 8: [side-tab] border-left: 4px solid #3b82f6\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 36: [side-tab] border-right: 5px solid #8b5cf6\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 42: [side-tab] borderLeft: '4px solid\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 11: [overused-font] font-family: 'Inter\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n line 30: [bounce-easing] animation: bounce\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n line 31: [layout-transition] transition: width\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n line 22: [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n\n<REPO>/tests/fixtures/antipatterns/dark-gradient-ground.html\n [low-contrast] 1.0:1 (need 4.5:1) — text #d7d7d7 on #dcdbd8\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.5:1 (need 4.5:1) — text #2e2e2e on #010101\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.7:1 (need 4.5:1) — text #333333 on #010101\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [overused-font] Primary font: arial\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n\n<REPO>/tests/fixtures/antipatterns/dark-theme-modern-color.html\n [low-contrast] 1.6:1 (need 4.5:1) — text #35332d on #050403\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.9:1 (need 4.5:1) — text #47474d on #1a1c1f\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 2.7:1 (need 4.5:1) — text #59595c on #121215\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.8:1 (need 4.5:1) — text #56514e on #302b27\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.8:1 (need 4.5:1) — text #bfbdb8 on #faf7f2\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.6:1 (need 4.5:1) — text #c7c4bf on #faf7f2\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.6:1 (need 4.5:1) — text #bfbdb8 on #f0ede8\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n\n<REPO>/tests/fixtures/antipatterns/design-system.html\n [low-contrast] 3.6:1 (need 4.5:1) — text #ff00aa on #ffffff\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 3.9:1 (need 4.5:1) — text #d55a42 on #ffffff\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n\n<REPO>/tests/fixtures/antipatterns/edge-flush-cards.html\n [cramped-padding] <div> \"scroller\": children flush against bg on all sides (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 1216px) of padding inside bordered, outlined, or colored containers.\n [cramped-padding] <div> \"scroller\": children flush against bg on all sides (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 1216px) of padding inside bordered, outlined, or colored containers.\n [cramped-padding] <div> \"scroller\": children flush against bg on all sides (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 1216px) of padding inside bordered, outlined, or colored containers.\n\n<REPO>/tests/fixtures/antipatterns/external-styles.css\n line 8: [side-tab] border-left: 4px solid #3b82f6\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 17: [border-accent-on-rounded] border-top: 3px solid\n → Thick accent border on a rounded card — the border clashes with the rounded corners. Remove the border or the border-radius.\n line 49: [border-accent-on-rounded] border-top: 4px solid\n → Thick accent border on a rounded card — the border clashes with the rounded corners. Remove the border or the border-radius.\n line 23: [overused-font] font-family: 'Inter\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n\n<REPO>/tests/fixtures/antipatterns/extreme-negative-tracking.html\n [extreme-negative-tracking] letter-spacing: -0.06em — \"Tracking crushed em paragraph copy that \"\n → Letter-spacing pulled tighter than the point where characters keep their own shapes costs legibility. Tighten display type optically, not destructively.\n [extreme-negative-tracking] letter-spacing: -0.06em — \"Tracking crushed pixels heading line\"\n → Letter-spacing pulled tighter than the point where characters keep their own shapes costs legibility. Tighten display type optically, not destructively.\n [extreme-negative-tracking] letter-spacing: -0.07em — \"Tracking crushed heading variant text\"\n → Letter-spacing pulled tighter than the point where characters keep their own shapes costs legibility. Tighten display type optically, not destructively.\n\n<REPO>/tests/fixtures/antipatterns/flat-type-hierarchy.html\n [flat-type-hierarchy] Role sizes: body 16px, h2 16px, h1 18px (largest adjacent step 1.13:1; target 1.25:1)\n → Dominant heading and body roles are separated by less than 1.25× at every step, leaving the size hierarchy flat. Add at least one stronger size step.\n\n<REPO>/tests/fixtures/antipatterns/flush-against-border.html\n [cramped-padding] <section> \"flag-frameworks\": children flush against border+bg on right/bottom/left (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 1216px) of padding inside bordered, outlined, or colored containers.\n [cramped-padding] <div> \"flag-card-borders\": children flush against border+bg on right/bottom/left (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 1216px) of padding inside bordered, outlined, or colored containers.\n [cramped-padding] <div> \"flag-bg-only\": children flush against bg on right/bottom/left (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 1216px) of padding inside bordered, outlined, or colored containers.\n [cramped-padding] <div> \"flag-outline-only\": children flush against outline on right/bottom/left (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 1216px) of padding inside bordered, outlined, or colored containers.\n [cramped-padding] <div> \"flag-asym-leftflush\": children flush against border+bg on left (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 1216px) of padding inside bordered, outlined, or colored containers.\n [cramped-padding] <section> \"pass-marquee-shell\": children flush against bg on all sides (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 1216px) of padding inside bordered, outlined, or colored containers.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-cssinjs/components/FeatureGrid.tsx (imported by index.tsx)\n line 13: [side-tab] border-left: 4px solid #8b5cf6\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 24: [bounce-easing] animation: bounce\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n line 18: [layout-transition] transition: width\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-cssinjs/components/GlobalStyle.tsx (imported by _app.tsx)\n line 13: [overused-font] font-family: 'Inter\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-cssinjs/components/Hero.tsx (imported by index.tsx)\n line 16: [overused-font] font-family: 'Montserrat\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n line 18: [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-cssinjs/components/Testimonials.tsx (imported by index.tsx)\n line 21: [side-tab] border-left: 4px solid #6366f1\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 15: [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-modules/app/globals.css (imported by layout.tsx)\n line 10: [overused-font] font-family: 'Roboto\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-modules/app/page.module.css (imported by page.tsx)\n line 16: [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-modules/components/Sidebar.module.css (imported by Sidebar.tsx)\n line 4: [side-tab] border-right: 3px solid #4f46e5\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-modules/components/StatsCard.module.css (imported by StatsCard.tsx)\n line 2: [side-tab] border-left: 4px solid #6366f1\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 23: [overused-font] font-family: 'Inter\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n line 10: [layout-transition] transition: width\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-tailwind/app/globals.css (imported by layout.tsx)\n line 19: [overused-font] font-family: 'Inter\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-tailwind/app/page.tsx\n line 15: [gradient-text] bg-clip-text + bg-gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n line 41: [ai-color-palette] text-purple-500 on heading\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n line 15: [ai-color-palette] from-purple-400 gradient\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-tailwind/components/FeatureCard.tsx (imported by page.tsx)\n line 9: [side-tab] border-l-4\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 11: [ai-color-palette] text-purple-600 on heading\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n line 10: [bounce-easing] animate-bounce (Tailwind)\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-tailwind/components/PricingCard.tsx (imported by page.tsx)\n line 18: [gradient-text] bg-clip-text + bg-gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n line 18: [ai-color-palette] from-violet-500 gradient\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n line 30: [ai-color-palette] from-purple-500 gradient\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n\n<REPO>/tests/fixtures/antipatterns/framework-vite/main.tsx\n line 5: [side-tab] border-l-4\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/glow.html\n [dark-glow] Zero-offset box-shadow glow (#3b82f6)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [dark-glow] Zero-offset box-shadow glow (#8b5cf6)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [dark-glow] Zero-offset box-shadow glow (#06b6d4)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [dark-glow] Zero-offset box-shadow glow (#a855f7)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [dark-glow] Zero-offset box-shadow glow (#ec4899)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [dark-glow] Zero-offset box-shadow glow (#00c0c2)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [dark-glow] Zero-offset box-shadow glow (#3b82f6)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [dark-glow] Zero-offset box-shadow glow (#b447eb)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [dark-glow] Zero-offset box-shadow glow (#63d18f)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [dark-glow] Zero-offset text-shadow glow (#22d3ee)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [dark-glow] Zero-offset box-shadow glow (#a46bf5)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [dark-glow] Zero-offset box-shadow glow (#d946ef)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [flat-type-hierarchy] Role sizes: h3 11px, body 12px, h4 13px, h2 14px (largest adjacent step 1.09:1; target 1.25:1)\n → Dominant heading and body roles are separated by less than 1.25× at every step, leaving the size hierarchy flat. Add at least one stronger size step.\n [buried-raster] raster under a near-opaque gradient wash: linear-gradient(#111827, #0b1220), url('/fixtures/antipatterns/missing-photo.png')\n → A background image under a near-opaque gradient wash, or a raster on an element at near-zero opacity, never reaches the screen: the page shows the wash, and the produced texture or photo ships as a compliance token. Let the material show (a tint under 0.9 alpha, a blend mode, an opacity you can see) or remove the file.\n [dark-glow] Zero-offset box-shadow glow (#3b82f6)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n\n<REPO>/tests/fixtures/antipatterns/heading-rhythm.html\n [cramped-padding] <div> \"pass-band\": children flush against bg on right/left (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 1216px) of padding inside bordered, outlined, or colored containers.\n\n<REPO>/tests/fixtures/antipatterns/hero-eyebrow-chip.html\n [low-contrast] 2.6:1 (need 4.5:1) — text #94a3b8 on #ffffff\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [hero-eyebrow-chip] eyebrow chip (tracked-caps) \"AI-NATIVE WORKFLOWS\" above h1 \"Eyebrow Above Hero\"\n → A tiny uppercase letter-spaced label sitting immediately above an oversized hero headline — or the same shape rendered as a pill chip — is now the default AI SaaS hero. Drop the eyebrow, integrate the kicker into the headline, or run it as a navigation breadcrumb instead.\n [hero-eyebrow-chip] eyebrow chip (tracked-caps) \"NEW IN 2026\" above h1 \"Span Eyebrow Above Hero\"\n → A tiny uppercase letter-spaced label sitting immediately above an oversized hero headline — or the same shape rendered as a pill chip — is now the default AI SaaS hero. Drop the eyebrow, integrate the kicker into the headline, or run it as a navigation breadcrumb instead.\n [hero-eyebrow-chip] eyebrow chip (tracked-caps) \"FEATURED\" above h1 \"Pill Chip Above Hero\"\n → A tiny uppercase letter-spaced label sitting immediately above an oversized hero headline — or the same shape rendered as a pill chip — is now the default AI SaaS hero. Drop the eyebrow, integrate the kicker into the headline, or run it as a navigation breadcrumb instead.\n [hero-eyebrow-chip] eyebrow chip (tracked-caps) \"NEW\" above h1 \"Already Uppercase Text\"\n → A tiny uppercase letter-spaced label sitting immediately above an oversized hero headline — or the same shape rendered as a pill chip — is now the default AI SaaS hero. Drop the eyebrow, integrate the kicker into the headline, or run it as a navigation breadcrumb instead.\n [hero-eyebrow-chip] eyebrow chip (tracked-caps) \"A VERY LONG UPPERCASE TABLE OF CONTENTS \" above h1 \"Long Uppercase Sentence Above Hero\"\n → A tiny uppercase letter-spaced label sitting immediately above an oversized hero headline — or the same shape rendered as a pill chip — is now the default AI SaaS hero. Drop the eyebrow, integrate the kicker into the headline, or run it as a navigation breadcrumb instead.\n [all-caps-body] text-transform: uppercase on 46 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [overused-font] Primary font: inter\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n [kicker-above-heading] kicker \"SECTION KICKER\" above h1 \"Body-Sized Heading Below Eyebrow\"\n → A tiny tracked uppercase or small-caps label sitting as its own block directly above a heading is banned outright, repeated or not. Generated kickers never earn their place: the heading carries its own weight. Delete the label and let the heading speak; if the words matter, work them into the heading or the body.\n\n<REPO>/tests/fixtures/antipatterns/hook-inline-ignore.html\n [overused-font] Primary font: roboto\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n\n<REPO>/tests/fixtures/antipatterns/icon-tile-stack.html\n [icon-tile-stack] 80x80px icon tile above h3 \"Lightning Fast\"\n → A small rounded-square icon container above a heading is the universal AI feature-card template — every generator outputs this exact shape. Try a side-by-side icon and heading, or let the icon sit in flow without its own container.\n [icon-tile-stack] 64x64px icon tile above h3 \"Secure Storage\"\n → A small rounded-square icon container above a heading is the universal AI feature-card template — every generator outputs this exact shape. Try a side-by-side icon and heading, or let the icon sit in flow without its own container.\n [icon-tile-stack] 72x72px icon tile above h3 \"Easy Setup\"\n → A small rounded-square icon container above a heading is the universal AI feature-card template — every generator outputs this exact shape. Try a side-by-side icon and heading, or let the icon sit in flow without its own container.\n [icon-tile-stack] 96x96px icon tile above h3 \"Powerful Analytics\"\n → A small rounded-square icon container above a heading is the universal AI feature-card template — every generator outputs this exact shape. Try a side-by-side icon and heading, or let the icon sit in flow without its own container.\n [icon-tile-stack] 48x48px icon tile above h3 \"Emoji Inline Icon\"\n → A small rounded-square icon container above a heading is the universal AI feature-card template — every generator outputs this exact shape. Try a side-by-side icon and heading, or let the icon sit in flow without its own container.\n [ai-color-palette] Purple/violet accent colors detected\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n [marketing-buzzword] 1 buzzword phrase: \"ure Storage Enterprise-grade security fo\"\n → Generic SaaS phrases (streamline / empower / supercharge / world-class / enterprise-grade / next-generation / cutting-edge / etc) are instant AI tells. Pick a specific verb and noun that says what the product literally does.\n\n<REPO>/tests/fixtures/antipatterns/image-backed-contrast.html\n [overused-font] Primary font: arial\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n\n<REPO>/tests/fixtures/antipatterns/italic-serif-display.html\n [italic-serif-display] italic serif h1 (fraunces) at 88px \"Fraunces 88px italic\"\n → Oversized italic serif (Fraunces, Recoleta, Playfair, Newsreader-italic) as the primary hero headline reads as taste in isolation but has become the universal AI-startup landing page hero. Set roman, or move to a non-serif display face. Editorial / magazine register may legitimately want this — judge by context.\n [italic-serif-display] italic serif h1 (recoleta) at 64px \"Recoleta 64px italic\"\n → Oversized italic serif (Fraunces, Recoleta, Playfair, Newsreader-italic) as the primary hero headline reads as taste in isolation but has become the universal AI-startup landing page hero. Set roman, or move to a non-serif display face. Editorial / magazine register may legitimately want this — judge by context.\n [italic-serif-display] italic serif h1 (playfair display) at 72px \"Playfair 72px italic\"\n → Oversized italic serif (Fraunces, Recoleta, Playfair, Newsreader-italic) as the primary hero headline reads as taste in isolation but has become the universal AI-startup landing page hero. Set roman, or move to a non-serif display face. Editorial / magazine register may legitimately want this — judge by context.\n [italic-serif-display] italic serif h1 (customserifface) at 56px \"Unknown Serif Generic Fallback\"\n → Oversized italic serif (Fraunces, Recoleta, Playfair, Newsreader-italic) as the primary hero headline reads as taste in isolation but has become the universal AI-startup landing page hero. Set roman, or move to a non-serif display face. Editorial / magazine register may legitimately want this — judge by context.\n [overused-font] Primary font: fraunces\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n [overused-font] Primary font: recoleta\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n [overused-font] Primary font: inter\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n\n<REPO>/tests/fixtures/antipatterns/jsx-should-flag.jsx\n line 8: [side-tab] border-l-4\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 35: [side-tab] borderLeft: '4px solid\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 22: [gradient-text] bg-clip-text + bg-gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n line 10: [ai-color-palette] text-purple-500 on heading\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n line 22: [ai-color-palette] from-purple-400 gradient\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n line 50: [bounce-easing] animate-bounce (Tailwind)\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n line 51: [layout-transition] transition: width\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n\n<REPO>/tests/fixtures/antipatterns/kicker-above-heading.html\n [hero-eyebrow-chip] eyebrow chip (tracked-caps) \"Platform overview\" above h1 \"\"Hero Owned By Hero Rule\"\"\n → A tiny uppercase letter-spaced label sitting immediately above an oversized hero headline — or the same shape rendered as a pill chip — is now the default AI SaaS hero. Drop the eyebrow, integrate the kicker into the headline, or run it as a navigation breadcrumb instead.\n [wide-tracking] letter-spacing: 0.11em on body text\n → Letter spacing above 0.05em on body text disrupts natural character groupings and slows reading. Reserve wide tracking for short uppercase labels only.\n [overused-font] Primary font: arial\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n [kicker-above-heading] kicker \"Invitation protocol\" above h2 \"A Single Kicker Still Flags\"\n → A tiny tracked uppercase or small-caps label sitting as its own block directly above a heading is banned outright, repeated or not. Generated kickers never earn their place: the heading carries its own weight. Delete the label and let the heading speak; if the words matter, work them into the heading or the body.\n [kicker-above-heading] kicker \"Output model\" above h2 \"Standard Tracking Kicker\"\n → A tiny tracked uppercase or small-caps label sitting as its own block directly above a heading is banned outright, repeated or not. Generated kickers never earn their place: the heading carries its own weight. Delete the label and let the heading speak; if the words matter, work them into the heading or the body.\n [kicker-above-heading] kicker \"Preview sequence\" above h3 \"Kicker Above An H3\"\n → A tiny tracked uppercase or small-caps label sitting as its own block directly above a heading is banned outright, repeated or not. Generated kickers never earn their place: the heading carries its own weight. Delete the label and let the heading speak; if the words matter, work them into the heading or the body.\n [kicker-above-heading] kicker \"Access window\" above h4 \"Kicker Above An H4\"\n → A tiny tracked uppercase or small-caps label sitting as its own block directly above a heading is banned outright, repeated or not. Generated kickers never earn their place: the heading carries its own weight. Delete the label and let the heading speak; if the words matter, work them into the heading or the body.\n [kicker-above-heading] kicker \"Platform notes\" above h1 \"Sub Hero Heading\"\n → A tiny tracked uppercase or small-caps label sitting as its own block directly above a heading is banned outright, repeated or not. Generated kickers never earn their place: the heading carries its own weight. Delete the label and let the heading speak; if the words matter, work them into the heading or the body.\n [kicker-above-heading] kicker \"materials briefing\" above h2 \"Small Caps Kicker\"\n → A tiny tracked uppercase or small-caps label sitting as its own block directly above a heading is banned outright, repeated or not. Generated kickers never earn their place: the heading carries its own weight. Delete the label and let the heading speak; if the words matter, work them into the heading or the body.\n [kicker-above-heading] kicker \"Field studies\" above div \"Heading Role Kicker\"\n → A tiny tracked uppercase or small-caps label sitting as its own block directly above a heading is banned outright, repeated or not. Generated kickers never earn their place: the heading carries its own weight. Delete the label and let the heading speak; if the words matter, work them into the heading or the body.\n [cream-palette] cream/beige page background rgb(246, 242, 236)\n → A warm cream or beige page background has become the default \"tasteful\" AI surface, reached for by reflex. Choose a background that comes from a deliberate palette, not the safe warm off-white.\n [skipped-heading] <h1> \"\"Page Title After Nav\"\" followed by <h3> \"\"48%\"\" (missing h2)\n → Heading levels should not skip (e.g. h1 then h3 with no h2). Screen readers use heading hierarchy for navigation. Skipping levels breaks the document outline.\n [skipped-heading] <h1> \"\"Hero Owned By Hero Rule\"\" followed by <h3> \"\"Garden Suite\"\" (missing h2)\n → Heading levels should not skip (e.g. h1 then h3 with no h2). Screen readers use heading hierarchy for navigation. Skipping levels breaks the document outline.\n\n<REPO>/tests/fixtures/antipatterns/layout.html\n [nested-cards] Card inside card (div)\n → Cards inside cards create visual noise and excessive depth. Flatten the hierarchy — use spacing, typography, and dividers instead of nesting containers.\n [nested-cards] Card inside card (div)\n → Cards inside cards create visual noise and excessive depth. Flatten the hierarchy — use spacing, typography, and dividers instead of nesting containers.\n [nested-cards] Card inside card (div)\n → Cards inside cards create visual noise and excessive depth. Flatten the hierarchy — use spacing, typography, and dividers instead of nesting containers.\n [nested-cards] Card inside card (div)\n → Cards inside cards create visual noise and excessive depth. Flatten the hierarchy — use spacing, typography, and dividers instead of nesting containers.\n\n<REPO>/tests/fixtures/antipatterns/linked-stylesheet.html\n [side-tab] border-left: 4px + border-radius: 12px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [border-accent-on-rounded] border-top: 3px + border-radius: 12px\n → Thick accent border on a rounded card — the border clashes with the rounded corners. Remove the border or the border-radius.\n [side-tab] border-top: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/linked-url-patterns.css\n line 184: [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n line 34: [bounce-easing] animation: bounce-linked-pseudo\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n line 57: [bounce-easing] cubic-bezier(0.34, 1.56, 0.64, 1)\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n line 191: [layout-transition] transition: width\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n\n<REPO>/tests/fixtures/antipatterns/linked-url-patterns.html\n [low-contrast] 1.4:1 (need 4.5:1) — text #ffffff on #d9d9d9\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.0:1 (need 4.5:1) — text #ffffff on #fafafa\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.0:1 (need 4.5:1) — text #ffffff on #fafafa\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n [pulsing-dot] .linked-pulse-dot — 8x8px dot with infinite \"linked-signal-cycle\" animation\n → Small pulsing status dots simulate liveness decoratively. Reserve pulse animation for indicators tied to genuinely live, changing data; a static indicator with clear labeling is honest and calmer.\n [organic-clip-path] clip-path: polygon() with 16 vertices approximating an organic contour\n → A clip-path polygon with many arbitrary vertices, or a curved clip-path path(), is CSS approximating a torn edge, blob, or silhouette. It reads as the cheap version of the effect and is usually a produced or photographic material replaced with code. Derive an alpha matte from the real image, or ship the shape as a cut-out raster; keep clip-path for geometry (cut corners, diagonals, hexagons).\n [marquee] .linked-marquee — infinite horizontal loop animation \"linked-horizontal-loop\"\n → Continuously auto-scrolling content demands attention it has not earned and hides half its content at any moment. Reserve motion for content that changes; let readers move at their own pace.\n [marquee] .overridden-keyframes-animation — infinite horizontal loop animation \"overridden-horizontal-loop\"\n → Continuously auto-scrolling content demands attention it has not earned and hides half its content at any moment. Reserve motion for content that changes; let readers move at their own pace.\n [marquee] .layered-keyframes-animation — infinite horizontal loop animation \"layered-horizontal-loop\"\n → Continuously auto-scrolling content demands attention it has not earned and hides half its content at any moment. Reserve motion for content that changes; let readers move at their own pace.\n [marquee] /* Chromium makes nested keyframes globally available even while the enclosing\n container condition is false, so this live reference must still scan. */\n.inactive-container-animation-reference — infinite horizontal loop animation \"inactive-container-horizontal-loop\"\n → Continuously auto-scrolling content demands attention it has not earned and hides half its content at any moment. Reserve motion for content that changes; let readers move at their own pace.\n [marquee] .active-container-animation-reference — infinite horizontal loop animation \"active-container-horizontal-loop\"\n → Continuously auto-scrolling content demands attention it has not earned and hides half its content at any moment. Reserve motion for content that changes; let readers move at their own pace.\n [radial-halo] radial-gradient halo (#506fff → transparent) on dark page\n → A chromatic radial-gradient wash — saturated at the center, fading to transparent — used as a decorative background glow on a dark page. Same tell as glowing shadows, drawn with a gradient instead of a shadow. Ground the surface with a solid or subtly shifted background instead.\n\n<REPO>/tests/fixtures/antipatterns/modern-color-borders.html\n [side-tab] border-left: 3px + border-radius: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 4px + border-radius: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 4px + border-radius: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 4px + border-radius: 6px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 4px + border-radius: 6px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 4px + border-radius: 6px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 3px + border-radius: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 4px + border-radius: 6px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 5px + border-radius: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 4px + border-radius: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-right: 4px + border-radius: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 4px + border-radius: 6px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [low-contrast] 4.49:1 (need 4.5:1) — text #64748b on #fef7f2\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [flat-type-hierarchy] Role sizes: body 13px, h2 14px, h3 14px (largest adjacent step 1.08:1; target 1.25:1)\n → Dominant heading and body roles are separated by less than 1.25× at every step, leaving the size hierarchy flat. Add at least one stronger size step.\n\n<REPO>/tests/fixtures/antipatterns/motion.html\n [bounce-easing] animation: bounce-keyframe\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n [bounce-easing] cubic-bezier(0.68, -0.55, 0.265, 1.55)\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n [layout-transition] transition: width\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n [layout-transition] transition: height\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n [layout-transition] transition: padding\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n [layout-transition] transition: margin\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n [layout-transition] transition: max-height\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n [layout-transition] transition: width, height\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n [layout-transition] transition: width\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n [layout-transition] transition: width\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n [flat-type-hierarchy] Role sizes: h3 11px, body 12px, h4 13px, h2 14px (largest adjacent step 1.09:1; target 1.25:1)\n → Dominant heading and body roles are separated by less than 1.25× at every step, leaving the size hierarchy flat. Add at least one stronger size step.\n\n<REPO>/tests/fixtures/antipatterns/multifile/Card.tsx (imported by App.tsx)\n line 11: [side-tab] border-l-4\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 12: [ai-color-palette] text-purple-500 on heading\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n\n<REPO>/tests/fixtures/antipatterns/multifile/styles.css (imported by App.tsx)\n line 3: [overused-font] font-family: 'Inter\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n line 8: [bounce-easing] animation: bounce\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n\n<REPO>/tests/fixtures/antipatterns/multifile/theme.sass\n line 4: [side-tab] border-left: 4px solid $primary\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/multifile/theme.scss\n line 4: [side-tab] border-left: 4px solid $primary\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/named-color-borders.html\n [side-tab] border-left: 4px + border-radius: 8px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 5px + border-radius: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-top: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 3px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 6px + border-radius: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 7px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [low-contrast] 4.4:1 (need 4.5:1) — text #64748b on #f6f6f6\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [flat-type-hierarchy] Role sizes: body 13px, h2 14px, h3 14px (largest adjacent step 1.08:1; target 1.25:1)\n → Dominant heading and body roles are separated by less than 1.25× at every step, leaving the size hierarchy flat. Add at least one stronger size step.\n\n<REPO>/tests/fixtures/antipatterns/nav-cta-constructions.html\n [low-contrast] 1.3:1 (need 4.5:1) — text #c9d6ea on #e8b84b\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.2:1 (need 4.5:1) — text #b7c6de on #e5a93f\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.3:1 (need 4.5:1) — text #cfd9e9 on #f0b64e\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.3:1 (need 4.5:1) — text #d3dcec on #f2b854\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.3:1 (need 4.5:1) — text #d0daea on #efb352\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.1:1 (need 4.5:1) — text #b7c6de on #eab04a\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.8:1 (need 4.5:1) — text #d2dcec on #cf9c48\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.0:1 (need 4.5:1) — text #aabfde on #fcb442\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n\n<REPO>/tests/fixtures/antipatterns/nonrendered-text.html\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [undersized-ui-text] 9px functional text \"Rendered Nav Link\" (below 11px floor)\n → Interactive and content-bearing UI text (links, buttons, nav items, labels, table cells, meta rows, timecodes) below 11px is a legibility failure, not a style choice. WCAG sets no absolute pixel floor, but functional text under 11px is a defensible quality bar: it fails on high-DPI and small viewports and it degrades tap and read targets. The 11px floor holds even inside a footer; only non-interactive legal smallprint gets the softer 10px floor. Being ON the DESIGN.md size ramp does not exempt a value here: adding 8px to the ramp launders the token but not the legibility problem, and that is exactly the escape hatch this rule closes. Exempts sup/sub, visually-hidden (sr-only) text, and code/terminal contexts. Decorative letterspaced micro-labels are still functional and stay in scope.\n\n<REPO>/tests/fixtures/antipatterns/numbered-section-markers.html\n [flat-type-hierarchy] Role sizes: body 16px, h1 16px, h2 16px (largest adjacent step 1.00:1; target 1.25:1)\n → Dominant heading and body roles are separated by less than 1.25× at every step, leaving the size hierarchy flat. Add at least one stronger size step.\n\n<REPO>/tests/fixtures/antipatterns/oklch-neon-text.html\n [low-contrast] 1.3:1 (need 4.5:1) — text #00f4f6 on #f5f5f5\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n\n<REPO>/tests/fixtures/antipatterns/organic-clip-path.html\n [low-contrast] 1.2:1 (need 4.5:1) — text #000000 on #1a1a1a\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 4.1:1 (need 4.5:1) — text #000000 on #cc3333\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.3:1 (need 4.5:1) — text #000000 on #222222\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.7:1 (need 4.5:1) — text #000000 on #333333\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [organic-clip-path] clip-path: polygon() with 18 vertices approximating an organic contour\n → A clip-path polygon with many arbitrary vertices, or a curved clip-path path(), is CSS approximating a torn edge, blob, or silhouette. It reads as the cheap version of the effect and is usually a produced or photographic material replaced with code. Derive an alpha matte from the real image, or ship the shape as a cut-out raster; keep clip-path for geometry (cut corners, diagonals, hexagons).\n [organic-clip-path] clip-path: polygon() with 21 vertices approximating an organic contour\n → A clip-path polygon with many arbitrary vertices, or a curved clip-path path(), is CSS approximating a torn edge, blob, or silhouette. It reads as the cheap version of the effect and is usually a produced or photographic material replaced with code. Derive an alpha matte from the real image, or ship the shape as a cut-out raster; keep clip-path for geometry (cut corners, diagonals, hexagons).\n [organic-clip-path] clip-path: path() with 6 curve segments\n → A clip-path polygon with many arbitrary vertices, or a curved clip-path path(), is CSS approximating a torn edge, blob, or silhouette. It reads as the cheap version of the effect and is usually a produced or photographic material replaced with code. Derive an alpha matte from the real image, or ship the shape as a cut-out raster; keep clip-path for geometry (cut corners, diagonals, hexagons).\n [organic-clip-path] clip-path: polygon() with 21 vertices approximating an organic contour\n → A clip-path polygon with many arbitrary vertices, or a curved clip-path path(), is CSS approximating a torn edge, blob, or silhouette. It reads as the cheap version of the effect and is usually a produced or photographic material replaced with code. Derive an alpha matte from the real image, or ship the shape as a cut-out raster; keep clip-path for geometry (cut corners, diagonals, hexagons).\n\n<REPO>/tests/fixtures/antipatterns/overlay-positioning.html\n [side-tab] border-left: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [low-contrast] 4.2:1 (need 4.5:1) — text #ffffff on #8b5cf6\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 43 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 41 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 45 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 35 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 45 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 46 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 38 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 40 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 42 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 37 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [cramped-padding] <div> \"absolute-container\": children flush against bg on all sides (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 1216px) of padding inside bordered, outlined, or colored containers.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [cramped-padding] <div> \"flex-center\": children flush against bg on all sides (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 1216px) of padding inside bordered, outlined, or colored containers.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [cramped-padding] <div> \"grid-center\": children flush against bg on all sides (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 1216px) of padding inside bordered, outlined, or colored containers.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 45 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 33 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 37 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 31 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 39 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 52 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [clipped-overflow-container] div clips a positioned child\n → A clipping container (overflow hidden or clip) wrapping an absolutely-positioned child cuts off tooltips, menus, and popovers that need to escape. Let the overflow be visible, or move the positioned layer out of the clip.\n [ai-color-palette] Purple/violet accent colors detected\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n\n<REPO>/tests/fixtures/antipatterns/oversized-h1-browser.html\n [oversized-h1] 104px h1, 82 chars \"A sweeping product headline that sprawls across the whole vi\"\n → A full-sentence headline set at display size ends up dominating the viewport, leaving no room for anything else above the fold. A punchy one- or two-word headline at that size is fine — the problem is a long headline blown up too large. Set long headlines smaller, or tighten the copy.\n [oversized-h1] 83px h1, 41 chars \"The missing design vocabulary for agents.\"\n → A full-sentence headline set at display size ends up dominating the viewport, leaving no room for anything else above the fold. A punchy one- or two-word headline at that size is fine — the problem is a long headline blown up too large. Set long headlines smaller, or tighten the copy.\n\n<REPO>/tests/fixtures/antipatterns/oversized-h1.html\n [oversized-h1] 96px h1, 73 chars \"A sweeping product headline that runs on far too long to sit\"\n → A full-sentence headline set at display size ends up dominating the viewport, leaving no room for anything else above the fold. A punchy one- or two-word headline at that size is fine — the problem is a long headline blown up too large. Set long headlines smaller, or tighten the copy.\n [oversized-h1] 80px h1, 76 chars \"Everything your whole team needs to launch quickly and final\"\n → A full-sentence headline set at display size ends up dominating the viewport, leaving no room for anything else above the fold. A punchy one- or two-word headline at that size is fine — the problem is a long headline blown up too large. Set long headlines smaller, or tighten the copy.\n\n<REPO>/tests/fixtures/antipatterns/overused-font.html\n [overused-font] Primary font: inter\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n [overused-font] Primary font: geist\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n [overused-font] Primary font: montserrat\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n [overused-font] Primary font: lato\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n\n<REPO>/tests/fixtures/antipatterns/partial-component.html\n [side-tab] border-left: 4px + border-radius: 8px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/placeholder-contrast.html\n [low-contrast] placeholder \"Pale Placeholder On White Field\" 1.9:1 (need 4.5:1) — text #bbbbbb on #ffffff\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] placeholder \"Pale Placeholder On White Textarea\" 1.9:1 (need 4.5:1) — text #bbbbbb on #ffffff\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] placeholder \"Translucent Placeholder On Light Field\" 1.0:1 (need 4.5:1) — text #f9f9f9 on #f5f5f5\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] placeholder \"Pale Placeholder On Frosted Panel\" 3.5:1 (need 4.5:1) — text #bbbbbb on #5c5c5d\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n\n<REPO>/tests/fixtures/antipatterns/pseudo-stripe.css\n line 16: [side-tab] .card[data-case=\"Inset Shorthand Left Edge\"]::before — absolute 4px pseudo-element stripe (left: 0)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 25: [side-tab] .card[data-case=\"Longhand Left Edge\"]::before — absolute 4px pseudo-element stripe (left: 0)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 36: [side-tab] .card[data-case=\"Bottom Edge\"]::after — absolute 4px pseudo-element stripe (bottom: 0)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 47: [side-tab] .card[data-case=\"Full Height Right Edge\"]::before — absolute 3px pseudo-element stripe (right: 0)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/pseudo-stripe.html\n [side-tab] .card-stripe::before — absolute 5px pseudo-element stripe (left: 0)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] .row-stripe::after — absolute 4px pseudo-element stripe (right: 0)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/pseudo-stripe.vue\n line 13: [side-tab] .card[data-case=\"Component Left Edge\"]::before — absolute 4px pseudo-element stripe (left: 0)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/pulsing-dot.html\n [pulsing-dot] .live-dot — 7x7px dot with infinite \"pulse\" animation\n → Small pulsing status dots simulate liveness decoratively. Reserve pulse animation for indicators tied to genuinely live, changing data; a static indicator with clear labeling is honest and calmer.\n [pulsing-dot] .status .dot — 8x8px dot with infinite \"ripple\" animation\n → Small pulsing status dots simulate liveness decoratively. Reserve pulse animation for indicators tied to genuinely live, changing data; a static indicator with clear labeling is honest and calmer.\n [pulsing-dot] .beacon — 10x10px dot with infinite \"pulse\" animation\n → Small pulsing status dots simulate liveness decoratively. Reserve pulse animation for indicators tied to genuinely live, changing data; a static indicator with clear labeling is honest and calmer.\n [pulsing-dot] .rec-mark — 10x10px dot with infinite \"pulse\" animation in header/nav\n → Small pulsing status dots simulate liveness decoratively. Reserve pulse animation for indicators tied to genuinely live, changing data; a static indicator with clear labeling is honest and calmer.\n [pulsing-dot] animate-ping on tiny rounded-full element\n → Small pulsing status dots simulate liveness decoratively. Reserve pulse animation for indicators tied to genuinely live, changing data; a static indicator with clear labeling is honest and calmer.\n\n<REPO>/tests/fixtures/antipatterns/quality.html\n [tight-leading] line-height 1.00x (need >=1.3)\n → Line height below 1.3x the font size makes multi-line text hard to read. Use 1.5 to 1.7 for body text so lines have room to breathe.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [justified-text] text-align: justify without hyphens: auto\n → Justified text without hyphenation creates uneven word spacing (\"rivers of white\"). Use text-align: left for body text, or enable hyphens: auto if you must justify.\n [all-caps-body] text-transform: uppercase on 285 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [wide-tracking] letter-spacing: 0.15em on body text\n → Letter spacing above 0.05em on body text disrupts natural character groupings and slows reading. Reserve wide tracking for short uppercase labels only.\n [skipped-heading] <h1> \"Top heading\" followed by <h3> \"Skips straight to h3\" (missing h2)\n → Heading levels should not skip (e.g. h1 then h3 with no h2). Screen readers use heading hierarchy for navigation. Skipping levels breaks the document outline.\n\n<REPO>/tests/fixtures/antipatterns/radial-spotlight-glow.html\n [radial-spotlight-glow] radial-gradient spotlight glow \"Hero Spotlight Blue\" (#506fff a0.26 → transparent) on 360x560 surface\n → A soft, low-opacity accent-colored radial gradient fading to transparent, dropped behind a hero or section as a \"spotlight.\" It is a reflex AI decoration — the translucent cousin of the saturated radial halo. Let the surface stand on its own, or light the composition with a deliberate material accent rather than a floating colored haze.\n [radial-spotlight-glow] radial-gradient spotlight glow \"Section Glow Violet\" (#8b5cf6 a0.30 → transparent) on 900x600 surface\n → A soft, low-opacity accent-colored radial gradient fading to transparent, dropped behind a hero or section as a \"spotlight.\" It is a reflex AI decoration — the translucent cousin of the saturated radial halo. Let the surface stand on its own, or light the composition with a deliberate material accent rather than a floating colored haze.\n [radial-spotlight-glow] radial-gradient spotlight glow \"Overlay Glow Cyan\" (#22d3ee a0.22 → transparent) on 760x480 surface\n → A soft, low-opacity accent-colored radial gradient fading to transparent, dropped behind a hero or section as a \"spotlight.\" It is a reflex AI decoration — the translucent cousin of the saturated radial halo. Let the surface stand on its own, or light the composition with a deliberate material accent rather than a floating colored haze.\n [radial-spotlight-glow] radial-gradient spotlight glow \"Two Stop Soft Glow\" (#ff5a78 a0.28 → transparent) on 640x400 surface\n → A soft, low-opacity accent-colored radial gradient fading to transparent, dropped behind a hero or section as a \"spotlight.\" It is a reflex AI decoration — the translucent cousin of the saturated radial halo. Let the surface stand on its own, or light the composition with a deliberate material accent rather than a floating colored haze.\n [radial-spotlight-glow] radial-gradient spotlight glow \"Hex Alpha Glow\" (#506fff a0.24 → transparent) on 700x460 surface\n → A soft, low-opacity accent-colored radial gradient fading to transparent, dropped behind a hero or section as a \"spotlight.\" It is a reflex AI decoration — the translucent cousin of the saturated radial halo. Let the surface stand on its own, or light the composition with a deliberate material accent rather than a floating colored haze.\n [radial-halo] radial-gradient halo (#ff0080 → transparent) on dark page\n → A chromatic radial-gradient wash — saturated at the center, fading to transparent — used as a decorative background glow on a dark page. Same tell as glowing shadows, drawn with a gradient instead of a shadow. Ground the surface with a solid or subtly shifted background instead.\n\n<REPO>/tests/fixtures/antipatterns/repeated-container-text.html\n [repeated-container-text] \"Suspended\" rendered 3× in distinct spots inside div.card\n → The same literal text rendered three or more times in structurally different spots inside a single card or panel is redundant messaging — usually a status or label wired into every slot of a template. Say it once, in the slot where it matters most.\n [repeated-container-text] \"Unavailable\" rendered 4× in distinct spots inside div.shadow-card\n → The same literal text rendered three or more times in structurally different spots inside a single card or panel is redundant messaging — usually a status or label wired into every slot of a template. Say it once, in the slot where it matters most.\n\n<REPO>/tests/fixtures/antipatterns/scoped-ignore.html\n [side-tab] border-left: 6px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 8px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 12px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 5px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [overused-font] Primary font: arial\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n [cream-palette] cream/beige page background rgb(250, 248, 244)\n → A warm cream or beige page background has become the default \"tasteful\" AI surface, reached for by reflex. Choose a background that comes from a deliberate palette, not the safe warm off-white.\n\n<REPO>/tests/fixtures/antipatterns/should-flag.html\n [side-tab] border-left: 4px + border-radius: 0.375px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-right: 5px + border-radius: 0.375px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 3px + border-radius: 0.375px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-right: 6px + border-radius: 0.375px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [border-accent-on-rounded] border-top: 4px + border-radius: 12px\n → Thick accent border on a rounded card — the border clashes with the rounded corners. Remove the border or the border-radius.\n [border-accent-on-rounded] border-bottom: 3px + border-radius: 12px\n → Thick accent border on a rounded card — the border clashes with the rounded corners. Remove the border or the border-radius.\n [side-tab] border-left: 4px + border-radius: 12px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/svelte-should-flag.svelte\n line 6: [side-tab] border-r-4\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 17: [side-tab] border-right: 4px solid #8b5cf6\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 19: [overused-font] font-family: 'Roboto\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n line 7: [ai-color-palette] text-purple-500 on heading\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n line 10: [bounce-easing] animate-bounce (Tailwind)\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n line 30: [bounce-easing] animation: elastic\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n line 31: [layout-transition] transition: height\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n line 26: [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n\n<REPO>/tests/fixtures/antipatterns/text-occlusion.html\n [low-contrast] 1.0:1 (need 3:1) — text #ffffff on #ffffff\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [all-caps-body] text-transform: uppercase on 32 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [kicker-above-heading] kicker \"Family Italian on the waterfront\" above h1 \"Trattoria da Nonna Lucia\"\n → A tiny tracked uppercase or small-caps label sitting as its own block directly above a heading is banned outright, repeated or not. Generated kickers never earn their place: the heading carries its own weight. Delete the label and let the heading speak; if the words matter, work them into the heading or the body.\n\n<REPO>/tests/fixtures/antipatterns/typography-should-flag.html\n [overused-font] Primary font: inter\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n [flat-type-hierarchy] Role sizes: body 14px, h3 15px, h2 16px, h1 18px (largest adjacent step 1.13:1; target 1.25:1)\n → Dominant heading and body roles are separated by less than 1.25× at every step, leaving the size hierarchy flat. Add at least one stronger size step.\n\n<REPO>/tests/fixtures/antipatterns/typography.html\n [tight-leading] line-height 1.05x (need >=1.3)\n → Line height below 1.3x the font size makes multi-line text hard to read. Use 1.5 to 1.7 for body text so lines have room to breathe.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 159 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [wide-tracking] letter-spacing: 0.08em on body text\n → Letter spacing above 0.05em on body text disrupts natural character groupings and slows reading. Reserve wide tracking for short uppercase labels only.\n [justified-text] text-align: justify without hyphens: auto\n → Justified text without hyphenation creates uneven word spacing (\"rivers of white\"). Use text-align: left for body text, or enable hyphens: auto if you must justify.\n [overused-font] Primary font: inter\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n\n<REPO>/tests/fixtures/antipatterns/undersized-ui-text.html\n [undersized-ui-text] 8px functional text \"Flag Nav Link\" (below 11px floor)\n → Interactive and content-bearing UI text (links, buttons, nav items, labels, table cells, meta rows, timecodes) below 11px is a legibility failure, not a style choice. WCAG sets no absolute pixel floor, but functional text under 11px is a defensible quality bar: it fails on high-DPI and small viewports and it degrades tap and read targets. The 11px floor holds even inside a footer; only non-interactive legal smallprint gets the softer 10px floor. Being ON the DESIGN.md size ramp does not exempt a value here: adding 8px to the ramp launders the token but not the legibility problem, and that is exactly the escape hatch this rule closes. Exempts sup/sub, visually-hidden (sr-only) text, and code/terminal contexts. Decorative letterspaced micro-labels are still functional and stay in scope.\n [undersized-ui-text] 8px functional text \"Flag Category\" (below 11px floor)\n → Interactive and content-bearing UI text (links, buttons, nav items, labels, table cells, meta rows, timecodes) below 11px is a legibility failure, not a style choice. WCAG sets no absolute pixel floor, but functional text under 11px is a defensible quality bar: it fails on high-DPI and small viewports and it degrades tap and read targets. The 11px floor holds even inside a footer; only non-interactive legal smallprint gets the softer 10px floor. Being ON the DESIGN.md size ramp does not exempt a value here: adding 8px to the ramp launders the token but not the legibility problem, and that is exactly the escape hatch this rule closes. Exempts sup/sub, visually-hidden (sr-only) text, and code/terminal contexts. Decorative letterspaced micro-labels are still functional and stay in scope.\n [undersized-ui-text] 9px functional text \"Flag Meta Row\" (below 11px floor)\n → Interactive and content-bearing UI text (links, buttons, nav items, labels, table cells, meta rows, timecodes) below 11px is a legibility failure, not a style choice. WCAG sets no absolute pixel floor, but functional text under 11px is a defensible quality bar: it fails on high-DPI and small viewports and it degrades tap and read targets. The 11px floor holds even inside a footer; only non-interactive legal smallprint gets the softer 10px floor. Being ON the DESIGN.md size ramp does not exempt a value here: adding 8px to the ramp launders the token but not the legibility problem, and that is exactly the escape hatch this rule closes. Exempts sup/sub, visually-hidden (sr-only) text, and code/terminal contexts. Decorative letterspaced micro-labels are still functional and stay in scope.\n [undersized-ui-text] 10px functional text \"Flag Button\" (below 11px floor)\n → Interactive and content-bearing UI text (links, buttons, nav items, labels, table cells, meta rows, timecodes) below 11px is a legibility failure, not a style choice. WCAG sets no absolute pixel floor, but functional text under 11px is a defensible quality bar: it fails on high-DPI and small viewports and it degrades tap and read targets. The 11px floor holds even inside a footer; only non-interactive legal smallprint gets the softer 10px floor. Being ON the DESIGN.md size ramp does not exempt a value here: adding 8px to the ramp launders the token but not the legibility problem, and that is exactly the escape hatch this rule closes. Exempts sup/sub, visually-hidden (sr-only) text, and code/terminal contexts. Decorative letterspaced micro-labels are still functional and stay in scope.\n [undersized-ui-text] 9px functional text \"Flag Table Cell\" (below 11px floor)\n → Interactive and content-bearing UI text (links, buttons, nav items, labels, table cells, meta rows, timecodes) below 11px is a legibility failure, not a style choice. WCAG sets no absolute pixel floor, but functional text under 11px is a defensible quality bar: it fails on high-DPI and small viewports and it degrades tap and read targets. The 11px floor holds even inside a footer; only non-interactive legal smallprint gets the softer 10px floor. Being ON the DESIGN.md size ramp does not exempt a value here: adding 8px to the ramp launders the token but not the legibility problem, and that is exactly the escape hatch this rule closes. Exempts sup/sub, visually-hidden (sr-only) text, and code/terminal contexts. Decorative letterspaced micro-labels are still functional and stay in scope.\n [undersized-ui-text] 10px functional text \"Flag Caps Label\" (below 11px floor)\n → Interactive and content-bearing UI text (links, buttons, nav items, labels, table cells, meta rows, timecodes) below 11px is a legibility failure, not a style choice. WCAG sets no absolute pixel floor, but functional text under 11px is a defensible quality bar: it fails on high-DPI and small viewports and it degrades tap and read targets. The 11px floor holds even inside a footer; only non-interactive legal smallprint gets the softer 10px floor. Being ON the DESIGN.md size ramp does not exempt a value here: adding 8px to the ramp launders the token but not the legibility problem, and that is exactly the escape hatch this rule closes. Exempts sup/sub, visually-hidden (sr-only) text, and code/terminal contexts. Decorative letterspaced micro-labels are still functional and stay in scope.\n [undersized-ui-text] 8px functional text \"Flag Footer Link\" (below 11px floor)\n → Interactive and content-bearing UI text (links, buttons, nav items, labels, table cells, meta rows, timecodes) below 11px is a legibility failure, not a style choice. WCAG sets no absolute pixel floor, but functional text under 11px is a defensible quality bar: it fails on high-DPI and small viewports and it degrades tap and read targets. The 11px floor holds even inside a footer; only non-interactive legal smallprint gets the softer 10px floor. Being ON the DESIGN.md size ramp does not exempt a value here: adding 8px to the ramp launders the token but not the legibility problem, and that is exactly the escape hatch this rule closes. Exempts sup/sub, visually-hidden (sr-only) text, and code/terminal contexts. Decorative letterspaced micro-labels are still functional and stay in scope.\n\n<REPO>/tests/fixtures/antipatterns/visual-contrast.html\n [cream-palette] cream/beige page background rgb(247, 243, 238)\n → A warm cream or beige page background has become the default \"tasteful\" AI surface, reached for by reflex. Choose a background that comes from a deliberate palette, not the safe warm off-white.\n\n<REPO>/tests/fixtures/antipatterns/vue-should-flag.vue\n line 2: [side-tab] border-l-4\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 20: [side-tab] border-left: 4px solid #6366f1\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 22: [overused-font] font-family: 'Inter\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n line 3: [ai-color-palette] text-purple-600 on heading\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n line 5: [bounce-easing] animate-bounce (Tailwind)\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n line 33: [bounce-easing] animation: bounce\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n line 34: [layout-transition] transition: width\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n line 28: [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n\n419 anti-patterns found.\n",
"exit": 2,
"signal": null,
"files": {}
}