mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-14 15:16:35 +03:00
Paul Bakaus
b6a34de55a
Unit tests of the deleted Node scripts and the JS detector are removed; their behavior is pinned by tests/oracle goldens (frozen JS behavior plus reviewed deltas) and the engine's own tests. tests/oracle.test.mjs replays the corpus against the binary (IMPECCABLE_BIN or skill/scripts/bin/<target>/, via tests/lib/engine-bin.mjs) and skips cleanly without one; the framework fixture sweep drives live-inject, live-wrap, and detect-csp through the binary the same way. record.mjs learns --bin. The function-level vectors under tests/oracle/vectors/calls are committed as the frozen snapshot they can no longer be regenerated from. Suites: core trimmed to build and transformer tests, oracle added to the default run, detector/live reduced to packaging and reference checks, the live-e2e helper tests move to the opt-in live-e2e lane pending its retarget, cli-remote-e2e is an empty placeholder. Prepared with AI assistance (Claude Code).
535 lines
78 KiB
JSON
535 lines
78 KiB
JSON
{"args":["Should pass paragraph in centered container with 32px padding This paragraph sits inside a max-width container that's centered and has 32px horizontal padding. It does not touch the viewport edges and should not trigger the rule. paragraph inside <nav> (excluded — nav can bleed) This nav legitimately bleeds to the edges as a full-width header strip; the rule excludes elements inside <nav> or <header> so this does not flag. paragraph inside <header> (excluded — header can bleed) Banner headers commonly bleed to viewport edges with their own internal layout. The rule excludes <header> descendants. paragraph inside full-bleed section with own background This paragraph sits in a full-bleed section that has its own background-color set (intentional design move). The rule excludes paragraphs whose element has its own background-color. short label / button-ish text (excluded — < 40 chars) Short label."],"result":null}
|
|
{"args":["Rounded card with colored left border Classic side tab: border-left is thick, colored, and paired with rounded corners."],"result":null}
|
|
{"args":["Rounded card with colored right border The right-side version is the same visual trope mirrored."],"result":null}
|
|
{"args":["Thick colored side border without radius A thick chromatic side stripe still reads as a tab even without rounded corners."],"result":null}
|
|
{"args":["Rounded card with top accent border A heavy top accent on a rounded card is the horizontal variant of the same pattern."],"result":null}
|
|
{"args":["Rounded card with bottom accent border The bottom accent is also a decorative stripe on a card surface."],"result":null}
|
|
{"args":["Should flag Rounded card with colored left border Classic side tab: border-left is thick, colored, and paired with rounded corners. Rounded card with colored right border The right-side version is the same visual trope mirrored. Thick colored side border without radius A thick chromatic side stripe still reads as a tab even without rounded corners. Rounded card with top accent border A heavy top accent on a rounded card is the horizontal variant of the same pattern. Rounded card with bottom accent border The bottom accent is also a decorative stripe on a card surface. Dark card with bright side stripe Dark surfaces can hide the cliche, but the thick colored side stripe remains."],"result":null}
|
|
{"args":["Uniform full border A quiet all-around border frames the card instead of creating a side tab."],"result":null}
|
|
{"args":["Neutral structural side rule A gray structural rule can be a legitimate divider when it is not chromatic emphasis."],"result":null}
|
|
{"args":["Thin colored side rule A 1px colored rule is below the decorative side-tab threshold."],"result":null}
|
|
{"args":["Status toast with severity accent A live status region carries a colored side bar as a severity accent, not a decorative side tab."],"result":null}
|
|
{"args":["Square top border A chromatic top stripe on a card is the horizontal variant of the side tab."],"result":null}
|
|
{"args":["Selected tab underline An active-state underline inside a tablist is an affordance, not a stripe."],"result":null}
|
|
{"args":["Thick color band A band well past stripe thickness is a compositional block, not an accent stripe."],"result":null}
|
|
{"args":["Pure #000 background"],"result":null}
|
|
{"args":["Gray text on green background"],"result":null}
|
|
{"args":["Welcome to Our Platform The best solution for modern teams and businesses"],"result":null}
|
|
{"args":["Submit"],"result":null}
|
|
{"args":["SEV-2"],"result":null}
|
|
{"args":["text-gray-400 on bg-blue-500 — gray on color"],"result":null}
|
|
{"args":["Purple-to-indigo gradient"],"result":null}
|
|
{"args":["Should flag Pure black surfaces Pure #000 background Gray on color Gray text on blue background Gray text on green background Low contrast Light gray text on white — very low contrast Dark gray text on near-black — low contrast Welcome to Our Platform The best solution for modern teams and businesses Gradient text Gradient Heading AI color palette Purple heading text Styled <a> and <button> with low contrast Get started Submit Text-bearing chip with low contrast SEV-2 Tailwind color anti-patterns bg-black — pure black bg text-gray-400 on bg-blue-500 — gray on color text-purple-500 heading Purple-to-indigo gradient currentcolor surface via var() token Faint warm gray on a bone currentcolor surface"],"result":null}
|
|
{"args":["Near-white bg, near-black text — good contrast, tinted"],"result":null}
|
|
{"args":["Pure #fff background with dark text — acceptable contrast"],"result":null}
|
|
{"args":["Dark green text on green bg — same hue family"],"result":null}
|
|
{"args":["White text on image background — should not flag low-contrast"],"result":null}
|
|
{"args":["bg-black/50 — 50% opacity, not pure black"],"result":null}
|
|
{"args":["Read more about this if you want to learn more about the topic."],"result":null}
|
|
{"args":["High contrast pill"],"result":null}
|
|
{"args":["HEALTHY"],"result":null}
|
|
{"args":["tick"],"result":null}
|
|
{"args":["light text over the dark panel, not the light code surface"],"result":null}
|
|
{"args":["Light body copy on a faint accent glow that composites to near-black Muted secondary line on the same faint glow area here"],"result":null}
|
|
{"args":["Light copy on a faint mixed wash over a dark ground stays readable"],"result":null}
|
|
{"args":["Dark ink text on a bone currentcolor surface"],"result":null}
|
|
{"args":["Light text on an unknowable currentcolor surface"],"result":null}
|
|
{"args":["16px body, 4px padding, background only A colored background containment with only 4px padding around 16px body text. The colored edge feels like it's pressing in."],"result":null}
|
|
{"args":["12px vertical / 4px horizontal, 14px body Comfortable vertical padding can't fix horizontal text running right up against the side edges. Words feel like they're falling off the container."],"result":null}
|
|
{"args":["32px hero, 6px vertical / 16px horizontal padding Hero Section With Tight Vertical Padding"],"result":null}
|
|
{"args":["Should flag Cramped body in cards 14px body, 4px padding all sides This text is crammed against the border with only 4px padding. It feels claustrophobic and hard to read because the eye has nowhere to rest. 14px body, 2px padding all sides Two pixels of padding is essentially nothing — body text needs room to breathe inside its container, especially across multiple lines. 16px body, 4px padding, background only A colored background containment with only 4px padding around 16px body text. The colored edge feels like it's pressing in. Asymmetric cramping 1px vertical / 16px horizontal, 14px body Generous horizontal padding doesn't save you when the vertical padding is just one pixel. Lines stack on top of each other against the container edge. 12px vertical / 4px horizontal, 14px body Comfortable vertical padding can't fix horizontal text running right up against the side edges. Words feel like they're falling off the container. Currently missed: cramped large text 24px heading, 8px padding (passes the 8px floor but is too tight for the text size) Tight Heading Container Label 32px hero, 6px vertical / 16px horizontal padding Hero Section With Tight Vertical Padding Cramped multi-line code block <pre>, 2px padding, 14px monospace function example() { const value = \"cramped\"; return value; }"],"result":null}
|
|
{"args":["long inline code chip: compact inline code should not be treated like a padded card npx impeccable check"],"result":null}
|
|
{"args":["18px body, 12px padding (proportional) Larger body text gets proportionally more padding. 12px around 18px text feels balanced."],"result":null}
|
|
{"args":["multi-line <pre>, 12px padding, 14px font function example() { const value = \"comfortable\"; return value; }"],"result":null}
|
|
{"args":["form input: 16px font, 8px / 12px padding"],"result":null}
|
|
{"args":["gradients stop tripping the contrast rules when the glyph fill is transparent."],"result":null}
|
|
{"args":["The Tailwind form pairs bg-clip-text with bg-gradient-to-r on one element; the two utilities together are the tell."],"result":null}
|
|
{"args":[".status-dot { width: 8px; height: 8px; border-radius: 50%; animation: pulse 2s ease-in-out infinite; }"],"result":null}
|
|
{"args":["Edge-flush cards fixture (browser-only) body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; background: #f2f2f4; } h2 { padding: 16px 24px 0; font-size: 16px; } .scroller { width: 600px; margin: 8px 24px 24px; overflow-x: auto; display: flex; scroll-snap-type: x mandatory; background: #e4e4e8; } .panel { flex: 0 0 auto; scroll-snap-align: start; } .card { background: #fff; border-radius: 10px; height: 90px; padding: 12px; box-sizing: border-box; margin-bottom: 12px; } .plain { height: 90px; padding: 12px; box-sizing: border-box; } /* FLAG: first panel is wider than the scroller's clip box, so its cards keep a 16px left gutter but end 4px past the right clip edge. */ .flag-pager .panel-wide { width: 620px; } .flag-pager .panel-wide .card { margin-left: 16px; width: 588px; } .flag-pager .panel-ok { width: 600px; } .flag-pager .panel-ok .card { margin-left: 16px; width: 568px; } /* PASS: every panel keeps a symmetric inset. */ .pass-even .panel { width: 600px; } .pass-even .card { margin-left: 16px; width: 568px; } /* PASS: deliberate peek carousel; the third card is cut mid-card, far past the clip edge, which reads as an affordance rather than a bug. */ .pass-peek { gap: 12px; padding: 12px 0 12px 16px; } .pass-peek .card { flex: 0 0 auto; width: 260px; margin: 0; } /* PASS: flush children without card styling are plain content, not cards. */ .pass-plain .panel { width: 620px; } .pass-plain .plain { margin-left: 16px; width: 588px; }"],"result":null}
|
|
{"args":["Card cut off at the right clip edge while keeping its left gutter. Second card in the oversized panel, also flush against the edge. Sibling panel card with the intended inset on both sides."],"result":null}
|
|
{"args":["Card with an even gutter on both sides of the clip box. Second panel card, also properly inset."],"result":null}
|
|
{"args":["First peek card fully visible. Second peek card fully visible. Third card cut mid-card as a scroll affordance. Fourth card entirely off-screen."],"result":null}
|
|
{"args":["Tracking crushed pixels heading line"],"result":null}
|
|
{"args":["section: full border, padding 28px 0 0; label and pills touch the left/right border lines. Supported dev servers Vite Next.js SvelteKit Astro"],"result":null}
|
|
{"args":["card: 1px border on all sides, padding 0; heading and body touch every side."],"result":null}
|
|
{"args":["card: 1px border on all sides, padding 0; heading and body touch every side. Card flush against the borders Body copy sits flush against every visible border line."],"result":null}
|
|
{"args":["no border, but a non-transparent bg; text flush against the bg's edge counts too."],"result":null}
|
|
{"args":["no border, but a non-transparent bg; text flush against the bg's edge counts too. Title flush against the bg edge Body copy with zero padding around a colored fill."],"result":null}
|
|
{"args":["outline draws outside the box; content at the box edge sits next to the outline."],"result":null}
|
|
{"args":["outline draws outside the box; content at the box edge sits next to the outline. Title flush against the outline The outline counts as a visible boundary too."],"result":null}
|
|
{"args":["card: padding 12px 16px 12px 0; text touches the left border, other sides are inset."],"result":null}
|
|
{"args":["Should flag Border + zero side-padding section: full border, padding 28px 0 0; label and pills touch the left/right border lines. Supported dev servers Vite Next.js SvelteKit Astro All sides flush against a border card: 1px border on all sides, padding 0; heading and body touch every side. Card flush against the borders Body copy sits flush against every visible border line. Background color, zero padding no border, but a non-transparent bg; text flush against the bg's edge counts too. Title flush against the bg edge Body copy with zero padding around a colored fill. Outline (not border), zero padding outline draws outside the box; content at the box edge sits next to the outline. Title flush against the outline The outline counts as a visible boundary too. Left-side flush, other sides fine card: padding 12px 16px 12px 0; text touches the left border, other sides are inset. Title flush only on the left Padding-left zero with a full border."],"result":null}
|
|
{"args":["no bg, no border, no outline; zero padding is fine. Supported dev servers Vite Next.js SvelteKit"],"result":null}
|
|
{"args":["border-top only, padding-top 24px; no left/right border to be flush against. Supported dev servers Vite Next.js SvelteKit"],"result":null}
|
|
{"args":["card: 1px border + padding 18px 20px; comfortable inset on every side."],"result":null}
|
|
{"args":["card: 1px border + padding 18px 20px; comfortable inset on every side. Card with proper inset Body copy sits comfortably away from the borders."],"result":null}
|
|
{"args":["non-transparent bg + padding 14px 18px; content has room to breathe."],"result":null}
|
|
{"args":["non-transparent bg + padding 14px 18px; content has room to breathe. Title with inset on bg Body copy is comfortably inset from the bg edge."],"result":null}
|
|
{"args":["outline + padding 14px 18px; content is comfortably inside."],"result":null}
|
|
{"args":["outline + padding 14px 18px; content is comfortably inside. Title with inset and outline Outline boundary with proper inset works."],"result":null}
|
|
{"args":["card: padding 0, border all sides; no text means nothing can be flush."],"result":null}
|
|
{"args":["card: parent padding 0, but text children have margins that create visible inset."],"result":null}
|
|
{"args":["card: parent padding 0, but text children have margins that create visible inset. Title inset by child margin Body copy is not visually flush even though the parent has zero padding."],"result":null}
|
|
{"args":["card: parent padding 0, but an inner shell is offset from every edge. Title inset by inner shell The direct child creates the breathing room."],"result":null}
|
|
{"args":["child padding 0, but it has the same background as the parent, so no child boundary is visible. Same-surface visual shell The text belongs to the parent surface, not to a distinct zero-padding card."],"result":null}
|
|
{"args":["marquee shell clips animated cards intentionally; the cards, not the shell, own text padding. Quote card with its own comfortable padding. Another moving card, also padded inside."],"result":null}
|
|
{"args":["Blue glow box-shadow: 0 0 20px rgba(59, 130, 246, 0.4)"],"result":null}
|
|
{"args":["Purple glow box-shadow: 0 0 25px rgba(139, 92, 246, 0.35)"],"result":null}
|
|
{"args":["Cyan glow box-shadow: 0 0 15px rgba(6, 182, 212, 0.5)"],"result":null}
|
|
{"args":["Blue glow box-shadow: 0 0 20px rgba(59, 130, 246, 0.4) Purple glow box-shadow: 0 0 25px rgba(139, 92, 246, 0.35) Cyan glow box-shadow: 0 0 15px rgba(6, 182, 212, 0.5) Multi-shadow with colored glow Normal shadow + purple glow combined."],"result":null}
|
|
{"args":["Inline pink glow Inline style for regex detection path."],"result":null}
|
|
{"args":["OKLCH glow box-shadow: 0 0 18px oklch(0.72 0.15 195 / 0.5)"],"result":null}
|
|
{"args":["Hex glow box-shadow: 0 0 16px #3b82f6"],"result":null}
|
|
{"args":["HSL glow box-shadow: 0 0 22px hsl(280, 80%, 60%)"],"result":null}
|
|
{"args":["Glow via var() box-shadow: 0 0 10px var(--fixture-glow)"],"result":null}
|
|
{"args":["OKLCH glow box-shadow: 0 0 18px oklch(0.72 0.15 195 / 0.5) Hex glow box-shadow: 0 0 16px #3b82f6 HSL glow box-shadow: 0 0 22px hsl(280, 80%, 60%) Glow via var() box-shadow: 0 0 10px var(--fixture-glow) Glowing text text-shadow: 0 0 12px #22d3ee on the heading."],"result":null}
|
|
{"args":["Chromatic halo on light page box-shadow: 0 0 20px oklch(0.65 0.2 300 / 0.45)"],"result":null}
|
|
{"args":["Halo over photo background box-shadow: 0 0 26px rgba(217, 70, 239, 0.5)"],"result":null}
|
|
{"args":["Should flag CSS colored glows on dark background Blue glow box-shadow: 0 0 20px rgba(59, 130, 246, 0.4) Purple glow box-shadow: 0 0 25px rgba(139, 92, 246, 0.35) Cyan glow box-shadow: 0 0 15px rgba(6, 182, 212, 0.5) Multi-shadow with colored glow Normal shadow + purple glow combined. Inline-style glow (regex path) Inline pink glow Inline style for regex detection path. Modern color formats, var() refs, text-shadow OKLCH glow box-shadow: 0 0 18px oklch(0.72 0.15 195 / 0.5) Hex glow box-shadow: 0 0 16px #3b82f6 HSL glow box-shadow: 0 0 22px hsl(280, 80%, 60%) Glow via var() box-shadow: 0 0 10px var(--fixture-glow) Glowing text text-shadow: 0 0 12px #22d3ee on the heading. Zero-offset halo on LIGHT background Chromatic halo on light page box-shadow: 0 0 20px oklch(0.65 0.2 300 / 0.45) Zero-offset halo on unreadable (image) surface Halo over photo background box-shadow: 0 0 26px rgba(217, 70, 239, 0.5) Colored glow under an opaque gradient over an image (browser) Opaque dark gradient covers the photo box-shadow: 0 6px 22px rgba(249, 115, 22, 0.5)"],"result":null}
|
|
{"args":["Colored shadow on light background Not dark mode, colored shadow is fine."],"result":null}
|
|
{"args":["Normal gray shadow on dark card Gray/black shadow is not a glow."],"result":null}
|
|
{"args":["Focus ring (spread, no blur) Functional ring, not decorative glow."],"result":null}
|
|
{"args":["Tiny blur (<5px) Too subtle to be \"glowing\"."],"result":null}
|
|
{"args":["Small dark elevation Subtle shadow on dark card."],"result":null}
|
|
{"args":["Medium dark elevation Standard dark card shadow."],"result":null}
|
|
{"args":["Large dark elevation Prominent shadow on dark card."],"result":null}
|
|
{"args":["Inset shadow Inner shadow, not a glow."],"result":null}
|
|
{"args":["Normal gray shadow on dark card Gray/black shadow is not a glow. Focus ring (spread, no blur) Functional ring, not decorative glow. Tiny blur (<5px) Too subtle to be \"glowing\". Small dark elevation Subtle shadow on dark card. Medium dark elevation Standard dark card shadow. Large dark elevation Prominent shadow on dark card. Inset shadow Inner shadow, not a glow. Multi-shadow dark card Layered gray shadows, no color glow."],"result":null}
|
|
{"args":["Not dark enough background Medium gray doesn't qualify as \"dark mode\"."],"result":null}
|
|
{"args":["Offset colored drop shadow Real drop shadow with a color tint — not a halo."],"result":null}
|
|
{"args":["Soft neutral halo Achromatic zero-offset shadow is ambient elevation."],"result":null}
|
|
{"args":["Offset colored shadow over photo background Surface unknown, offset shadow — abstain, not flag."],"result":null}
|
|
{"args":["The wash blends with unknowable image pixels Surface unknown — abstain, never score the wash stops as dark."],"result":null}
|
|
{"args":["Offset neutral text-shadow Legibility aid, not a glow."],"result":null}
|
|
{"args":["Small elevation (Tailwind shadow-sm) Standard subtle card shadow."],"result":null}
|
|
{"args":["Medium elevation (Tailwind shadow-md) Standard card shadow."],"result":null}
|
|
{"args":["Heading rhythm fixture * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Georgia, serif; font-size: 16px; line-height: 1.5; width: 720px; } h2 { font-size: 28px; line-height: 1.2; } h3 { font-size: 20px; line-height: 1.2; } p { max-width: 60ch; } /* FLAG: zero space above the heading, clear space below it */ .flag-crowded { margin: 0 0 40px; } .flag-crowded + p { margin: 0 0 24px; } /* PASS: generous space above, tight below */ .pass-generous { margin: 64px 0 16px; } /* PASS: near-equal spacing is ambiguous, not inverted */ .pass-near-equal { margin: 20px 0 24px; } /* PASS: eyebrow label bound to the heading; real space sits above the cluster */ .pass-eyebrow-label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin: 72px 0 8px; } .pass-eyebrow-heading { margin: 0 0 24px; } /* PASS: small card, its boundary provides the separation */ .pass-card { box-shadow: 0 1px 4px rgba(0,0,0,0.2); background: #f4f4f4; padding: 16px; margin: 48px 0; width: 320px; } .pass-card h3 { margin: 0 0 20px; } /* PASS: heading first inside a banded section; the band edge separates */ .pass-band { background: #ececec; padding: 8px 0 32px; margin-top: 8px; } .pass-band h2 { margin: 0 0 24px; }"],"result":null}
|
|
{"args":["A closing paragraph of the previous block of content, sitting directly above the crowded heading with no gap at all between them."],"result":null}
|
|
{"args":["Another closing paragraph of a previous content block, again flush against the heading that follows it in the document flow."],"result":null}
|
|
{"args":["A third closing paragraph that the next heading will visually attach to, which is exactly the inversion this rule measures."],"result":null}
|
|
{"args":["Third crowded case, this time an h3, to confirm the rule reads h2 through h4."],"result":null}
|
|
{"args":["Sixty-four pixels above and sixteen below. The heading clearly binds to this paragraph, which is the healthy shape."],"result":null}
|
|
{"args":["Chapter Four"],"result":null}
|
|
{"args":["The tiny label above belongs to the heading cluster. Space is measured from the top of the cluster, where seventy-two pixels separate it from this text."],"result":null}
|
|
{"args":["Pass Card Heading A heading inside a small card. The card boundary provides the separation, so the rule exempts headings inside panels shorter than two hundred pixels."],"result":null}
|
|
{"args":["Should flag AI-NATIVE WORKFLOWS Eyebrow Above Hero Classic uppercase tracked div eyebrow above an 88px hero. NEW IN 2026 Span Eyebrow Above Hero Span variant with the same uppercase + tracking + small-size shape. FEATURED Pill Chip Above Hero Pill-shaped chip with background, border-radius, padding. NEW Already Uppercase Text Text typed uppercase, no text-transform, but matching tracking and size. A VERY LONG UPPERCASE TABLE OF CONTENTS HEADER Long Uppercase Sentence Above Hero 46-char uppercase tracked label — under the 60-char eyebrow ceiling, so it still reads as an oversized eyebrow."],"result":null}
|
|
{"args":["Hero With No Eyebrow Bare h1 at 64px, nothing above it."],"result":null}
|
|
{"args":[""],"result":null}
|
|
{"args":["⚡"],"result":null}
|
|
{"args":["Should flag Lightning Fast Built for speed and performance from the ground up. Secure Storage Enterprise-grade security for your peace of mind. Easy Setup Get started in minutes with zero configuration. Powerful Analytics Insights that drive smarter business decisions. ⚡ Emoji Inline Icon The tile contains an emoji directly, no SVG child."],"result":null}
|
|
{"args":["Inline Side By Side Icon sits next to the heading, not above it."],"result":null}
|
|
{"args":["Should flag Fraunces 88px italic The Lumina hero pattern: oversized Fraunces italic display. Recoleta 64px italic Recoleta italic at 64px, generic serif fallback. Playfair 72px italic Playfair Display italic at hero scale. Unknown Serif Generic Fallback Primary font unknown to the detector, but the stack ends in generic serif."],"result":null}
|
|
{"args":["Inline Em Inside Roman Roman h1 with an inline italic em — v1 deliberately does not flag this."],"result":null}
|
|
{"args":["Invitation protocol"],"result":null}
|
|
{"args":["Output model"],"result":null}
|
|
{"args":["Preview sequence"],"result":null}
|
|
{"args":["Access window"],"result":null}
|
|
{"args":["materials briefing"],"result":null}
|
|
{"args":["Home / Journal / Archive"],"result":null}
|
|
{"args":["News · Jan 12, 2026"],"result":null}
|
|
{"args":["Section 4.2"],"result":null}
|
|
{"args":["§ 12.3"],"result":null}
|
|
{"args":["Next from"],"result":null}
|
|
{"args":["Home Docs \"Page Title After Nav\" A navigation landmark preceding the page title is chrome, not a kicker."],"result":null}
|
|
{"args":["A quiet lead-in sentence"],"result":null}
|
|
{"args":["New arrivals"],"result":null}
|
|
{"args":["Outer Card Inner Card Card inside card."],"result":null}
|
|
{"args":["Level 1 Level 2 Level 3 — nesting inception."],"result":null}
|
|
{"args":["Outer (CSS) Inner card via CSS."],"result":null}
|
|
{"args":["Should flag Nested cards (cardocalypse) Outer Card Inner Card Card inside card. Level 1 Level 2 Level 3 — nesting inception. Outer (CSS) Inner card via CSS. shadcn-style Outer Card Another shadcn Card nested inside."],"result":null}
|
|
{"args":["Card Title Card description goes here. CardContent — a sub-section, not a nested card. No shadow, no border-radius of its own. Action"],"result":null}
|
|
{"args":["Settings Select option"],"result":null}
|
|
{"args":["Installation npm install @acme/sdk"],"result":null}
|
|
{"args":["Tags React TypeScript Tailwind"],"result":null}
|
|
{"args":["Project Preview Image with rounded corners and shadow."],"result":null}
|
|
{"args":["Free $0"],"result":null}
|
|
{"args":["Pro $29"],"result":null}
|
|
{"args":["Every border here is a well-established web pattern. None should be flagged."],"result":null}
|
|
{"args":["\"Design is not just what it looks like and feels like. Design is how it works.\""],"result":null}
|
|
{"args":["Dashboard Projects Settings"],"result":null}
|
|
{"args":["Email Please enter a valid email address."],"result":null}
|
|
{"args":["Order placed March 15, 2026 Shipped March 16, 2026 Delivered Expected March 18"],"result":null}
|
|
{"args":["- const old = getValue(); + const value = getNewValue(); return value;"],"result":null}
|
|
{"args":["Overview Analytics Settings"],"result":null}
|
|
{"args":["Name Revenue Acme Corp$1.2M Globex$850K"],"result":null}
|
|
{"args":["External side-tab class border-left plus border-radius from a linked stylesheet."],"result":null}
|
|
{"args":["Should flag External side-tab class border-left plus border-radius from a linked stylesheet. External top accent class border-top plus border-radius from a linked stylesheet."],"result":null}
|
|
{"args":["External clean card Uniform 1px border from the linked stylesheet."],"result":null}
|
|
{"args":["External neutral side rule Thick side border, but the color is structural gray."],"result":null}
|
|
{"args":["oklch checklistoklch border-left 3px + radius"],"result":null}
|
|
{"args":["oklch medication cardneutral all + colored left 4px"],"result":null}
|
|
{"args":["oklch alertwarm border-left 4px + radius"],"result":null}
|
|
{"args":["oklab cardoklab border-left 4px + radius"],"result":null}
|
|
{"args":["lch cardlch border-left 4px + radius"],"result":null}
|
|
{"args":["Card-shaped label with rgb side border"],"result":null}
|
|
{"args":["var() shorthandborder-left 5px + var(--brand)"],"result":null}
|
|
{"args":["var() mixedneutral all + colored var left"],"result":null}
|
|
{"args":["Should flag oklch checklistoklch border-left 3px + radius oklch medication cardneutral all + colored left 4px oklch alertwarm border-left 4px + radius oklab cardoklab border-left 4px + radius lch cardlch border-left 4px + radius lab cardlab border-left 4px + radius Card-shaped label with oklch side border Card-shaped label with rgb side border var() shorthandborder-left 5px + var(--brand) var() mixedneutral all + colored var left var() right sideborder-right 4px + var(--terracotta) Card-shaped label with var() side border"],"result":null}
|
|
{"args":["oklch neutralchroma 0 gray"],"result":null}
|
|
{"args":["oklch near-neutralchroma 0.01"],"result":null}
|
|
{"args":["oklch all sidesuniform border"],"result":null}
|
|
{"args":["oklch thin1px too thin"],"result":null}
|
|
{"args":["lab neutralchroma 0"],"result":null}
|
|
{"args":["Label with 1px colored left border (too thin)"],"result":null}
|
|
{"args":["var() neutral--line resolves to gray"],"result":null}
|
|
{"args":["var() thin1px too thin to qualify"],"result":null}
|
|
{"args":["var() all sidesuniform, not a side-tab"],"result":null}
|
|
{"args":["CSS bounce animation animation: bounce 1s infinite"],"result":null}
|
|
{"args":["Elastic cubic-bezier cubic-bezier(0.68, -0.55, 0.265, 1.55)"],"result":null}
|
|
{"args":["transition: width Animating width causes layout thrash."],"result":null}
|
|
{"args":["transition: height Animating height causes layout thrash."],"result":null}
|
|
{"args":["transition: padding Animating padding causes layout thrash."],"result":null}
|
|
{"args":["transition: margin Animating margin causes layout thrash."],"result":null}
|
|
{"args":["transition: max-height Use grid-template-rows instead."],"result":null}
|
|
{"args":["transition: width, height Multiple layout properties."],"result":null}
|
|
{"args":["transition: width, opacity Layout property mixed with OK property."],"result":null}
|
|
{"args":["Should flag Bounce / elastic easing CSS bounce animation animation: bounce 1s infinite Elastic cubic-bezier cubic-bezier(0.68, -0.55, 0.265, 1.55) Layout property transitions transition: width Animating width causes layout thrash. transition: height Animating height causes layout thrash. transition: padding Animating padding causes layout thrash. transition: margin Animating margin causes layout thrash. transition: max-height Use grid-template-rows instead. transition: width, height Multiple layout properties. transition: width, opacity Layout property mixed with OK property. transition-property: width Longhand form."],"result":null}
|
|
{"args":["Smooth fade in animation: fadeIn with exponential ease-out"],"result":null}
|
|
{"args":["Ease-out quart cubic-bezier(0.25, 1, 0.5, 1) — smooth deceleration"],"result":null}
|
|
{"args":["Ease-out expo cubic-bezier(0.16, 1, 0.3, 1) — natural feel"],"result":null}
|
|
{"args":["transition: transform Transform is GPU-accelerated and safe."],"result":null}
|
|
{"args":["transition: opacity Opacity is GPU-accelerated and safe."],"result":null}
|
|
{"args":["transition: color, background-color Color transitions are paint-only, no layout."],"result":null}
|
|
{"args":["transition: box-shadow Shadow transitions are paint-only."],"result":null}
|
|
{"args":["transition: all Too common to flag — usually paired with transform/opacity."],"result":null}
|
|
{"args":["named purpleborder-left 4px solid purple + radius"],"result":null}
|
|
{"args":["rebeccapurpleborder-left 4px + radius"],"result":null}
|
|
{"args":["crimson top stripeborder-top 4px, horizontal variant"],"result":null}
|
|
{"args":["named tealborder-left 3px, no radius"],"result":null}
|
|
{"args":["var() to namedborder-left 4px solid var(--accent)"],"result":null}
|
|
{"args":["Should flag named purpleborder-left 4px solid purple + radius rebeccapurpleborder-left 4px + radius crimson top stripeborder-top 4px, horizontal variant named tealborder-left 3px, no radius var() to namedborder-left 4px solid var(--accent) inline named purplestyle attribute, issue #359 case (a); width 7px keeps the snippet unique"],"result":null}
|
|
{"args":["dimgrayneutral named color"],"result":null}
|
|
{"args":["gainsborolight neutral named color"],"result":null}
|
|
{"args":["named blackneutral side border"],"result":null}
|
|
{"args":["1px purpletoo thin to qualify"],"result":null}
|
|
{"args":["01"],"result":{"index":1,"text":"01"}}
|
|
{"args":["02"],"result":{"index":2,"text":"02"}}
|
|
{"args":["03"],"result":{"index":3,"text":"03"}}
|
|
{"args":["04 / ROLLOUT"],"result":{"index":4,"text":"04 / ROLLOUT"}}
|
|
{"args":["05"],"result":{"index":5,"text":"05"}}
|
|
{"args":["12 · minute read"],"result":{"index":12,"text":"12 · minute read"}}
|
|
{"args":["Step 6"],"result":null}
|
|
{"args":["7"],"result":null}
|
|
{"args":["Readable date Updated June 14, 2026."],"result":null}
|
|
{"args":["Statistic cards Revenue grew 18%, margin reached 24%, and churn fell to 3%."],"result":null}
|
|
{"args":["CSS generated content Generated numbers in CSS should not count as body copy."],"result":null}
|
|
{"args":["Inline SVG coordinates"],"result":null}
|
|
{"args":["Each scenario places a detectable anti-pattern inside a layout context that can cause overlay misalignment."],"result":null}
|
|
{"args":["1e. Transform + absolute child Absolutely positioned tiny text inside transformed parent."],"result":null}
|
|
{"args":["2d. Transform inside closed details Closed with transform inside Tiny text inside transform inside closed details. Double trouble."],"result":null}
|
|
{"args":["Tiny text in a fixed footer -- overlay should track this on scroll."],"result":null}
|
|
{"args":["4b. overflow:hidden + transform ancestor Visible inside transform + overflow. Clipped tiny text inside a transformed overflow:hidden container."],"result":null}
|
|
{"args":["5c. Negative top offset Tiny text pulled upward via negative top offset."],"result":null}
|
|
{"args":["6c. Flex with transform AI Gradient Button in Flex + Transform"],"result":null}
|
|
{"args":["7d. backdrop-filter Tiny text inside a backdrop-filter container."],"result":null}
|
|
{"args":["8a. Negative margin shifting element position Tiny text pulled out of its parent via negative margins."],"result":null}
|
|
{"args":["Panel"],"result":null}
|
|
{"args":["no max-width on a paragraph This paragraph has no max-width constraint at all, which means on a wide monitor or ultrawide display, each line of text can stretch to 150 or even 200 characters wide. Research consistently shows that line lengths beyond 75 characters significantly reduce reading speed and comprehension. The eye has to travel too far to find the beginning of the next line, causing readers to lose their place. A simple max-width of 65ch to 75ch on the paragraph or its container would fix this entirely."],"result":null}
|
|
{"args":["line-height: 1.0 This paragraph has a line-height of 1.0, which means the lines are touching. Multi-line body text needs breathing room between lines for readability. A line-height of 1.5 to 1.7 is generally recommended for body text."],"result":null}
|
|
{"args":["10px body text This body text is only 10px. While this might be fine for a disclaimer or legal footnote, it's too small for primary content that users need to actually read. Aim for at least 14px for body content, 16px is ideal."],"result":null}
|
|
{"args":["text-align: justify, no hyphens: auto This paragraph uses text-align: justify, which forces each line to stretch to fill the full width. Without hyphenation support, this creates uneven gaps between words known as \"rivers of white space\" that flow vertically through the text. Left-aligned text is almost always more readable on the web."],"result":null}
|
|
{"args":["text-transform: uppercase on a long passage This entire paragraph is in uppercase via text-transform. While all-caps works for short labels, headings, or navigation items, longer body text in uppercase is significantly harder to read because we lose the word shape cues that come from ascenders and descenders in mixed-case text."],"result":null}
|
|
{"args":["letter-spacing: 0.15em on body text This body text has letter-spacing: 0.15em applied to it. While subtle tracking adjustments can improve readability for headings or all-caps text, adding significant letter spacing to body text actually makes it harder to read by disrupting natural character groupings."],"result":null}
|
|
{"args":["Should flag Line length too long no max-width on a paragraph This paragraph has no max-width constraint at all, which means on a wide monitor or ultrawide display, each line of text can stretch to 150 or even 200 characters wide. Research consistently shows that line lengths beyond 75 characters significantly reduce reading speed and comprehension. The eye has to travel too far to find the beginning of the next line, causing readers to lose their place. A simple max-width of 65ch to 75ch on the paragraph or its container would fix this entirely. Tight line height line-height: 1.0 This paragraph has a line-height of 1.0, which means the lines are touching. Multi-line body text needs breathing room between lines for readability. A line-height of 1.5 to 1.7 is generally recommended for body text. Tiny body text 10px body text This body text is only 10px. While this might be fine for a disclaimer or legal footnote, it's too small for primary content that users need to actually read. Aim for at least 14px for body content, 16px is ideal. Justified text without hyphens text-align: justify, no hyphens: auto This paragraph uses text-align: justify, which forces each line to stretch to fill the full width. Without hyphenation support, this creates uneven gaps between words known as \"rivers of white space\" that flow vertically through the text. Left-aligned text is almost always more readable on the web. All-caps body text text-transform: uppercase on a long passage This entire paragraph is in uppercase via text-transform. While all-caps works for short labels, headings, or navigation items, longer body text in uppercase is significantly harder to read because we lose the word shape cues that come from ascenders and descenders in mixed-case text. Wide letter spacing on body text letter-spacing: 0.15em on body text This body text has letter-spacing: 0.15em applied to it. While subtle tracking adjustments can improve readability for headings or all-caps text, adding significant letter spacing to body text actually makes it harder to read by disrupting natural character groupings. Skipped heading levels h1 → h3 (missing h2) Top heading Skips straight to h3"],"result":null}
|
|
{"args":["max-width: 65ch on the paragraph This paragraph has a max-width of 65ch, keeping the line length comfortable for reading. The eye can easily track from the end of one line to the beginning of the next without losing its place."],"result":null}
|
|
{"args":["line-height: 1.6 This paragraph has a line-height of 1.6, which gives multi-line text plenty of room to breathe and improves the rhythm of the page."],"result":null}
|
|
{"args":["16px body text This is 16px body text — the recommended baseline for comfortable reading on modern displays."],"result":null}
|
|
{"args":["text-align: justify + hyphens: auto When justified text is paired with hyphens: auto, the browser can break long words across lines, eliminating the rivers of white space and making the justification look intentional rather than awkward."],"result":null}
|
|
{"args":["short label, uppercase Featured"],"result":null}
|
|
{"args":["letter-spacing on a short uppercase label Beta"],"result":null}
|
|
{"args":["h1 → h2 → h3 Top heading Second level Third level"],"result":null}
|
|
{"args":["Museumplein departure Suspended Suspended This service is Suspended until further notice."],"result":null}
|
|
{"args":["Evening show Unavailable Unavailable Unavailable Currently Unavailable at this venue."],"result":null}
|
|
{"args":["Deploy history build 12Rolled back build 13Rolled back build 14Rolled back"],"result":null}
|
|
{"args":["Departures On schedule On schedule On schedule"],"result":null}
|
|
{"args":["Sections Overview page Overview page Overview page"],"result":null}
|
|
{"args":["Toggles Off Off Off"],"result":null}
|
|
{"args":["Standby mode"],"result":null}
|
|
{"args":["Availability Open slot Open slot Open slot"],"result":null}
|
|
{"args":["Template content never renders and never counts."],"result":null}
|
|
{"args":["First revealed section This block starts at opacity zero, exactly like a broken page would, but its IntersectionObserver is alive. During the sweep it gains the in-view class and transitions to full opacity, so the post-sweep measurement sees it as visible."],"result":null}
|
|
{"args":["Second revealed section More reveal-on-scroll copy that carries a meaningful share of the page's character count. If the sweep or the exclusion rules regress, this fixture is the page that starts producing a false content-hidden-at-rest finding."],"result":null}
|
|
{"args":["The opening paragraph renders normally, exactly like the real broken sample: the first viewport looks fine while everything below it never appears."],"result":null}
|
|
{"args":["First hidden section This block waits for an IntersectionObserver that will never construct, because the single script tag below fails to parse. Its text ships in the document but the reveal class never lands, so the reader scrolls through blank space."],"result":null}
|
|
{"args":["Second hidden section More shipped-but-invisible copy. Together the hidden sections carry well over thirty percent of the character count of the page, which is the failed-reveal signature this fixture exists to reproduce for the detector tests."],"result":null}
|
|
{"args":["Every example on this page should be detected by the anti-pattern scanner."],"result":null}
|
|
{"args":["border-l-4 + rounded-r The classic AI tell."],"result":null}
|
|
{"args":["border-r-4 + rounded-l Right side variant."],"result":null}
|
|
{"args":["border-l-4 + rounded-r The classic AI tell. border-r-4 + rounded-l Right side variant. border-e-8 + rounded-l Logical inline-end, extra thick."],"result":null}
|
|
{"args":["border-left: 4px solid CSS shorthand."],"result":null}
|
|
{"args":["border-right: 5px solid CSS shorthand right."],"result":null}
|
|
{"args":["border-left-width: 3px CSS longhand."],"result":null}
|
|
{"args":["border-left: 4px solid CSS shorthand. border-right: 5px solid CSS shorthand right. border-left-width: 3px CSS longhand. border-right-width: 6px CSS longhand right."],"result":null}
|
|
{"args":["border-t-4 + rounded-lg Top accent on rounded card."],"result":null}
|
|
{"args":["border-b-4 + rounded-xl Bottom accent on rounded card."],"result":null}
|
|
{"args":["border-t-2 + rounded-md Even thin top border on rounded."],"result":null}
|
|
{"args":["CSS border-top + border-radius Top border from style block."],"result":null}
|
|
{"args":["border-t-4 + rounded-lg Top accent on rounded card. border-b-4 + rounded-xl Bottom accent on rounded card. border-t-2 + rounded-md Even thin top border on rounded. CSS border-top + border-radius Top border from style block. CSS border-bottom + border-radius Bottom border from style block."],"result":null}
|
|
{"args":["Dark card + border-l-4 + rounded Dark background doesn't make the side-tab OK."],"result":null}
|
|
{"args":["Dark card + border-t-2 + rounded Top accent on dark rounded card."],"result":null}
|
|
{"args":["None of these should be flagged. They're all intentional, well-established web patterns."],"result":null}
|
|
{"args":["Full border card Subtle 1px border all around. Clean and intentional."],"result":null}
|
|
{"args":["Top border, no radius A hairline top rule without rounded corners is a clean section divider."],"result":null}
|
|
{"args":["New"],"result":null}
|
|
{"args":["Full border card Subtle 1px border all around. Clean and intentional. Top border, no radius A hairline top rule without rounded corners is a clean section divider. Bottom border, no radius Bottom accent without rounded corners is also clean. New No border at all Just a shadow. Simple and effective."],"result":null}
|
|
{"args":["border-left: 1px solid, no radius — not flagged border-right: 2px solid, no radius — not flagged 1px inline border-left, no radius — not flagged"],"result":null}
|
|
{"args":["Dark card, full border Uniform 1px border all around. Clean."],"result":null}
|
|
{"args":["Dark section, bottom border, no radius Bottom accent without radius is fine."],"result":null}
|
|
{"args":["This page triggers three typography detections:"],"result":null}
|
|
{"args":["Inter is loaded from Google Fonts and set as the only font-family. It's the most common AI default."],"result":null}
|
|
{"args":["There's no second font for headings or display text. Everything uses Inter — no typographic variety."],"result":null}
|
|
{"args":["This caption is barely distinguishable from body text."],"result":null}
|
|
{"args":["This page uses distinctive fonts, proper pairing, and strong hierarchy."],"result":null}
|
|
{"args":["Newsreader (serif) for headings, Karla for body. Clear contrast in both structure and personality, and neither face has been adopted into the current AI-default monoculture."],"result":null}
|
|
{"args":["Should flag Typography Anti-Patterns This side uses element-level typography failures that can be highlighted directly in the detector lab. Tight Leading This paragraph has a line-height that is too tight for body copy. The lines press into each other and make scanning harder, especially once the text wraps across multiple lines in a production layout. Tiny Body Text This body text is set at 10px, which is too small for real reading content and should be reserved for neither primary copy nor explanatory product text. All-Caps Body This entire paragraph is transformed to uppercase, which removes useful word shapes and makes longer body copy feel like a shout instead of a readable passage. Wide Tracking This paragraph spreads every letter apart, a treatment that belongs on short labels at most, not on body copy that people need to read comfortably. Justified Text This paragraph uses justified alignment without automatic hyphenation. In narrow columns it creates uneven word spacing and distracting rivers through the text block. Overused Font Inter is also the dominant face on this side of the page, so the browser page-level detector has enough real text elements to show the global overused-font banner."],"result":null}
|
|
{"args":["Should flag Flag Nav Link Flag Category Flag Meta Row Flag Button Flag Table Cell Flag Caps Label Flag Footer Link"],"result":null}
|
|
{"args":["Should flag after pixel sampling White text on light image should be sampled by pixel contrast. Dark text on dark image should be sampled by pixel contrast. Translucent white text on a pale pattern should use rendered pixels. Muted gray text on a misty image should be sampled by pixel contrast."],"result":null}
|
|
{"args":["Every example on this page should be detected by the anti-pattern scanner."],"result":null}
|
|
{"args":["border-l-4 + rounded-r The classic AI tell."],"result":null}
|
|
{"args":["border-r-4 + rounded-l Right side variant."],"result":null}
|
|
{"args":["border-l-4 + rounded-r The classic AI tell. border-r-4 + rounded-l Right side variant. border-e-8 + rounded-l Logical inline-end, extra thick."],"result":null}
|
|
{"args":["border-left: 4px solid CSS shorthand."],"result":null}
|
|
{"args":["border-right: 5px solid CSS shorthand right."],"result":null}
|
|
{"args":["border-left-width: 3px CSS longhand."],"result":null}
|
|
{"args":["border-left: 4px solid CSS shorthand. border-right: 5px solid CSS shorthand right. border-left-width: 3px CSS longhand. border-right-width: 6px CSS longhand right."],"result":null}
|
|
{"args":["border-t-4 + rounded-lg Top accent on rounded card."],"result":null}
|
|
{"args":["border-b-4 + rounded-xl Bottom accent on rounded card."],"result":null}
|
|
{"args":["border-t-2 + rounded-md Even thin top border on rounded."],"result":null}
|
|
{"args":["CSS border-top + border-radius Top border from style block."],"result":null}
|
|
{"args":["border-t-4 + rounded-lg Top accent on rounded card. border-b-4 + rounded-xl Bottom accent on rounded card. border-t-2 + rounded-md Even thin top border on rounded. CSS border-top + border-radius Top border from style block. CSS border-bottom + border-radius Bottom border from style block."],"result":null}
|
|
{"args":["Dark card + border-l-4 + rounded Dark background doesn't make the side-tab OK."],"result":null}
|
|
{"args":["Dark card + border-t-2 + rounded Top accent on dark rounded card."],"result":null}
|
|
{"args":["None of these should be flagged. They're all intentional, well-established web patterns."],"result":null}
|
|
{"args":["Full border card Subtle 1px border all around. Clean and intentional."],"result":null}
|
|
{"args":["Top border, no radius A hairline top rule without rounded corners is a clean section divider."],"result":null}
|
|
{"args":["New"],"result":null}
|
|
{"args":["Full border card Subtle 1px border all around. Clean and intentional. Top border, no radius A hairline top rule without rounded corners is a clean section divider. Bottom border, no radius Bottom accent without rounded corners is also clean. New No border at all Just a shadow. Simple and effective."],"result":null}
|
|
{"args":["border-left: 1px solid, no radius — not flagged border-right: 2px solid, no radius — not flagged 1px inline border-left, no radius — not flagged"],"result":null}
|
|
{"args":["Dark card, full border Uniform 1px border all around. Clean."],"result":null}
|
|
{"args":["Dark section, bottom border, no radius Bottom accent without radius is fine."],"result":null}
|
|
{"args":["Rounded card with colored left border Classic side tab: border-left is thick, colored, and paired with rounded corners."],"result":null}
|
|
{"args":["Rounded card with colored right border The right-side version is the same visual trope mirrored."],"result":null}
|
|
{"args":["Thick colored side border without radius A thick chromatic side stripe still reads as a tab even without rounded corners."],"result":null}
|
|
{"args":["Rounded card with top accent border A heavy top accent on a rounded card is the horizontal variant of the same pattern."],"result":null}
|
|
{"args":["Rounded card with bottom accent border The bottom accent is also a decorative stripe on a card surface."],"result":null}
|
|
{"args":["Should flag Rounded card with colored left border Classic side tab: border-left is thick, colored, and paired with rounded corners. Rounded card with colored right border The right-side version is the same visual trope mirrored. Thick colored side border without radius A thick chromatic side stripe still reads as a tab even without rounded corners. Rounded card with top accent border A heavy top accent on a rounded card is the horizontal variant of the same pattern. Rounded card with bottom accent border The bottom accent is also a decorative stripe on a card surface. Dark card with bright side stripe Dark surfaces can hide the cliche, but the thick colored side stripe remains."],"result":null}
|
|
{"args":["Uniform full border A quiet all-around border frames the card instead of creating a side tab."],"result":null}
|
|
{"args":["Neutral structural side rule A gray structural rule can be a legitimate divider when it is not chromatic emphasis."],"result":null}
|
|
{"args":["Thin colored side rule A 1px colored rule is below the decorative side-tab threshold."],"result":null}
|
|
{"args":["Status toast with severity accent A live status region carries a colored side bar as a severity accent, not a decorative side tab."],"result":null}
|
|
{"args":["Square top border A chromatic top stripe on a card is the horizontal variant of the side tab."],"result":null}
|
|
{"args":["Selected tab underline An active-state underline inside a tablist is an affordance, not a stripe."],"result":null}
|
|
{"args":["Thick color band A band well past stripe thickness is a compositional block, not an accent stripe."],"result":null}
|
|
{"args":["External side-tab class border-left plus border-radius from a linked stylesheet."],"result":null}
|
|
{"args":["Should flag External side-tab class border-left plus border-radius from a linked stylesheet. External top accent class border-top plus border-radius from a linked stylesheet."],"result":null}
|
|
{"args":["External clean card Uniform 1px border from the linked stylesheet."],"result":null}
|
|
{"args":["External neutral side rule Thick side border, but the color is structural gray."],"result":null}
|
|
{"args":["Pure #000 background"],"result":null}
|
|
{"args":["Gray text on green background"],"result":null}
|
|
{"args":["Welcome to Our Platform The best solution for modern teams and businesses"],"result":null}
|
|
{"args":["Submit"],"result":null}
|
|
{"args":["SEV-2"],"result":null}
|
|
{"args":["text-gray-400 on bg-blue-500 — gray on color"],"result":null}
|
|
{"args":["Purple-to-indigo gradient"],"result":null}
|
|
{"args":["Should flag Pure black surfaces Pure #000 background Gray on color Gray text on blue background Gray text on green background Low contrast Light gray text on white — very low contrast Dark gray text on near-black — low contrast Welcome to Our Platform The best solution for modern teams and businesses Gradient text Gradient Heading AI color palette Purple heading text Styled <a> and <button> with low contrast Get started Submit Text-bearing chip with low contrast SEV-2 Tailwind color anti-patterns bg-black — pure black bg text-gray-400 on bg-blue-500 — gray on color text-purple-500 heading Purple-to-indigo gradient currentcolor surface via var() token Faint warm gray on a bone currentcolor surface"],"result":null}
|
|
{"args":["Near-white bg, near-black text — good contrast, tinted"],"result":null}
|
|
{"args":["Pure #fff background with dark text — acceptable contrast"],"result":null}
|
|
{"args":["Dark green text on green bg — same hue family"],"result":null}
|
|
{"args":["White text on image background — should not flag low-contrast"],"result":null}
|
|
{"args":["bg-black/50 — 50% opacity, not pure black"],"result":null}
|
|
{"args":["Read more about this if you want to learn more about the topic."],"result":null}
|
|
{"args":["High contrast pill"],"result":null}
|
|
{"args":["HEALTHY"],"result":null}
|
|
{"args":["tick"],"result":null}
|
|
{"args":["light text over the dark panel, not the light code surface"],"result":null}
|
|
{"args":["Light body copy on a faint accent glow that composites to near-black Muted secondary line on the same faint glow area here"],"result":null}
|
|
{"args":["Light copy on a faint mixed wash over a dark ground stays readable"],"result":null}
|
|
{"args":["Dark ink text on a bone currentcolor surface"],"result":null}
|
|
{"args":["Light text on an unknowable currentcolor surface"],"result":null}
|
|
{"args":["Every border here is a well-established web pattern. None should be flagged."],"result":null}
|
|
{"args":["\"Design is not just what it looks like and feels like. Design is how it works.\""],"result":null}
|
|
{"args":["Dashboard Projects Settings"],"result":null}
|
|
{"args":["Email Please enter a valid email address."],"result":null}
|
|
{"args":["Order placed March 15, 2026 Shipped March 16, 2026 Delivered Expected March 18"],"result":null}
|
|
{"args":["- const old = getValue(); + const value = getNewValue(); return value;"],"result":null}
|
|
{"args":["Overview Analytics Settings"],"result":null}
|
|
{"args":["Name Revenue Acme Corp$1.2M Globex$850K"],"result":null}
|
|
{"args":["oklch checklistoklch border-left 3px + radius"],"result":null}
|
|
{"args":["oklch medication cardneutral all + colored left 4px"],"result":null}
|
|
{"args":["oklch alertwarm border-left 4px + radius"],"result":null}
|
|
{"args":["oklab cardoklab border-left 4px + radius"],"result":null}
|
|
{"args":["lch cardlch border-left 4px + radius"],"result":null}
|
|
{"args":["Card-shaped label with rgb side border"],"result":null}
|
|
{"args":["var() shorthandborder-left 5px + var(--brand)"],"result":null}
|
|
{"args":["var() mixedneutral all + colored var left"],"result":null}
|
|
{"args":["Should flag oklch checklistoklch border-left 3px + radius oklch medication cardneutral all + colored left 4px oklch alertwarm border-left 4px + radius oklab cardoklab border-left 4px + radius lch cardlch border-left 4px + radius lab cardlab border-left 4px + radius Card-shaped label with oklch side border Card-shaped label with rgb side border var() shorthandborder-left 5px + var(--brand) var() mixedneutral all + colored var left var() right sideborder-right 4px + var(--terracotta) Card-shaped label with var() side border"],"result":null}
|
|
{"args":["oklch neutralchroma 0 gray"],"result":null}
|
|
{"args":["oklch near-neutralchroma 0.01"],"result":null}
|
|
{"args":["oklch all sidesuniform border"],"result":null}
|
|
{"args":["oklch thin1px too thin"],"result":null}
|
|
{"args":["lab neutralchroma 0"],"result":null}
|
|
{"args":["Label with 1px colored left border (too thin)"],"result":null}
|
|
{"args":["var() neutral--line resolves to gray"],"result":null}
|
|
{"args":["var() thin1px too thin to qualify"],"result":null}
|
|
{"args":["var() all sidesuniform, not a side-tab"],"result":null}
|
|
{"args":["named purpleborder-left 4px solid purple + radius"],"result":null}
|
|
{"args":["rebeccapurpleborder-left 4px + radius"],"result":null}
|
|
{"args":["crimson top stripeborder-top 4px, horizontal variant"],"result":null}
|
|
{"args":["named tealborder-left 3px, no radius"],"result":null}
|
|
{"args":["var() to namedborder-left 4px solid var(--accent)"],"result":null}
|
|
{"args":["Should flag named purpleborder-left 4px solid purple + radius rebeccapurpleborder-left 4px + radius crimson top stripeborder-top 4px, horizontal variant named tealborder-left 3px, no radius var() to namedborder-left 4px solid var(--accent) inline named purplestyle attribute, issue #359 case (a); width 7px keeps the snippet unique"],"result":null}
|
|
{"args":["dimgrayneutral named color"],"result":null}
|
|
{"args":["gainsborolight neutral named color"],"result":null}
|
|
{"args":["named blackneutral side border"],"result":null}
|
|
{"args":["1px purpletoo thin to qualify"],"result":null}
|
|
{"args":["This page triggers three typography detections:"],"result":null}
|
|
{"args":["Inter is loaded from Google Fonts and set as the only font-family. It's the most common AI default."],"result":null}
|
|
{"args":["There's no second font for headings or display text. Everything uses Inter — no typographic variety."],"result":null}
|
|
{"args":["This caption is barely distinguishable from body text."],"result":null}
|
|
{"args":["Should flag Typography Anti-Patterns This side uses element-level typography failures that can be highlighted directly in the detector lab. Tight Leading This paragraph has a line-height that is too tight for body copy. The lines press into each other and make scanning harder, especially once the text wraps across multiple lines in a production layout. Tiny Body Text This body text is set at 10px, which is too small for real reading content and should be reserved for neither primary copy nor explanatory product text. All-Caps Body This entire paragraph is transformed to uppercase, which removes useful word shapes and makes longer body copy feel like a shout instead of a readable passage. Wide Tracking This paragraph spreads every letter apart, a treatment that belongs on short labels at most, not on body copy that people need to read comfortably. Justified Text This paragraph uses justified alignment without automatic hyphenation. In narrow columns it creates uneven word spacing and distracting rivers through the text block. Overused Font Inter is also the dominant face on this side of the page, so the browser page-level detector has enough real text elements to show the global overused-font banner."],"result":null}
|
|
{"args":["This page uses distinctive fonts, proper pairing, and strong hierarchy."],"result":null}
|
|
{"args":["Newsreader (serif) for headings, Karla for body. Clear contrast in both structure and personality, and neither face has been adopted into the current AI-default monoculture."],"result":null}
|
|
{"args":["Readable date Updated June 14, 2026."],"result":null}
|
|
{"args":["Statistic cards Revenue grew 18%, margin reached 24%, and churn fell to 3%."],"result":null}
|
|
{"args":["CSS generated content Generated numbers in CSS should not count as body copy."],"result":null}
|
|
{"args":["Inline SVG coordinates"],"result":null}
|
|
{"args":["01"],"result":{"index":1,"text":"01"}}
|
|
{"args":["02"],"result":{"index":2,"text":"02"}}
|
|
{"args":["03"],"result":{"index":3,"text":"03"}}
|
|
{"args":["04 / ROLLOUT"],"result":{"index":4,"text":"04 / ROLLOUT"}}
|
|
{"args":["05"],"result":{"index":5,"text":"05"}}
|
|
{"args":["12 · minute read"],"result":{"index":12,"text":"12 · minute read"}}
|
|
{"args":["Step 6"],"result":null}
|
|
{"args":["7"],"result":null}
|
|
{"args":["Museumplein departure Suspended Suspended This service is Suspended until further notice."],"result":null}
|
|
{"args":["Evening show Unavailable Unavailable Unavailable Currently Unavailable at this venue."],"result":null}
|
|
{"args":["Deploy history build 12Rolled back build 13Rolled back build 14Rolled back"],"result":null}
|
|
{"args":["Departures On schedule On schedule On schedule"],"result":null}
|
|
{"args":["Sections Overview page Overview page Overview page"],"result":null}
|
|
{"args":["Toggles Off Off Off"],"result":null}
|
|
{"args":["Standby mode"],"result":null}
|
|
{"args":["Availability Open slot Open slot Open slot"],"result":null}
|
|
{"args":[""],"result":null}
|
|
{"args":["⚡"],"result":null}
|
|
{"args":["Should flag Lightning Fast Built for speed and performance from the ground up. Secure Storage Enterprise-grade security for your peace of mind. Easy Setup Get started in minutes with zero configuration. Powerful Analytics Insights that drive smarter business decisions. ⚡ Emoji Inline Icon The tile contains an emoji directly, no SVG child."],"result":null}
|
|
{"args":["Inline Side By Side Icon sits next to the heading, not above it."],"result":null}
|
|
{"args":["Should flag Flag Nav Link Flag Category Flag Meta Row Flag Button Flag Table Cell Flag Caps Label Flag Footer Link"],"result":null}
|
|
{"args":["no max-width on a paragraph This paragraph has no max-width constraint at all, which means on a wide monitor or ultrawide display, each line of text can stretch to 150 or even 200 characters wide. Research consistently shows that line lengths beyond 75 characters significantly reduce reading speed and comprehension. The eye has to travel too far to find the beginning of the next line, causing readers to lose their place. A simple max-width of 65ch to 75ch on the paragraph or its container would fix this entirely."],"result":null}
|
|
{"args":["line-height: 1.0 This paragraph has a line-height of 1.0, which means the lines are touching. Multi-line body text needs breathing room between lines for readability. A line-height of 1.5 to 1.7 is generally recommended for body text."],"result":null}
|
|
{"args":["10px body text This body text is only 10px. While this might be fine for a disclaimer or legal footnote, it's too small for primary content that users need to actually read. Aim for at least 14px for body content, 16px is ideal."],"result":null}
|
|
{"args":["text-align: justify, no hyphens: auto This paragraph uses text-align: justify, which forces each line to stretch to fill the full width. Without hyphenation support, this creates uneven gaps between words known as \"rivers of white space\" that flow vertically through the text. Left-aligned text is almost always more readable on the web."],"result":null}
|
|
{"args":["text-transform: uppercase on a long passage This entire paragraph is in uppercase via text-transform. While all-caps works for short labels, headings, or navigation items, longer body text in uppercase is significantly harder to read because we lose the word shape cues that come from ascenders and descenders in mixed-case text."],"result":null}
|
|
{"args":["letter-spacing: 0.15em on body text This body text has letter-spacing: 0.15em applied to it. While subtle tracking adjustments can improve readability for headings or all-caps text, adding significant letter spacing to body text actually makes it harder to read by disrupting natural character groupings."],"result":null}
|
|
{"args":["Should flag Line length too long no max-width on a paragraph This paragraph has no max-width constraint at all, which means on a wide monitor or ultrawide display, each line of text can stretch to 150 or even 200 characters wide. Research consistently shows that line lengths beyond 75 characters significantly reduce reading speed and comprehension. The eye has to travel too far to find the beginning of the next line, causing readers to lose their place. A simple max-width of 65ch to 75ch on the paragraph or its container would fix this entirely. Tight line height line-height: 1.0 This paragraph has a line-height of 1.0, which means the lines are touching. Multi-line body text needs breathing room between lines for readability. A line-height of 1.5 to 1.7 is generally recommended for body text. Tiny body text 10px body text This body text is only 10px. While this might be fine for a disclaimer or legal footnote, it's too small for primary content that users need to actually read. Aim for at least 14px for body content, 16px is ideal. Justified text without hyphens text-align: justify, no hyphens: auto This paragraph uses text-align: justify, which forces each line to stretch to fill the full width. Without hyphenation support, this creates uneven gaps between words known as \"rivers of white space\" that flow vertically through the text. Left-aligned text is almost always more readable on the web. All-caps body text text-transform: uppercase on a long passage This entire paragraph is in uppercase via text-transform. While all-caps works for short labels, headings, or navigation items, longer body text in uppercase is significantly harder to read because we lose the word shape cues that come from ascenders and descenders in mixed-case text. Wide letter spacing on body text letter-spacing: 0.15em on body text This body text has letter-spacing: 0.15em applied to it. While subtle tracking adjustments can improve readability for headings or all-caps text, adding significant letter spacing to body text actually makes it harder to read by disrupting natural character groupings. Skipped heading levels h1 → h3 (missing h2) Top heading Skips straight to h3"],"result":null}
|
|
{"args":["max-width: 65ch on the paragraph This paragraph has a max-width of 65ch, keeping the line length comfortable for reading. The eye can easily track from the end of one line to the beginning of the next without losing its place."],"result":null}
|
|
{"args":["line-height: 1.6 This paragraph has a line-height of 1.6, which gives multi-line text plenty of room to breathe and improves the rhythm of the page."],"result":null}
|
|
{"args":["16px body text This is 16px body text — the recommended baseline for comfortable reading on modern displays."],"result":null}
|
|
{"args":["text-align: justify + hyphens: auto When justified text is paired with hyphens: auto, the browser can break long words across lines, eliminating the rivers of white space and making the justification look intentional rather than awkward."],"result":null}
|
|
{"args":["short label, uppercase Featured"],"result":null}
|
|
{"args":["letter-spacing on a short uppercase label Beta"],"result":null}
|
|
{"args":["h1 → h2 → h3 Top heading Second level Third level"],"result":null}
|
|
{"args":["Outer Card Inner Card Card inside card."],"result":null}
|
|
{"args":["Level 1 Level 2 Level 3 — nesting inception."],"result":null}
|
|
{"args":["Outer (CSS) Inner card via CSS."],"result":null}
|
|
{"args":["Should flag Nested cards (cardocalypse) Outer Card Inner Card Card inside card. Level 1 Level 2 Level 3 — nesting inception. Outer (CSS) Inner card via CSS. shadcn-style Outer Card Another shadcn Card nested inside."],"result":null}
|
|
{"args":["Card Title Card description goes here. CardContent — a sub-section, not a nested card. No shadow, no border-radius of its own. Action"],"result":null}
|
|
{"args":["Settings Select option"],"result":null}
|
|
{"args":["Installation npm install @acme/sdk"],"result":null}
|
|
{"args":["Tags React TypeScript Tailwind"],"result":null}
|
|
{"args":["Project Preview Image with rounded corners and shadow."],"result":null}
|
|
{"args":["Free $0"],"result":null}
|
|
{"args":["Pro $29"],"result":null}
|
|
{"args":["Should flag Fraunces 88px italic The Lumina hero pattern: oversized Fraunces italic display. Recoleta 64px italic Recoleta italic at 64px, generic serif fallback. Playfair 72px italic Playfair Display italic at hero scale. Unknown Serif Generic Fallback Primary font unknown to the detector, but the stack ends in generic serif."],"result":null}
|
|
{"args":["Inline Em Inside Roman Roman h1 with an inline italic em — v1 deliberately does not flag this."],"result":null}
|
|
{"args":["Should flag AI-NATIVE WORKFLOWS Eyebrow Above Hero Classic uppercase tracked div eyebrow above an 88px hero. NEW IN 2026 Span Eyebrow Above Hero Span variant with the same uppercase + tracking + small-size shape. FEATURED Pill Chip Above Hero Pill-shaped chip with background, border-radius, padding. NEW Already Uppercase Text Text typed uppercase, no text-transform, but matching tracking and size. A VERY LONG UPPERCASE TABLE OF CONTENTS HEADER Long Uppercase Sentence Above Hero 46-char uppercase tracked label — under the 60-char eyebrow ceiling, so it still reads as an oversized eyebrow."],"result":null}
|
|
{"args":["Hero With No Eyebrow Bare h1 at 64px, nothing above it."],"result":null}
|
|
{"args":["Invitation protocol"],"result":null}
|
|
{"args":["Output model"],"result":null}
|
|
{"args":["Preview sequence"],"result":null}
|
|
{"args":["Access window"],"result":null}
|
|
{"args":["materials briefing"],"result":null}
|
|
{"args":["Home / Journal / Archive"],"result":null}
|
|
{"args":["News · Jan 12, 2026"],"result":null}
|
|
{"args":["Section 4.2"],"result":null}
|
|
{"args":["§ 12.3"],"result":null}
|
|
{"args":["Chapter Four"],"result":null}
|
|
{"args":["Next from"],"result":null}
|
|
{"args":["Home Docs \"Page Title After Nav\" A navigation landmark preceding the page title is chrome, not a kicker."],"result":null}
|
|
{"args":["A quiet lead-in sentence"],"result":null}
|
|
{"args":["New arrivals"],"result":null}
|
|
{"args":["CSS bounce animation animation: bounce 1s infinite"],"result":null}
|
|
{"args":["Elastic cubic-bezier cubic-bezier(0.68, -0.55, 0.265, 1.55)"],"result":null}
|
|
{"args":["transition: width Animating width causes layout thrash."],"result":null}
|
|
{"args":["transition: height Animating height causes layout thrash."],"result":null}
|
|
{"args":["transition: padding Animating padding causes layout thrash."],"result":null}
|
|
{"args":["transition: margin Animating margin causes layout thrash."],"result":null}
|
|
{"args":["transition: max-height Use grid-template-rows instead."],"result":null}
|
|
{"args":["transition: width, height Multiple layout properties."],"result":null}
|
|
{"args":["transition: width, opacity Layout property mixed with OK property."],"result":null}
|
|
{"args":["Should flag Bounce / elastic easing CSS bounce animation animation: bounce 1s infinite Elastic cubic-bezier cubic-bezier(0.68, -0.55, 0.265, 1.55) Layout property transitions transition: width Animating width causes layout thrash. transition: height Animating height causes layout thrash. transition: padding Animating padding causes layout thrash. transition: margin Animating margin causes layout thrash. transition: max-height Use grid-template-rows instead. transition: width, height Multiple layout properties. transition: width, opacity Layout property mixed with OK property. transition-property: width Longhand form."],"result":null}
|
|
{"args":["Smooth fade in animation: fadeIn with exponential ease-out"],"result":null}
|
|
{"args":["Ease-out quart cubic-bezier(0.25, 1, 0.5, 1) — smooth deceleration"],"result":null}
|
|
{"args":["Ease-out expo cubic-bezier(0.16, 1, 0.3, 1) — natural feel"],"result":null}
|
|
{"args":["transition: transform Transform is GPU-accelerated and safe."],"result":null}
|
|
{"args":["transition: opacity Opacity is GPU-accelerated and safe."],"result":null}
|
|
{"args":["transition: color, background-color Color transitions are paint-only, no layout."],"result":null}
|
|
{"args":["transition: box-shadow Shadow transitions are paint-only."],"result":null}
|
|
{"args":["transition: all Too common to flag — usually paired with transform/opacity."],"result":null}
|
|
{"args":["Blue glow box-shadow: 0 0 20px rgba(59, 130, 246, 0.4)"],"result":null}
|
|
{"args":["Purple glow box-shadow: 0 0 25px rgba(139, 92, 246, 0.35)"],"result":null}
|
|
{"args":["Cyan glow box-shadow: 0 0 15px rgba(6, 182, 212, 0.5)"],"result":null}
|
|
{"args":["Blue glow box-shadow: 0 0 20px rgba(59, 130, 246, 0.4) Purple glow box-shadow: 0 0 25px rgba(139, 92, 246, 0.35) Cyan glow box-shadow: 0 0 15px rgba(6, 182, 212, 0.5) Multi-shadow with colored glow Normal shadow + purple glow combined."],"result":null}
|
|
{"args":["Inline pink glow Inline style for regex detection path."],"result":null}
|
|
{"args":["OKLCH glow box-shadow: 0 0 18px oklch(0.72 0.15 195 / 0.5)"],"result":null}
|
|
{"args":["Hex glow box-shadow: 0 0 16px #3b82f6"],"result":null}
|
|
{"args":["HSL glow box-shadow: 0 0 22px hsl(280, 80%, 60%)"],"result":null}
|
|
{"args":["Glow via var() box-shadow: 0 0 10px var(--fixture-glow)"],"result":null}
|
|
{"args":["OKLCH glow box-shadow: 0 0 18px oklch(0.72 0.15 195 / 0.5) Hex glow box-shadow: 0 0 16px #3b82f6 HSL glow box-shadow: 0 0 22px hsl(280, 80%, 60%) Glow via var() box-shadow: 0 0 10px var(--fixture-glow) Glowing text text-shadow: 0 0 12px #22d3ee on the heading."],"result":null}
|
|
{"args":["Chromatic halo on light page box-shadow: 0 0 20px oklch(0.65 0.2 300 / 0.45)"],"result":null}
|
|
{"args":["Halo over photo background box-shadow: 0 0 26px rgba(217, 70, 239, 0.5)"],"result":null}
|
|
{"args":["Should flag CSS colored glows on dark background Blue glow box-shadow: 0 0 20px rgba(59, 130, 246, 0.4) Purple glow box-shadow: 0 0 25px rgba(139, 92, 246, 0.35) Cyan glow box-shadow: 0 0 15px rgba(6, 182, 212, 0.5) Multi-shadow with colored glow Normal shadow + purple glow combined. Inline-style glow (regex path) Inline pink glow Inline style for regex detection path. Modern color formats, var() refs, text-shadow OKLCH glow box-shadow: 0 0 18px oklch(0.72 0.15 195 / 0.5) Hex glow box-shadow: 0 0 16px #3b82f6 HSL glow box-shadow: 0 0 22px hsl(280, 80%, 60%) Glow via var() box-shadow: 0 0 10px var(--fixture-glow) Glowing text text-shadow: 0 0 12px #22d3ee on the heading. Zero-offset halo on LIGHT background Chromatic halo on light page box-shadow: 0 0 20px oklch(0.65 0.2 300 / 0.45) Zero-offset halo on unreadable (image) surface Halo over photo background box-shadow: 0 0 26px rgba(217, 70, 239, 0.5) Colored glow under an opaque gradient over an image (browser) Opaque dark gradient covers the photo box-shadow: 0 6px 22px rgba(249, 115, 22, 0.5)"],"result":null}
|
|
{"args":["Colored shadow on light background Not dark mode, colored shadow is fine."],"result":null}
|
|
{"args":["Normal gray shadow on dark card Gray/black shadow is not a glow."],"result":null}
|
|
{"args":["Focus ring (spread, no blur) Functional ring, not decorative glow."],"result":null}
|
|
{"args":["Tiny blur (<5px) Too subtle to be \"glowing\"."],"result":null}
|
|
{"args":["Small dark elevation Subtle shadow on dark card."],"result":null}
|
|
{"args":["Medium dark elevation Standard dark card shadow."],"result":null}
|
|
{"args":["Large dark elevation Prominent shadow on dark card."],"result":null}
|
|
{"args":["Inset shadow Inner shadow, not a glow."],"result":null}
|
|
{"args":["Normal gray shadow on dark card Gray/black shadow is not a glow. Focus ring (spread, no blur) Functional ring, not decorative glow. Tiny blur (<5px) Too subtle to be \"glowing\". Small dark elevation Subtle shadow on dark card. Medium dark elevation Standard dark card shadow. Large dark elevation Prominent shadow on dark card. Inset shadow Inner shadow, not a glow. Multi-shadow dark card Layered gray shadows, no color glow."],"result":null}
|
|
{"args":["Not dark enough background Medium gray doesn't qualify as \"dark mode\"."],"result":null}
|
|
{"args":["Offset colored drop shadow Real drop shadow with a color tint — not a halo."],"result":null}
|
|
{"args":["Soft neutral halo Achromatic zero-offset shadow is ambient elevation."],"result":null}
|
|
{"args":["Offset colored shadow over photo background Surface unknown, offset shadow — abstain, not flag."],"result":null}
|
|
{"args":["The wash blends with unknowable image pixels Surface unknown — abstain, never score the wash stops as dark."],"result":null}
|
|
{"args":["Offset neutral text-shadow Legibility aid, not a glow."],"result":null}
|
|
{"args":["Small elevation (Tailwind shadow-sm) Standard subtle card shadow."],"result":null}
|
|
{"args":["Medium elevation (Tailwind shadow-md) Standard card shadow."],"result":null}
|
|
{"args":["section: full border, padding 28px 0 0; label and pills touch the left/right border lines. Supported dev servers Vite Next.js SvelteKit Astro"],"result":null}
|
|
{"args":["card: 1px border on all sides, padding 0; heading and body touch every side."],"result":null}
|
|
{"args":["card: 1px border on all sides, padding 0; heading and body touch every side. Card flush against the borders Body copy sits flush against every visible border line."],"result":null}
|
|
{"args":["no border, but a non-transparent bg; text flush against the bg's edge counts too."],"result":null}
|
|
{"args":["no border, but a non-transparent bg; text flush against the bg's edge counts too. Title flush against the bg edge Body copy with zero padding around a colored fill."],"result":null}
|
|
{"args":["outline draws outside the box; content at the box edge sits next to the outline."],"result":null}
|
|
{"args":["outline draws outside the box; content at the box edge sits next to the outline. Title flush against the outline The outline counts as a visible boundary too."],"result":null}
|
|
{"args":["card: padding 12px 16px 12px 0; text touches the left border, other sides are inset."],"result":null}
|
|
{"args":["Should flag Border + zero side-padding section: full border, padding 28px 0 0; label and pills touch the left/right border lines. Supported dev servers Vite Next.js SvelteKit Astro All sides flush against a border card: 1px border on all sides, padding 0; heading and body touch every side. Card flush against the borders Body copy sits flush against every visible border line. Background color, zero padding no border, but a non-transparent bg; text flush against the bg's edge counts too. Title flush against the bg edge Body copy with zero padding around a colored fill. Outline (not border), zero padding outline draws outside the box; content at the box edge sits next to the outline. Title flush against the outline The outline counts as a visible boundary too. Left-side flush, other sides fine card: padding 12px 16px 12px 0; text touches the left border, other sides are inset. Title flush only on the left Padding-left zero with a full border."],"result":null}
|
|
{"args":["no bg, no border, no outline; zero padding is fine. Supported dev servers Vite Next.js SvelteKit"],"result":null}
|
|
{"args":["border-top only, padding-top 24px; no left/right border to be flush against. Supported dev servers Vite Next.js SvelteKit"],"result":null}
|
|
{"args":["card: 1px border + padding 18px 20px; comfortable inset on every side."],"result":null}
|
|
{"args":["card: 1px border + padding 18px 20px; comfortable inset on every side. Card with proper inset Body copy sits comfortably away from the borders."],"result":null}
|
|
{"args":["non-transparent bg + padding 14px 18px; content has room to breathe."],"result":null}
|
|
{"args":["non-transparent bg + padding 14px 18px; content has room to breathe. Title with inset on bg Body copy is comfortably inset from the bg edge."],"result":null}
|
|
{"args":["outline + padding 14px 18px; content is comfortably inside."],"result":null}
|
|
{"args":["outline + padding 14px 18px; content is comfortably inside. Title with inset and outline Outline boundary with proper inset works."],"result":null}
|
|
{"args":["card: padding 0, border all sides; no text means nothing can be flush."],"result":null}
|
|
{"args":["card: parent padding 0, but text children have margins that create visible inset."],"result":null}
|
|
{"args":["card: parent padding 0, but text children have margins that create visible inset. Title inset by child margin Body copy is not visually flush even though the parent has zero padding."],"result":null}
|
|
{"args":["card: parent padding 0, but an inner shell is offset from every edge. Title inset by inner shell The direct child creates the breathing room."],"result":null}
|
|
{"args":["child padding 0, but it has the same background as the parent, so no child boundary is visible. Same-surface visual shell The text belongs to the parent surface, not to a distinct zero-padding card."],"result":null}
|
|
{"args":["marquee shell clips animated cards intentionally; the cards, not the shell, own text padding. Quote card with its own comfortable padding. Another moving card, also padded inside."],"result":null}
|
|
{"args":["Tracking crushed pixels heading line"],"result":null}
|
|
{"args":["gradients stop tripping the contrast rules when the glyph fill is transparent."],"result":null}
|
|
{"args":["The Tailwind form pairs bg-clip-text with bg-gradient-to-r on one element; the two utilities together are the tell."],"result":null}
|
|
{"args":[".status-dot { width: 8px; height: 8px; border-radius: 50%; animation: pulse 2s ease-in-out infinite; }"],"result":null}
|