--- title: "The Intentionality Law" source: "/reference/layr-001-intentionality" description: "Every visible decision should support meaning, action, identity, accessibility, or comprehension. Remove what does none of those." --- # The Intentionality Law Every visible decision should support meaning, action, identity, accessibility, or comprehension. Remove what does none of those. > **Every visible decision should support meaning, action, identity, accessibility, or comprehension. Remove what does none of those.** The Intentionality Law is Layr's foundational rule for resisting generic interface design, unnecessary explanation, decorative behavior, and the visual sameness commonly described as **AI slop**. It applies to layout, typography, color, components, motion, icons, illustrations, interaction states, product copy, documentation copy, and the small technical details that shape how an interface feels. It also applies to the decisions a coding agent makes when the prompt leaves something unspecified. A design can be polished and still feel unconsidered. A design can use popular components and still feel original. A design can be minimal and still contain wasted elements. A design can contain many details and still be precise. The deciding factor is whether the interface has a reason for the choices it makes. Layr treats slop as a **decision-quality problem**. The system should look for places where defaults, trends, or generated filler have replaced a project-specific decision. This rule is intentionally broad because AI slop rarely comes from one color, one card, one font, or one phrase. It emerges when several familiar defaults accumulate until the product loses specificity. --- ## Human reading layer ### The idea in plain language An interface should explain itself through structure before it asks copy to explain the structure. Its visual choices should come from the product, the brand, the task, or a known usability requirement. Decorative choices should have a deliberate aesthetic purpose. Repeated patterns should form a coherent system. When a generated interface feels generic, the problem is often visible in the gaps between these decisions. The page has cards because cards are common. The hero has a gradient because gradients look modern. The icon sits in a rounded square because component libraries do that. The description repeats the heading because empty space felt unfinished. Every section animates upward because the motion library made it easy. None of those choices is inherently wrong. Their accumulation without a product-specific reason creates sameness. The same problem appears in writing. A heading already communicates the purpose of a section, then a paragraph restates the heading. A button already says `Invite member`, then nearby copy explains that the button lets you invite a member. A simple product fact gets wrapped in promotional language. A short explanation turns into several paragraphs because the writer is trying to sound complete. The useful goal is helping the reader act. The Intentionality Law asks one question repeatedly: > **Why is this here?** A strong answer can be functional, semantic, aesthetic, editorial, brand-specific, or accessibility-related. The answer simply needs to be real. --- ## Why this law exists Modern coding agents can produce competent UI quickly. They have also learned the same large body of public design systems, component libraries, landing pages, templates, tutorials, and product screenshots. When a prompt leaves visual decisions open, the model tends to select highly probable patterns. That behavior creates convergence. Different products end up with similar colors, similar cards, similar hero structures, similar motion, similar typography, and similar copy rhythm. A 2026 open-source analysis of Reddit discussion about vibe-coded sites scanned 3,214,533 posts across 47 subreddits, then analyzed 46,971 on-topic posts and 3,033 comments from 125 threads focused on recognizable AI-built websites. The largest umbrella complaint was sameness. The most frequently named concrete signals included untouched shadcn/Tailwind styling, purple or violet as the default primary color, gradients, excessive animation, broad corner rounding, neon glow on dark interfaces, emoji used as icons, generic typography, and the centered hero followed by three feature cards and a CTA. The authors describe the dataset as community evidence with clear limits. Layr uses it as one input and keeps style prohibitions out of the rule. The same dataset also exposes an important failure mode in anti-slop advice. Once people began avoiding the older purple-gradient aesthetic, another recognizable default appeared: warm cream backgrounds, editorial serif headings, and sage or forest-green accents. A design can therefore become generic while trying very hard to look tasteful. This matters because a static blacklist becomes obsolete. Layr needs a rule that survives trend changes, and the rule that survives is intentionality: a list of banned styles expires with the trend that produced it, while the question of whether a choice was made stays answerable in any aesthetic. --- ## A stronger definition of AI slop For Layr, **AI slop** means: > **An accumulation of unchosen defaults, generic visual recipes, redundant language, or decorative behavior that weakens product specificity, information value, or interaction clarity.** This definition evaluates the artifact itself. Layr should never claim that a page was generated by AI because it contains a gradient, uses shadcn, or resembles a common landing page. Humans use those patterns too. AI-assisted products can also be designed with extreme care. The review target is the **slop characteristic**, not provenance. A valid Layr finding should sound like this: > This surface combines an untouched card variant, a default violet primary, repeated icon-in-square feature cards, and generic explanatory copy. The cluster is visually interchangeable with unrelated SaaS templates and does not reflect the project's documented design system. It should avoid claims like: > This was clearly made by AI. --- ## The four layers of slop Layr should treat AI slop as several related failure modes that can appear across many aesthetics. ### 1. Default slop A default is shipped as if it were a design decision. Typical examples include: - an untouched component-library theme; - the default neutral ramp from a starter kit; - default radius values used everywhere; - the first common font suggested by the framework; - a common violet or indigo primary chosen because no brand color was supplied; - a stock hero layout produced by a template; - standard animation wrappers added to every section; - generic placeholder illustrations promoted into final production UI. The problem is the absence of a project-specific choice. ### 2. Pseudo-slop The interface tries to escape one recognizable default and lands on another recognizable default. Examples include: - replacing purple gradients with cream, serif typography, and sage green because that combination currently reads as tasteful; - replacing Inter with the current fashionable editorial serif without considering the product voice; - removing rounded cards everywhere and forcing sharp brutalist geometry because anti-AI discourse currently favors it; - converting a generic SaaS page into a generic editorial page while preserving the same underlying structure and content. Pseudo-slop is especially useful for Layr to detect because anti-slop rules can create it accidentally. ### 3. Content slop The interface contains words that do not earn the space or attention they consume. Common forms include: - headings restated in the first sentence; - helper text that repeats a label; - identity or page-type labels that repeat a nearby logo, title, or navigation cue; - descriptions that explain an obvious control; - generic marketing claims with no product-specific information; - filler sections added to make a page feel substantial; - AI-style staging before a simple point; - formulaic conclusions that repeat what the section already said; - overuse of bold labels, decorative headings, or prose patterns that make every section sound generated from the same template. ### 4. Interaction slop The visual surface looks complete while behavior, states, and edge cases remain generic or unfinished. Examples include: - buttons that exist because the template expects a button but lead nowhere; - repeated confirmations for harmless actions; - missing loading, empty, error, or partial-success states; - motion attached to every element without conveying state; - decorative status colors that have no consistent semantic mapping; - fake progress indicators that are disconnected from real system progress; - a polished happy path paired with raw or inconsistent failure states. Interaction slop matters because a visually convincing first draft can hide an incomplete product model. --- ## The intentionality tests Layr can apply these tests to any visual, textual, or interactive decision. ### Purpose test Ask what job the element performs. Valid jobs include: - communicating information; - establishing hierarchy; - grouping related content; - exposing state; - providing an affordance; - giving feedback; - supporting navigation; - improving accessibility; - expressing a deliberate brand identity; - creating a specific emotional quality that supports the product experience. If the agent cannot identify a job, the element becomes a candidate for removal or redesign. ### Product-specificity test Ask whether the same element could appear unchanged in dozens of unrelated products. Generic reuse is expected for ordinary controls. A checkbox should remain recognizable. Product specificity becomes important when the element claims to carry brand, hierarchy, editorial voice, or marketing meaning. A login input can look conventional. A product-defining hero, pricing page, onboarding experience, or empty state should carry more product-specific decisions. ### Subtraction test Temporarily remove the element. Then ask whether the interface loses: - meaning; - interaction capability; - hierarchy; - necessary context; - accessibility information; - feedback; - brand identity; - useful emotional tone. If none of those changes, the element needs a stronger reason to remain. The subtraction test is especially effective for decorative badges, filler descriptions, extra card containers, decorative icons, repeated separators, excessive motion, and generic metadata. ### Semantic test If a visual treatment looks meaningful, verify that it represents something real. A colored left edge may imply category, state, severity, selection, or ownership. If it represents none of those, it may be decorative convention masquerading as information. A monospace version label may imply a real document version. If `Foundation / 0.1` never changes, is not navigable, and tells the reader nothing useful, the treatment is functioning as aesthetic metadata. ### Replacement test A correction fails when it swaps one unspecified default for another. Examples: - violet to emerald with no brand rationale; - Inter to Instrument Serif because serif currently feels more premium; - glass cards to sharp bordered cards because brutalism is trending; - `rounded-xl` to `rounded-none` across the entire application without examining component semantics; - generic marketing copy rewritten into generic minimalist copy. A correction should connect to the product's real design system, brand, content, or task. ### Explanation test Compare the copy with what the interface already communicates. Copy earns its place when it adds information about: - consequence; - risk; - constraints; - unfamiliar behavior; - required input; - uncertainty; - recovery; - differentiation; - policy; - context the interface cannot communicate safely through structure alone. Copy that simply names what a nearby label, button, table, or visual structure already makes clear should be shortened or removed. --- ## Visual slop catalog The following patterns are **signals**. Layr should combine them with project context and look for clusters before creating a finding. ## 1. Untouched component-library defaults ### What it looks like A project uses a mature library such as shadcn/ui or Tailwind-based starters, then leaves most of the defaults intact: - the same neutral card surface across every section; - `rounded-lg border bg-card shadow-sm` repeated everywhere; - familiar default padding rhythms; - framework-default primary color; - generated CSS variables with no meaningful changes; - the exact Card, Button, Badge, Dialog, and Input appearance seen in the library examples. ### Why it becomes slop The library is doing its job. The product has not yet done its own design work. A component library ships one set of answers so that thousands of unrelated projects can start without deciding anything. Those answers are deliberately average: a radius that suits every category, a neutral ramp that sits under any brand, padding tuned for a documentation demo. Shipping them unchanged means the interface communicates the library's decisions instead of the product's. Readers notice the effect before they can name it. Hierarchy arrives from the container rather than from the content, so a billing section and a changelog carry the same visual weight, and nothing on the surface says which product they are in. The 2026 Reddit-mined dataset ranks untouched shadcn/Tailwind styling first among named tells, at 2.5% of on-topic comments and 2.2% of design-context posts, and its author calls it the top concrete cause behind the broader complaint of sameness. That is community recognition rather than measured usability harm: the same defaults can be entirely usable. A design system should absorb a component library into a project-specific token system. Component behavior can remain standard while proportion, typography, spacing, color, border treatment, density, and composition adapt to the product. State that split explicitly, because it decides what a correction is allowed to touch. Behavior, accessibility semantics, and keyboard handling belong to the library. Everything the eye measures belongs to the project. ### Legitimate uses Using shadcn, Radix, Tailwind, Material, Chakra, MUI, or any other system is fine. A well-themed implementation can be highly specific, and the parts of a mature library that are hardest to see are the parts most worth keeping: focus management, ARIA wiring, dismiss behavior, portal and scroll-lock handling, typeahead in menus and comboboxes. Rebuilding those by hand to look less generic trades visible sameness for invisible accessibility bugs. Early-stage projects are a legitimate case too. A team that has not chosen a brand yet is better served by honest defaults than by an arbitrary palette invented to look decided. The finding applies when the product has a documented design direction and the interface ignores it, or when the defaults have survived long enough that nobody remembers choosing them. ### Correction Inspect tokens before individual components: 1. define real brand and semantic colors; 2. define density and spacing rhythm; 3. decide radius behavior; 4. decide border and elevation language; 5. choose typography deliberately; 6. decide which components deserve containment; 7. audit repeated variants and remove library examples that became accidental production patterns. The order matters. Restyling components one at a time produces a system of exceptions, and the next generated screen reverts to the defaults because the defaults are still what the tokens say. Changing the tokens moves every surface at once, including the screens nobody has reviewed yet. One check tells you whether the work landed. Open two unrelated screens side by side with the logo hidden and ask whether they read as the same product. If they only read as the same library, the tokens have not moved. ### Agent finding example > The settings page uses the stock card treatment on 11 unrelated groups. The repeated border, radius, shadow, and `p-6` rhythm flatten the information hierarchy. Several groups can be expressed with headings and spacing inside one structural region. Preserve cards for sections that require independent state or action scope. --- ## 2. AI-purple and gradient defaults ### What it looks like - violet or indigo as the primary color without a documented brand reason; - purple-to-blue or purple-to-pink gradients; - gradient-filled hero headings; - gradient buttons; - several surfaces using the same gradient as a generic signal of modernity or AI. ### Why it becomes slop Purple is heavily represented in AI and developer-tool templates. Community discussion repeatedly names it as a recognizable default. In the 2026 Reddit-mined dataset, purple or violet is the most-named color tell at 2.3% of on-topic comments, with gradients close behind at 2.0%; both rank above every other color complaint. The author of that dataset notes the comment share understates the visual impact of gradients, since people call a page AI-looking long before they isolate which layer caused the feeling. The mechanism is arithmetic rather than taste. When a prompt does not name a brand color, the model returns the color that appears most often in its training material for that kind of product, and it returns the same one to everyone. Purple carries no defect that teal lacks. It is the answer that arrives when no question was asked. A gradient compounds the effect, because a two-stop blend hides the fact that neither stop was chosen. The issue is strongest when the hue appears alongside other generic patterns. A violet primary inside a documented palette reads as a brand. The same violet on a gradient headline above three rounded cards reads as a template. The difference is the surrounding evidence, not the hue. ### Legitimate uses Purple can be an excellent brand color. A real brand palette, distinctive tone, meaningful semantic system, or established visual identity is sufficient justification. Slack, Twitch, Figma, and Stripe all carry hues in that range and none of them reads as generated, because each sits inside a palette with defined roles for hover, focus, disabled, destructive, and informational states. A gradient can also be deliberate. It may represent progression, category transition, depth, media content, or a specific visual identity. A gradient earns its place when it encodes something: a heat scale where position means value, a timeline where the blend marks direction, a media surface where the blend keeps overlaid text legible against unpredictable artwork. The practical distinction is whether the color survives a question. Ask which token the primary comes from, how many steps its ramp has, and what happens to it in the disabled state. A brand answers immediately. A default has nothing to say. ### Correction Do not recolor mechanically. Identify the brand decision first. If no brand system exists, create one from product attributes, reference material, audience, and desired tone. Use a solid color if the gradient provides no additional meaning. Swapping violet for emerald across a stylesheet is the most common failed correction in this category. It removes the recognizable hue and keeps the actual defect, which is that nobody chose a color. The work is finished when the palette has roles rather than a replacement: a primary with a stated reason, a ramp with enough steps for text, surface, and border use, a destructive color that is not a tint of the primary, and a focus color that survives both themes. Gradient headlines need a separate check, because they usually fail contrast before they fail taste. Text set on a blend passes at one end and fails at the other, and the failing region moves as the viewport resizes. Measure the worst point rather than the midpoint. --- ## 3. The new tasteful default ### What it looks like A warm cream or beige background is paired with a high-contrast editorial serif and a sage or forest-green accent. The page often includes restrained rounded cards, tasteful whitespace, a product mockup, and quiet copy. ### Why it matters This style can look significantly more refined than the older purple-gradient AI template. Its increased use has also made it recognizable as another generated default in 2026 community discussion, and the `unslop-ui` skill published alongside the Reddit dataset now lists the cream, serif, and sage combination by name, directly beside the purple gradients it was adopted to escape. That sequence is the point of this entry. Anti-slop advice spreads faster than the reasoning behind it, so a correction published as a recipe becomes the next recipe. A team that moved from violet to sage because an article recommended it has made exactly as many decisions as before, which is none. Layr should therefore read this style as a question rather than a violation. A publishing tool with a cream background has probably reasoned about paper and long-form reading. A developer CLI dashboard with the same background has probably read the same article everyone else read. ### Legitimate uses A publishing product, architecture studio, hospitality brand, botanical product, luxury service, or other project may have strong reasons to use those ingredients. Warm off-white lowers the glare of a full-brightness page during long reading sessions. A high-contrast serif gives a text-heavy product a voice that a neutral grotesque cannot. Green reads as growth, material, or outdoors in categories where that association is the message rather than the mood. Each of those is a reason someone can state in one sentence. That is the whole test, and it is the same test applied to violet in the previous entry. ### Correction Avoid changing the palette simply because the combination is currently associated with AI. Verify the design brief. Keep choices that belong to the brand. Replace choices that came from autopilot. Separate the ingredients and interrogate them one at a time. The background, the display face, the accent, and the spacing rhythm arrived as a bundle; they rarely need to leave as one. A project often keeps the serif, which it chose for a real reason, and drops the sage accent, which it never chose at all. This category demonstrates why Layr should detect **unchosen convergence** and preserve legitimate aesthetics. --- ## 4. Cardification ### What it looks like Every piece of information receives a container: ```text ┌─────────────────────────────┐ │ icon │ │ │ │ Title │ │ Short generic description │ └─────────────────────────────┘ ``` The pattern repeats across features, settings, metrics, onboarding, FAQ summaries, and ordinary metadata. ### Why it becomes slop Cards are strong grouping devices. Excessive use causes every group to receive similar visual weight. Hierarchy becomes dependent on boxes while the underlying information structure fades. A card makes three claims at once: this content belongs together, it is separate from its neighbors, and it has roughly the same standing as the other cards on the page. The first claim is usually true. The second and third are the ones spent carelessly. A settings page with eleven cards asserts that eleven groups matter equally, which is almost never what the product means. The cost lands on scanning. Nielsen Norman Group's eighth usability heuristic states the principle directly: interfaces should not contain information that is irrelevant or rarely needed, because every extra element competes with the relevant ones for attention. A border, a shadow, and twenty-four pixels of padding are elements too. Repeat them forty times and the page spends most of its contrast budget drawing boxes instead of distinguishing the three things the reader came for. Containers also multiply. Once a card exists, the next generated section nests a card inside it and a bordered list inside that, and each level adds padding that squeezes real content into a narrow column in the middle of the screen. ### Legitimate uses A card is useful when content has an independent identity, interaction scope, state, navigation target, or repeated object model. A project card, invoice card, media card, ticket, dashboard module, or selectable plan may legitimately need containment. The clearest signal is that the card corresponds to a row in a database somewhere. Invoices, tickets, projects, and plans are objects: they can be opened, selected, shared, and counted, and the boundary on screen matches a boundary in the product's model. Marketing features and settings groups rarely pass that test, because nothing can be done to one of them. Cards also earn containment when a collection is genuinely unordered, or when items can be reordered, dismissed, or dragged. The boundary then marks a hit area instead of a decoration. ### Correction Ask whether the grouping can be expressed with: - typography; - spacing; - alignment; - a divider; - a table row; - a section heading; - one shared container when several nested containers add no structural value. Preserve cards where the boundary carries semantic meaning. Run the removal in one pass rather than card by card. Strip the container from every group, look at the page with only typography and spacing holding it together, then add containment back where the page became ambiguous. Restoring three cards out of eleven is a normal outcome. --- ## 5. Decorative accent stripes ### What it looks like A card receives a colored line or block on its left edge or top edge: ```text ▌ Analytics ▌ Understand your product usage with powerful insights. ``` or: ```text ━━━━━━━━━━━━━━━━━━━━━━ blue accent Feature title Description ``` The same recipe can appear in a search suggestion: hovering a result turns it into a tinted panel with a colored left stripe, even though the stripe does not identify a selected item, category, or status. ### Why it becomes slop A colored edge looks semantic. Readers naturally search for what the color means. If the accent does not encode state, category, severity, ownership, selection, or brand structure, it creates a false information signal. The convention is borrowed. Left edges carry meaning in the tools people already use: an unread thread in a mail client, a severity band in a log viewer, a branch color in a diff, a selected row in a table. An interface that adopts the shape inherits the expectation, so readers spend attention deciding whether the blue stripe on card two means something different from the blue stripe on card five. The answer is usually no, and the attention was spent anyway. The problem sharpens when several accents appear in one view with different hues. Four colors across four cards read as four categories. If the hues were picked to look varied, the page has invented a taxonomy the product does not have. ### Legitimate uses A colored edge is useful when the color has a documented role. Examples include severity levels, environment status, content categories, project ownership, selected objects, or a brand composition with a consistent purpose. A documented role means something a reader learns once and applies everywhere: amber for staging and red for production, one hue per rule category, a customer color that follows that customer across views. The test is whether a legend could be written without inventing it on the spot, and whether the same hue would land on the same kind of object on a different screen. Accent edges also hold up as pure brand structure when they are used sparingly and consistently, for example a single rule under a page title. That is composition rather than encoding, and it stops holding up the moment it repeats on every item in a list. ### Correction Give the accent a job or remove it. A search result still needs clear hover and keyboard-focus feedback; a neutral surface change and a visible focus outline can provide it without implying a new category or status. If the design still needs visual identity, express that identity through composition, typography, illustration, or a coherent brand system. When the accent does carry meaning, do not let it carry that meaning alone. Color-only encoding fails for readers with color-vision deficiencies and in forced-color modes, so pair the edge with a label, an icon, or a word. The category then survives the loss of the color, which is what accessibility guidance has asked for since long before this pattern existed. --- ## 6. Rounded-everything geometry ### What it looks like - cards, buttons, inputs, images, drawers, tables, and page sections all share large radii; - every button becomes a pill; - icons sit inside rounded squares regardless of purpose; - nested rounded surfaces create several layers of soft containers. ### Why it becomes slop Uniform geometry can be another untouched default. It also reduces differentiation between component types. Radius is one of the few signals that tells readers what kind of thing they are looking at before they read it. A pill suggests a tag or a toggle. A small radius suggests an input. A larger one suggests a surface that holds other things. When every element shares one value that signal disappears, and the interface has to spend labels and copy re-establishing what shape alone used to communicate. Large radii also fight their own contents. A 16-pixel corner on a 32-pixel row consumes the row. Nested rounded surfaces leave a visible gap at each corner, so the inner card never quite follows the outer one, and the mismatch reads as imprecision even to people who cannot say why. The 2026 dataset ranks broad rounding fifth among named tells, at 0.8% of comments and 0.5% of posts, well below the default component kit and purple. Rounding is a supporting signal. It should never carry a finding by itself. ### Legitimate uses A soft, rounded product language can be deliberate and coherent. Consumer health, education, family products, games, and many other categories can benefit from it. Rounding also follows the platform. Apple's interfaces have used continuous corners for years and its current guidance pushes concentric radii further into the system, so an app that rounds generously on those platforms is matching a convention rather than inventing one. Touch-first interfaces have a physical argument as well, since a rounded target reads as a pressable object at a glance. What makes any of this deliberate is that the values differ from each other. A product can be thoroughly soft and still assign 4, 8, and 16 to different jobs. ### Correction Define a small radius scale and map radius to component behavior. Three or four values usually cover it: one for elements that sit inline with text, one for inputs and buttons, one for surfaces, and one for fully rounded elements such as avatars and tags. Large radius values should have a reason related to shape, touch, brand, or hierarchy. Write the mapping next to the tokens, because a scale without a rule regenerates the problem. A `--radius-sm` applied to both a badge and a modal is the same failure with better naming. Nested surfaces need one more rule. An inner radius should equal the outer radius minus the padding between them, or the corners will not run parallel. Apply that once and the whole interface stops looking slightly loose. --- ## 7. Dark mode plus unmotivated neon glow ### What it looks like - black or near-black background; - bright cyan, lime, purple, or magenta text; - large glow shadows around buttons, headings, borders, or cards; - glow introduced without a brand or interaction role. ### Why it becomes slop Community complaints often identify the unprompted glow as the tell. Dark mode itself is common and useful, and it reaches sixth place in the 2026 dataset only in combination with the glow, at 0.7% of comments and 1.3% of posts. Nobody complains about dark interfaces. They complain about the halo. Glow becomes generic when it is the only source of visual personality. A blur radius is the cheapest way to make a flat surface look designed, so it accumulates on anything that seems important: the primary button, the active card, the headline, the border around the pricing tier the page wants you to pick. After the third one the emphasis cancels out, and the page has a mood where it needed a hierarchy. There is a legibility cost as well. A saturated glow behind text lowers the effective contrast at the glyph edges, and bright cyan or lime on near-black is already hard to read at body sizes, because highly saturated colors on dark grounds produce visible halation for many readers. The pattern often fails the audience it was meant to impress. ### Legitimate uses Cyberpunk products, music software, games, media experiences, hardware tools, or brands with an established luminous identity may use glow intentionally. Glow is also correct when it represents emission. A light that is on, a live stream, a recording state, a hot value on a chart, a battery that is charging: in each case the halo says the object is producing something, which is what a halo means in the physical world. Used that way it is state, and the interface can afford exactly as many glowing elements as it has emitting objects, which is usually one. ### Correction Remove glow that contributes neither state nor identity. Build hierarchy with contrast, scale, typography, spacing, and actual content. Dark interfaces need a surface ramp more than they need effects. Give the theme three or four background steps, use elevation to separate them, and let the brightest surface be the one the reader is working in. Most glow exists because the theme has a single background value and nothing else can create separation. Then check the palette against the text it carries. Measure contrast in the dark theme separately instead of assuming the light theme's ratios transfer, and desaturate accent hues for dark grounds. The same hex that reads as confident on white usually vibrates on black. --- ## 8. Generic typography by autopilot ### What it looks like A project uses the first broadly available font associated with its technical stack or current design trend, then relies on weight and size alone to create character. Examples in community discussion include Inter, Geist, system-ui, Instrument Serif, Fraunces, and other frequently generated choices. ### Why it becomes slop Typography carries a large part of product identity. When the type system arrives by default, several unrelated products begin to share the same voice. The tell is rarely the family. It is the absence of a system around it. A default type choice usually arrives with default everything else: one weight for body text, one for headings, sizes taken from whatever scale the framework offered, line height left at the browser value, no rule for numerals in tables, no decision about what monospace is for. The page then has to create emphasis with size alone, which is why generated interfaces reach for very large headlines and very small grey captions and have nothing in between. The 2026 dataset places generic sans faces eighth at 0.4% of comments, one of the weakest signals it measured, and its author notes that share metrics understate the visual impact of fonts. Readers register the voice of a page immediately and attribute the feeling to something else. Treat a common face as a prompt to inspect the system, never as a finding. ### Legitimate uses Every font named above can support excellent design. The font is only a weak signal. Intent, typesetting, hierarchy, language support, performance, and brand fit matter more. Some products have constraints that select the face for them. A product shipping in Japanese, Arabic, and Cyrillic needs coverage that most display families lack. A data-dense tool needs tabular figures and unambiguous 1, l, I, 0, and O. A performance budget measured on low-end Android may rule out four custom weights. A face chosen under those constraints is a decision, even when thousands of other products reached the same one. ### Correction Document the type choice. Define: - why the family fits the product; - which weights are needed; - reading sizes; - display sizes; - line heights; - tracking; - numeric behavior; - monospace usage; - fallback strategy; - language coverage. A deliberate type system can use a common font and still feel specific. Write those answers next to the tokens rather than in a design file. A type system that lives only in a mockup will not reach the next generated screen, and the framework default will. --- ## 9. Pseudo-technical minimalism ### What it looks like This is a Layr-specific category for interfaces that borrow the visual language of developer tools and technical documentation as decoration: - near-black background; - tiny muted monospace labels; - all-caps eyebrow text (entry 16 covers this pattern on its own, where it arrives without the rest of the technical vocabulary); - version numbers that do not represent a useful version; - slash separators used repeatedly; - coordinates, hashes, timestamps, build labels, or technical metadata presented for atmosphere; - extreme empty space around tiny labels; - system-status language used where ordinary navigation would be clearer. ### Why it becomes slop Technical artifacts communicate precision because they usually represent real system state. Decorative technical metadata borrows that credibility without carrying the corresponding information. Monospace, uppercase micro-labels, and slash-separated strings all read as machine output. Readers have learned that such text is produced by a system rather than written by a marketer, so they grant it more trust than prose. An interface that prints `SYSTEM / FOUNDATION / 0.1` above a static page spends that trust on nothing, and the first reader who tries to navigate the version, compare it, or find what changed discovers there was no system behind the label. This is the visual equivalent of borrowed authority in writing. The pattern usually leaves the screen with less information than a plain heading would have carried, because an eyebrow, a slash, and a number take the place of a sentence that could have said what the page contains. ### Legitimate uses A developer tool can show real version numbers, commit hashes, environments, branch names, build status, latency, model versions, rule IDs, or timestamps. Monospace typography is appropriate for many of these values. The value should reward attention. A commit hash can be copied and looked up. An environment label changes when the environment changes. A rule ID such as `LAYR-001` is worth showing because it is a stable identifier used in citations, findings, and cross-references, so a reader who types it somewhere else gets a result. Monospace suits all of these because the characters are meant to be transcribed exactly. ### Correction Keep technical detail when it helps users identify or reason about the system. Remove decorative metadata that exists only to make the product feel technical. Use monospace where the data has technical semantics. Where the metadata is real but idle, connect it instead of deleting it. A version number becomes useful as soon as it links to a changelog and moves when the document moves. That correction keeps the aesthetic the team wanted and gives it something to stand on. ### Case study: the foundation screen ![Pseudo-technical foundation example](./assets/pseudo-technical-foundation-example.png) This composition combines a near-black field, tiny uppercase monospace text, a muted `Foundation / 0.1` label, and a very large unused vertical region. Under the Intentionality Law, Layr should inspect each choice separately: - Does `Foundation / 0.1` correspond to a real version users can understand or navigate? - Does the large empty region establish composition for content that follows, or does it simply imitate a premium developer-tool aesthetic? - Is monospace communicating technical information, or is it being used as atmosphere? - Does the header help the reader orient themselves? - Would removing the version label change meaning, state, navigation, or identity? If most answers are weak, the screen has a high-confidence pseudo-technical slop cluster. A correction might keep the dark palette while changing the information model. `Foundation / 0.1` could become a real document version with history and changelog behavior. The empty region could contain the title and purpose of the current reference. Monospace could be reserved for rule IDs, tokens, and machine-readable content. --- ## 10. Centered hero plus three-card skeleton ### What it looks like ```text Small badge Huge centered headline generic supporting paragraph [CTA] [CTA] [Feature] [Feature] [Feature] CTA section ``` ### Why it becomes slop The structure can be generated without understanding the product. It gives every company the same narrative regardless of audience, proof, complexity, or first action. The skeleton encodes a sales argument: a category claim, a promise, two equally weighted actions, and three benefits of identical size. Products rarely have that shape. Most have one action that matters and one that exists for people who are not ready, or one differentiator and two supporting details, or a single fact so specific that a benefit triad buries it. Filling the template means padding whichever slot the product does not have, and the padding is where the generic copy comes from. Two symmetrical calls to action are the most expensive part. When both buttons look equally important, the page has not decided what it wants the visitor to do, so the visitor decides not to decide. The 2026 dataset ranks this structure ninth at 0.4% of comments and describes the signal as thin. Inspect it for what it displaces rather than because people recognize it on sight. ### Legitimate uses A centered hero can be the right solution for a focused consumer product, event, campaign, simple utility, or strong single-message landing page. Three features can be correct when the product genuinely has three major concepts. It is also a reasonable starting point for a page with one message and no product surface worth showing yet. It becomes a problem when it survives past the point where the team has something concrete to put above the fold. ### Correction Start with the user's task and the evidence the page needs to present. A developer tool may benefit from a working command, code example, or product surface above the fold. A design reference may benefit from an index. A marketplace may need inventory immediately. Structure should follow the product's information problem. Writing the first screen as a sentence usually settles the layout: who arrives, what they need to believe, and what they do next. When the answer is an engineer evaluating whether this fits their stack, the fastest proof is a command and its output, not a headline about productivity. --- ## 11. Centered-everything and empty-space theater ### What it looks like Every title, paragraph, button group, section heading, testimonial, and CTA is centered. Large vertical gaps are used to create a premium feeling even when the information relationship does not need them. ### Why it becomes slop Center alignment weakens scanning in content-rich interfaces and produces repetitive page rhythm. Every centered paragraph gives the eye a new left edge to find, so a reader moving down the page re-acquires the start of each line instead of returning to one column. Ragged left edges cost the most in the material that most needs scanning: lists, multi-line descriptions, and anything a reader compares item to item. Empty space becomes theater when it performs luxury without helping grouping, focus, or hierarchy. The diagnostic is proximity. Space is working when the gap inside a group is visibly smaller than the gap between groups. Space is decoration when every gap is the same large value, because uniform space groups nothing. It only makes the page longer and pushes related items out of each other's company. ### Legitimate uses Centered composition can be excellent for short, singular messages. Generous negative space can create focus, calm, and editorial rhythm. Short lines center well: a page title, an empty state, a dialog, a sign-in form, a confirmation. Each is a single object the reader looks at rather than a body of text they move through. Generous space is equally correct when the screen has one thing to do and the space keeps everything else away from it. W3C's cognitive accessibility guidance recommends white space for exactly that reason, as separation that supports comprehension. ### Correction Use alignment according to reading behavior and content structure. Give whitespace a measurable relationship to grouping and hierarchy. Dense reference material can still feel premium when the spacing system is disciplined. Set body copy on one left edge so that centering becomes an exception you can point at. Then give the spacing scale a job: choose the step that separates sections, the smaller step that separates groups, and the smallest that separates a label from its value. A reader should be able to infer the grouping with the text blurred. --- ## 12. Decorative icons and icon containers ### What it looks like - a generic icon beside every heading; - every feature icon placed inside a colored rounded square; - rockets, sparkles, locks, lightning bolts, targets, and magic-wand symbols used as predictable feature metaphors; - emojis used as production UI icons. ### Why it becomes slop Icons add visual material quickly, so generated interfaces overuse them to fill layouts. Many provide no additional recognition value. An icon works when it is faster to recognize than the word beside it. That holds for a small set of symbols people have seen thousands of times: search, close, back, play, trash, settings. It does not hold for the abstractions that generated feature sections reach for. A rocket does not mean fast, a sparkle does not mean intelligent, and a target does not mean accurate. Each of those requires reading the label first and mapping it backwards, which is slower than the label alone. Icon containers add a second layer of the same problem. A colored rounded square around a glyph signals a hit area, and readers try to click it. When the square is decoration, the interface has produced an affordance that leads nowhere. The 2026 dataset ranks emoji used as icons seventh, at 0.5% of comments but 2.7% of posts, the widest post share of any tell it measured. Emoji also render differently on every platform and are announced literally by screen readers, so a decorative sparkle becomes an audible word in the middle of a heading. ### Legitimate uses Icons are valuable when they improve affordance, recognition, navigation, status communication, or spatial economy. Toolbars, dense tables, mobile tab bars, and any place a label would not fit are the strongest cases, because the icon buys back space the interface genuinely needs. Icons carry real weight in status and in scanning as well. A warning triangle beside a message lets a reader classify it without reading it, and it keeps that classification working for people who cannot distinguish the color behind it. Product-specific pictograms are legitimate too, when a team has drawn a set that belongs to the product rather than assembling one from whichever library the framework installed. ### Correction Remove icons that merely decorate text. Keep icons with a clear interaction or recognition role. Avoid adding a container around an icon unless the container communicates hit area, category, state, or hierarchy. The icons that survive still need correct markup. A decorative glyph should be hidden from assistive technology, an icon that acts alone needs an accessible name, and an icon that is the only carrier of a status needs a word beside it. That check usually removes more icons than any argument about taste. --- ## 13. Motion by template ### What it looks like The same animation appears on every section: ```tsx initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} ``` Cards scale on hover. Buttons spring. Sections fade in. Background objects float continuously. ### Why it becomes slop Repeated decorative motion makes the animation system itself more noticeable while the product state stays equally unclear. Scroll-triggered entrances are the clearest case. The content was already on the page. The animation hides it, waits for the reader to arrive, then reveals what was never missing. Readers pay for that in latency on every section, and on a slow connection or a long page the effect is content that appears to load repeatedly. The 2026 dataset places excessive animation fourth among named tells, at 1.1% of comments and 2.0% of posts, and flags it as one of the noisier signals: the same library that produces template fades also produces good motion. The distinction is never the tool. It is whether the movement corresponds to something changing. Uniform motion also erases the one thing motion is best at. When everything animates the same way nothing is emphasized, so a genuine state change, such as a row leaving a list or a panel taking over the screen, arrives with the same 20-pixel fade as a decorative heading. ### Legitimate uses Motion can explain causality, preserve spatial context, communicate progress, show hierarchy changes, confirm actions, and create a deliberate brand character. The strongest cases share a property: something moved in the product, and the animation shows where it went. A panel that grows from the control that opened it. A row that slides out of a list as it is deleted. A value that counts to its new number. A toast that arrives from the edge it will return to. Removing the motion in each case would leave the reader briefly unsure what happened. ### Correction Connect each animation to a reason: - state transition; - spatial relationship; - feedback; - continuity; - attention shift; - progress; - brand moment that does not interfere with the task. Respect reduced-motion preferences and remove repeated entrance effects that communicate nothing. Reduced motion deserves a real implementation rather than a global switch to zero. Honor the preference with a change that still confirms the action, usually opacity without travel, so the interface stays legible for the people who asked for less movement. --- ## 14. Layout-quality slop This category often matters more than decorative trends. ### Signals - inconsistent spacing values; - edges that almost align; - content clipping at realistic lengths; - text placed behind decorative layers; - responsive states that collapse hierarchy; - sections with identical visual weight; - components that work only with placeholder content; - inconsistent container widths; - arbitrary width and height values accumulated during prompting. ### Why it matters A custom palette cannot rescue incoherent structure. Layout precision is one of the clearest signs that the product has received deliberate review. This category rarely appears in community lists, because it has no name people can shout. It also survives the longest. A trend-driven palette can be replaced in an afternoon; an arbitrary set of widths accumulated over fifty prompts cannot. The signals above share one cause. Each screen was produced in isolation with values chosen to make that screen look right, so the product ends up with forty near-misses instead of one system: 23 pixels here and 24 there, a container at 1180 on one page and 1200 on the next, a heading that fits the placeholder name and clips the real one. Nothing is broken enough to file, and the accumulation is what readers describe as cheap. Long content is where it shows first. Interfaces assembled from generated examples are tuned to the example strings, so they break on a real German label, a 60-character company name, a four-digit number, or an empty list. ### Correction Audit the grid, spacing tokens, content widths, responsive behavior, and long-content cases. Test real strings. Establish hierarchy before adding more visual style. Work from the shared decisions down. Fix the container widths and the spacing scale first, then remove the one-off values that disagree with them, then re-test each screen with the worst content it will ever hold: the longest label, the empty state, the 500-row table, the account with no avatar. Most layout slop disappears at the token level, and whatever still breaks afterwards is the part that genuinely needs design attention. --- ## 15. The announcement pill above the headline ### What it looks like A small rounded capsule sits centered above the hero heading, usually with a tag and a fragment of news: ```text ( NEW ) Edge functions are out of beta Infrastructure for teams that actually ship ``` - a `New`, `Beta`, `v2`, or `Announcing` tag in a contrasting fill; - one clause about something the team shipped; - a chevron, an arrow, or a border that reads as clickable; - frequently no link behind any of it. ### Why it becomes slop The pattern originates in products that genuinely had somewhere to send the reader. A launch pill linked to a changelog, and the capsule shape was how a page said *this is dated, and there is more of it elsewhere*. Generated landing pages reproduce the shape without the destination, because the shape is the part that is visible in every screenshot. Two costs follow. The pill occupies the position a reader looks at first — above the headline, alone, centered — and spends that position on the least important sentence on the page. And it borrows an affordance: a bordered capsule with a tag inside is a control everywhere else on the web, so a reader who follows the convention and clicks it learns that this page's conventions do not hold. That doubt carries to the buttons below it, which are the ones the page needed. The announcement is also rarely news to the person reading it. A first-time visitor has no prior version of the product to compare against, so `out of beta` tells them nothing; it addresses a returning user on a page built for strangers. ### Legitimate uses A product with real, dated announcements should have somewhere to put them. The pill works when it links to the thing it names, when what it names changes, and when the audience for the page includes people who have been away. It is strongest when the announcement affects the reader's decision: a pricing change, a region that opened, a deprecation with a date. `Data residency is now available in the EU` earns its position above the headline for a reader who could not buy the product without it. ### Correction Run the subtraction test first. Delete the pill and read the hero without it. If the page lost nothing, the pill was filling the space above the headline because the space was there. Where the announcement is real, connect it rather than styling it: link it to the changelog entry, and let it disappear when there is nothing recent to say. A pill that is still on the page nine months later is decoration whatever it said when it shipped. Do not resolve this one by making a decorative pill clickable. Wiring up an element that the surface does not need keeps the unchosen decision and adds a destination nobody asked for. Connect only what subtraction said the page would miss. --- ## 16. All-caps micro-labels as section openers ### What it looks like A short line in uppercase with heavy letter-spacing sits above a heading, in a smaller size and usually in an accent color: ```text WHAT WE RUN Six services, one control plane Adopt one or all of them. ``` - eyebrows above section headings; - `TRUSTED BY PLATFORM TEAMS AT` above a row of logos; - `WORKSPACE` and `OPERATIONS` above groups in a sidebar; - brand or page names repeated in caps beside a logo that already says them. ### Why it becomes slop An eyebrow is a second heading, and a section can only carry one. `WHAT WE RUN` above `Six services, one control plane` says nothing the heading below does not say more precisely, so the reader parses two lines to learn one thing. The uppercase treatment makes that worse rather than better: capitals remove the ascender and descender pattern that makes a word recognizable at a glance, and letter-spacing pushes the characters apart, so the line that adds the least information is also the slowest to read. The pattern spreads because it is visually cheap. An eyebrow adds a second typographic level and a use for the accent color without anyone deciding what the section is for. Layouts that reach for it usually have a heading that was already doing the work. This is the same borrowed authority as pseudo-technical minimalism (entry 9), arriving through typography instead of through monospace and version numbers. Small caps read as metadata — as a label a system applied — and a hand-written marketing phrase in that treatment is claiming a category it does not have. ### Legitimate uses A micro-label earns its line when it names something the heading cannot. Grouping labels in navigation are the clearest case: `OPERATIONS` above Alerts, Logs, Billing and Settings names a set that none of the four items names itself, and removing it would leave a reader to infer the grouping from adjacency alone. That is a real job, and it is the one the Law of Common Region describes. Eyebrows are also legitimate as position: a chapter number, a category the reader navigated from, a step indicator in a sequence. Each of those is information the heading genuinely does not carry. The carve-out is about the label, not the styling. A group label that earns its place still does not need heavy tracking and full capitals to be read as subordinate — size, weight and color already say that, and they say it faster. ### Correction Two questions, and the second one is the one reviews forget. First: what does the label tell a reader that the heading does not? If nothing, delete it and let the heading stand alone. Second, for every label that survives that question: does it need to be in capitals? Almost never. Surviving the first question earns the label its line — it does not earn the treatment. `WORKSPACE` above Overview, Accounts, Services and Pipelines is doing real work, and it does that work just as well as `Workspace` in the same size, weight and colour, while being faster to read. The same goes for a table's column headers, a panel's section labels, and the group headings in a settings page: these are the labels a reader scans past on the way to the thing they came for, and full capitals with heavy tracking is the slowest way to set the text you most want someone to skim. So a review that stops at "this label earns its place" has done half the job. Keep the label, drop the capitals and the tracking, and let size, weight and colour say subordinate — which is what they already say, and faster. Where several of these appear across one interface, treat them as a cluster rather than as separate findings. A sidebar whose group headings, column headers and section labels are all in spaced capitals has one typographic habit applied everywhere, not a set of decisions. --- ## 17. Logo walls that cannot be checked ### What it looks like A row of company names or marks under the hero, usually in a flat monochrome, often under a label: ```text TRUSTED BY PLATFORM TEAMS AT NORTHWIND GLOBEX INITECH UMBRELLA SOYLENT TYRELL ``` - invented or placeholder companies; - real names with no case study, quote, or page behind them; - wordmarks set in the site's own font rather than the company's; - a row that never changes and links nowhere. ### Why it becomes slop A logo wall is a claim, and a claim's value comes from being checkable. The convention works because a reader can usually verify it: the names are recognizable, the marks are the real ones, and a case study sits a click away. Reproducing the row without any of that keeps the layout and discards the evidence. Readers are good at detecting this. Names set in the page's own typeface rather than as the companies' actual marks are the common tell, and once one row is doubted the testimonials and metrics near it are doubted with it. A section meant to add credibility subtracts it. Where the names are placeholders, the section is worse than empty: it occupies the most valuable strip of the page with information that is not true. ### Legitimate uses Real customers, shown with permission, are among the strongest things a page can carry. The row works when the marks are the companies' own, when at least some of them lead somewhere — a case study, a quote, a named person — and when the set changes as the customer base does. A team with no logos yet has better options than a fabricated row: a number of teams, a named design partner, an open-source project that depends on the product, or nothing at all. Nothing at all is a real choice, and a page that omits social proof reads as early rather than as untrue. ### Correction Remove a row whose names cannot be verified. There is no styling fix for a claim that is not true, and adjusting its opacity or grayscale only makes it quieter. For a real row, make one thing on it checkable. A single logo that links to a case study does more for the section than six that link nowhere, and it gives the other five somewhere to inherit credibility from. --- ## 18. Status badges where the column already is one ### What it looks like Every row of a table carries its status inside a tinted, bordered capsule: ```text ACCOUNT MRR STATUS Northwind $4,200 ( Active ) Globex $3,100 ( Active ) Initech $2,800 ( Active ) Umbrella $1,900 ( Churned ) Soylent $1,400 ( At risk ) Tyrell $900 ( Active ) ``` - one pill per row, in a column where every row has one; - a tint and a border colour per enum value, chosen because the palette had them; - capsules whose width varies with the length of the word inside, so nothing below the first letter lines up; - the same treatment for the ordinary value and the exceptional one. ### Why it becomes slop A table is a scanning surface. The reader goes *down* a column, and a column reads well when its values share a shape. A badge gives every value its own shape: a border, a tint, a radius, and a width that follows the word inside it. Ten rows of capsules are ten different silhouettes carrying four distinct pieces of information, and the column that was easiest to scan becomes the one with the most edges in it. The colour costs more than the container. Status colour is the interface's loudest channel — it is what a surface has to say *look at this row*. Spending it on every row spends it on the common case: if most accounts are Active, the table paints a green capsule down its whole length, and the one churned account has to win attention against sixty of them. The exception loses its contrast to the rule. A palette used everywhere marks nothing, which is the same failure as gradient on every important element (entry 2), arriving through a component instead of through a finish. The pattern spreads because the component exists. A library ships `Badge`, a column holds an enum, and the two meet without anyone asking whether the row needed a container. That is entry 1 with a narrower blast radius: the untouched default is not the whole card here, it is the decision that a value with a fixed set of options must be wrapped in something. It also reads as interaction. A bordered capsule is a control nearly everywhere else on the web — a filter, a tag you can remove, a toggle — so a reader who tries to click a status and gets nothing learns that this table's conventions do not hold. ### Legitimate uses A badge earns its container by being **rare**. One flag on a row that is otherwise ordinary is exactly what the shape is for: it says *this row is not like the others*, and the container is what makes it findable while scrolling. The moment every row has one, the shape has stopped distinguishing anything. Colour on status is legitimate and often necessary — it is the fastest channel for severity. What the colour does not need is a capsule around it. Coloured text plus the word carries the same severity in one shape, and it survives greyscale and a screen reader, which a tint alone does not. A status that is genuinely interactive — a control that changes the state, a filter the reader can click — should look like a control. Then the affordance is not borrowed; it is true. ### Correction Set the value as text in the cell, in the column's own type, and let the column be the thing that says these are all statuses. Carry severity as colour on the text, and make sure the word itself says what the colour says, so the meaning survives for a reader who cannot use the hue. Keep a container only for the values that are exceptions, and only where the exception is rare enough that the container marks something. If you cannot say which value the shape is marking, it is marking none of them. Where the same enum appears in several places — the table, a detail panel, a filter — correct them together. One pattern applied in three views is one decision, and fixing the table alone leaves the habit somewhere to come back from. --- ## What does not count as slop by itself Layr should explicitly protect legitimate design choices from over-aggressive anti-slop review. The following are weak signals alone: - purple; - gradients; - cards; - rounded corners; - pills; - dark mode; - serif typography; - Inter; - Geist; - monospace typography; - glassmorphism; - bento grids; - large whitespace; - centered layouts; - glow; - animation; - shadcn; - Tailwind; - Lucide icons; - three-column grids. The 2026 Reddit-mined dataset specifically found bento grids and glassmorphism to be low-signal and contested, while mesh/blob/aurora background complaints were rejected as a keyword artifact in that analysis. Those negative results are the reason this list exists: a review that flags the patterns people expect to be flagged, rather than the ones the evidence supports, has replaced observation with superstition. Each item above appears in a large number of carefully designed products, so a finding that rests on one of them says more about the reviewer's assumptions than about the interface. Weight them as context, and let the cluster carry the finding. --- ## Copy slop: when the interface explains itself twice Visual design and product writing share the same failure mode: adding material because an empty area feels unfinished. The Intentionality Law treats copy as interface material. Every sentence consumes space and attention. Every sentence changes reading order. A paragraph can compete with an action just as easily as a badge or illustration can. Nielsen Norman Group's web-writing study compared five versions of one site carrying identical information. Measured against the promotional control, the concise version scored 58% better on its usability index, the scannable version 47%, the objective version 27%, and the version combining all three 124%. Those figures come from a single 1997 study on a single site, so treat the exact numbers as historical rather than as a constant. The ranking is what transfers: removing words helped most, and the three edits compounded instead of competing. W3C cognitive accessibility guidance reaches compatible advice from a different direction. Its succinct-text pattern asks for one topic per paragraph, the main point at the beginning, short sentences carrying a single point each, and paragraphs over roughly 50 words broken apart. Its clear-content objective adds familiar vocabulary, simple tense and voice, literal language, and instructions separated rather than combined. These are accessibility requirements for readers with cognitive and learning disabilities before they are style preferences for everyone else. Layr should use those principles together with the structural AI-writing patterns documented by the open-source `blader/humanizer` project. The Humanizer project's useful contribution is its emphasis on **structural habits**. Vocabulary changes quickly between model generations, and a list of banned words expires with the model that favored them. Formulaic staging, repeated rhetorical structures, inflated significance, formatting by rule, and leftover chatbot language last longer, because they come from how a model composes rather than from which adjectives it currently prefers. That project also supplies a safeguard worth copying directly. It treats five patterns as strong enough to act on after one sighting, and the rhythm patterns as weak unless they appear with companions. Interface copy needs the same discipline, because product writing is short, repetitive by nature, and full of legitimate labels that would look formulaic in an essay. Layr should adapt that idea to interface writing, where the unit of review is a whole surface. One formulaic sentence proves very little on a page that also has to carry labels, empty states, and legal text. --- ## Copy principle > **Use words when words add information the interface cannot communicate safely or efficiently on its own.** Text can carry nuance that layout cannot. It can explain consequences, policies, edge cases, uncertainty, and unfamiliar concepts. The goal is precise copy, not silent interfaces. --- ## 1. Heading restatement ### Slop ```text Notifications Manage your notifications and notification preferences. ``` The second line adds almost no information. It restates the heading at greater length, so a reader who already understood the section reads it twice before reaching the controls. The habit has a mechanical cause. A header followed by a paragraph is the shape of nearly every document a model has seen, so an empty slot under a heading gets filled whether or not the product has anything to put there. Humanizer records the same pattern as a drafting leftover: a heading immediately followed by a one-line paragraph restating it. In an interface the cost is larger than in prose. The restatement sits between the heading and the first control, which is where a scanning reader expects the controls to be, so a sentence that adds nothing also delays everything. ### Better ```text Notifications ``` Add supporting copy only when the section needs context: ```text Notifications Critical account alerts are always sent by email. You can disable product and activity updates below. ``` The second version provides a constraint the controls alone may not communicate. One test settles most cases: would the sentence survive being read aloud to someone who can already see the heading? `Manage your notifications` would not. `Critical account alerts are always sent by email` would, because it names a behavior the toggles below never expose. --- ## 2. Obvious-control explanation ### Slop ```text Invite member Use this button to invite a new member to your workspace. [ Invite member ] ``` A button label is already a sentence. `Invite member` names the action, the object, and the outcome in two words, and the reader has read it before reaching any paragraph about it. Explanatory copy attached to an obvious control usually exists because the section felt bare, not because anyone was confused. ### Better ```text Team members 12 [ Invite member ] ``` The stronger version replaces explanation with information the reader cannot get elsewhere. The member count does work no description can: it tells a reader whether they need the button at all. ### When explanation is necessary ```text [ Invite member ] Invited members receive access to all projects in this workspace by default. ``` The copy now communicates a consequence. Consequence, scope, default behavior, and cost are the four things a control cannot express by itself, and any of them justifies a sentence. Place it where the decision happens rather than at the top of the section, so the reader meets it while choosing instead of several paragraphs earlier. --- ## 3. Generic section filler ### Slop ```text Powerful analytics Gain valuable insights into your data with our robust analytics platform designed to help you make smarter decisions and unlock your full potential. ``` The paragraph sounds complete while saying very little. Every noun in it is a category rather than a thing: insights, data, decisions, potential. A reader finishes the sentence without learning what the product measures, what it can compare, or what they would do with the result. Nielsen Norman Group's study called this register marketese, and stripping it alone measured 27% better than the promotional control. Filler carries an extra cost on product pages, because a visitor evaluating a tool is looking for a reason to disqualify it quickly. A paragraph with no checkable nouns gives them nothing to test, so they leave without a reason to stay. ### Better ```text Analytics Compare conversion by source, plan, and signup week. Export the current view as CSV. ``` Specific nouns and actions make the product legible. A dependable rewriting move is to name the smallest real thing the feature does and let the reader infer the size of the rest. `Export the current view as CSV` implies a product with views worth exporting. `Unlock your full potential` implies nothing anyone can verify. --- ## 4. Staged openings AI-generated copy often announces that an explanation is about to happen. Signals include phrases equivalent to: - `Let's explore...` - `Let's break this down...` - `Here's what you need to know...` - `A quick note...` - `The important thing is...` ### Slop ```text Here's what you need to know about workspace roles. Let's break down how each permission level works. ``` ### Better ```text Workspace roles control who can edit settings, manage billing, and invite members. ``` Start with the information. Staging comes from drafting. A writer clears their throat while looking for the sentence, and the throat-clearing survives into the finished text. Humanizer treats it as one of the five patterns strong enough to act on after a single sighting, because it has no defensible use: announcing that an explanation is coming always takes longer than the explanation's first sentence. Interfaces speak their own dialect of the habit. `In this section you can`, `Below you will find`, and `Use this page to` all describe the page instead of helping the reader use it. Delete the run-up and check whether the remaining sentence still stands. It almost always does, and it is now the first thing the reader sees. --- ## 5. Artificial contrast Formulaic contrast often adds drama without adding a real distinction. Watch for constructions that invent a weak negative idea before stating the useful idea. ### Slop ```text This feature goes beyond simple search. It transforms the way your team discovers information. ``` ### Better ```text Search across documents, comments, and attachments from one command menu. ``` When a real contrast matters, keep it concrete: ```text Archived projects remain searchable. Deleted projects are removed after 30 days. ``` Both halves now carry product information. Formulaic contrast works by inventing a weaker version of the product and then defeating it. Nothing in the source claimed the feature was simple search, so the sentence answers a position no one held. Humanizer names both halves of the habit: the not-X-but-Y construction, and arguing with no one, which is the same move spread across two sentences. Keep a contrast when readers genuinely arrive holding the wrong belief and both sides carry something they can act on. `Archived projects remain searchable. Deleted projects are removed after 30 days` survives because each half states a fact with a different consequence. The test is whether the negative half would be worth saying on its own. --- ## 6. Dramatic one-line closers ### Slop ```text The rule engine evaluates every component against the active ruleset. That changes everything. ``` ### Better ```text The rule engine evaluates every component against the active ruleset and attaches evidence to each finding. ``` A short final sentence is fine when it adds a fact. Repetition used only for emphasis should be removed. A closer asks for a pause. A reader can grant one in an article. In an interface the pause lands directly above a control, and the reader rereads the paragraph to check whether the short line changed anything. It never has. The same habit produces emphatic fragments: `No setup. No configuration. No limits.` Three fragments look decisive and carry less information than one sentence naming what the product does not require. Merge them and the claim becomes checkable. --- ## 7. Forced symmetry and triads Generated copy often produces balanced groups because they sound finished. ### Slop ```text Design faster, collaborate smarter, and ship better. ``` The phrase could describe hundreds of products. ### Better ```text Run the same design rules in local review, pull requests, and the Layr reference site. ``` Three items can remain when the product genuinely has three distinct parts. The issue is rhetorical symmetry used as a substitute for substance. Count what the third item adds. `Design faster, collaborate smarter, and ship better` repeats one claim at three points of a workflow, so the length came from rhythm rather than from the product. The signal strengthens when neighboring lists also run to three, especially where the underlying data has four items or two. Interfaces institutionalize the problem through layout. A three-column grid asks for three features, and the third gets invented to fill the column. Let the content set the count, then choose a layout that holds it. Two strong features in two columns read as confidence; three with one filler read as a template. --- ## 8. Inflated significance Signals include claims that ordinary product details are pivotal, transformative, groundbreaking, essential, or part of a broader revolution without evidence. ### Slop ```text This groundbreaking workflow represents a pivotal shift in how modern teams approach design quality. ``` ### Better ```text The workflow runs design checks before a pull request is merged. ``` Let the reader decide whether the capability is important. Inflation is detectable without judging the claim. The sentence describes the product's position in the world rather than its behavior: it represents a shift, marks a moment, or belongs to a larger movement. Strip those phrases and read what remains. If nothing remains, the sentence carried no product information at all. Interfaces inflate a second way, by promoting ordinary events into announcements. A banner reading `A new era for your workspace` above a settings change spends the reader's attention on framing instead of on what changed and what they should do about it. --- ## 9. Abstract business vocabulary Words such as `robust`, `seamless`, `powerful`, `transformative`, `elevate`, `unlock`, `empower`, and `streamline` often replace product details. The presence of one word is weak evidence. Clusters are more useful. ### Slop ```text A robust platform that empowers teams to streamline workflows and unlock seamless collaboration. ``` ### Better ```text Designers can leave a finding in Layr and create the corresponding Linear or GitHub issue without copying the context manually. ``` Concrete behavior is more credible than abstract benefit language. The words are symptoms rather than the defect. Each names a benefit while skipping the mechanism, so a sentence can hold four of them and still leave a reader unable to describe what the software does. Vocabulary lists also expire, since model generations favour different adjectives and a ban list assembled today will miss the next batch. Count the missing nouns rather than the offending adjectives. The reliable rewrite is to state the behavior that produces the benefit and let the benefit go unsaid. Readers infer `seamless` from a description of two systems exchanging data without a copy-paste step, and they trust the inference more than the adjective. --- ## 10. Formatting by rule AI-generated documentation often decorates every item the same way: ```text - **Speed:** Improve performance. - **Quality:** Improve design quality. - **Consistency:** Keep everything consistent. ``` When labels merely repeat the sentence, prose is often cleaner: ```text The review checks performance-sensitive interaction, design-system consistency, and rule-specific design issues. ``` Bold labels remain useful when they help readers compare categories or scan a real reference structure. The failure is easy to test. Read only the bold labels. If they form a usable index, the list is working. If the sentence after each label repeats it, the labels are decoration and the content is prose wearing a list. Documentation and reference material sit on the legitimate side. A token table, a props list, a rule index, and a keyboard-shortcut list all exist to be scanned rather than read, and W3C's succinct-text guidance recommends lists for exactly that material: unordered for items and requirements, numbered for steps. The distinction is whether a reader will jump into the middle of the list, or whether they were always going to read it top to bottom. --- ## 11. Decorative headings Headings should help readers locate information. A heading is navigation before it is writing. It answers the question a scanning reader is asking, which is whether this section holds what they came for, so a heading that withholds its subject costs them the paragraph underneath. The decorative kind is recognizable by its grammar: an abstract noun phrase with no verb and no object. Sentence case helps more than it should. Title Case On Every Word flattens the proper nouns that would otherwise stand out, and a reader loses the one cue that separates a product name from an ordinary word. Emoji and arrows used as ornament create a second problem, because screen readers announce them, so an arrow opening every heading becomes a repeated word in the reading order. Avoid headings that exist only to add drama: ```text The Future of Better Design A New Era of Intelligent Interfaces Why This Changes Everything ``` Prefer descriptive headings: ```text How Layr evaluates a rule Agent evidence requirements Handling intentional exceptions ``` Descriptive headings also make a document searchable. A reader who remembers the part about evidence will find `Agent evidence requirements`. Nobody will ever find `A New Era of Intelligent Interfaces`. --- ## 12. Chatbot residue Production copy should never retain conversational wrappers intended for the person who requested the draft. Examples include: ```text Great question! Of course. I hope this helps. Would you like to learn more? Let me know if you want another example. ``` A support chatbot can use conversational language when that is the product interaction. Static product copy should stand on its own. Humanizer calls this the most certain tell on its list and the easiest to miss, because the wrapper surrounds real content and the eye jumps to the middle. In a product it arrives by a specific path: someone pastes a generated draft into a component, keeps the paragraph, and misses the sentence above and below it. Check the edges of any pasted text. The first line and the last line are where the assistant was speaking to the person who asked, not to the person who will read it. Empty states and error messages are the most common landing places, since both are written quickly and reviewed rarely. --- ## 13. Copy that repeats visible state ### Slop ```text Upload complete Your upload has completed successfully. ``` ### Better ```text Upload complete 243 records imported. 7 need review. ``` The body should advance the user's understanding. A status message has two jobs: say what happened, and say what to do next. Restating the heading does neither, and the temptation is strongest exactly where the product knows the most. After an import, an export, a deploy, or a sync, the system is holding counts, durations, skipped rows, and warnings, and a generated message discards all of it for a sentence confirming success. The cost goes past wasted words. A reader told only that an upload completed has no way to know that seven records need review, so a message meant to reassure hides work they still have to do. --- ## 14. Copy that hides the useful fact Long copy can be slop even when every sentence is technically correct. ### Slop ```text To help ensure that the process works as expected and that we are able to provide you with the best possible experience, there may be circumstances in which certain records cannot be imported due to issues with the original source data. ``` ### Better ```text Rows with missing IDs will be skipped. You can download them after the import and retry once the IDs are fixed. ``` The second version names the condition and recovery path. Length is not the defect. The original is unreadable because it opens with intent, moves through hedging, and reaches its only fact in the final clause, by which point the reader has stopped. W3C's succinct-text pattern addresses that shape directly: put the main point at the beginning, keep one point per sentence, and break paragraphs that run past roughly 50 words. The original runs to 48 words and carries one fact. Legal and policy text attracts the pattern most, because caution accumulates in front of the fact. The fix is order rather than deletion. State the condition, then the consequence, then the recovery, and keep any qualification a reader needs in order to act correctly. --- ## 15. Redundant identity and page labels A small uppercase label can look like useful metadata while saying only what the logo, page title, or navigation already says. Size, spacing, and monospace styling do not give repeated words a purpose. ### Slop ```text [ LAYR logo ] LAYR | Design Reference LAYR DESIGN REFERENCE Rules for interfaces understood by humans and agents. ``` The descriptor beside the wordmark and the label above the title repeat identity already visible in the same view. Another form is a URL slug restyled as metadata immediately above its own title: `AESTHETIC-USABILITY-EFFECT` above `Aesthetic-Usability Effect`. The transformed spelling adds no new identifier. A distinct, stable rule ID such as `LAYR-001` can still help citation and cross-reference; that does not mean it belongs above every page headline. ### Better ```text [ LAYR logo ] LAYR Rules for interfaces understood by humans and agents. ``` Remove an identity or page-type label when its removal changes neither orientation nor meaning. Keep a label when it distinguishes a source, status, mode, or section that the surrounding interface does not make clear. Review it in context rather than banning labels or repeated brand names everywhere. This pattern survives review because every element is defensible alone. A logo belongs in a header. A wordmark belongs beside a logo. A descriptor explains the wordmark. A page title names the page. Inspected one at a time nothing is wrong, and the reader still meets the same word four times before reaching content. That is why the check has to be positional: count what a reader can see at once, not what each element does in isolation. --- --- ## 16. Emoji as formatting Section 12 covers emoji standing in for interface icons. This is the other half: emoji used as *structure* in writing — a glyph opening every heading, prefixing every bullet, or carrying a status that no word states. The pattern travels from chat output into product copy, README files, changelogs, and empty states, because the model that drafted the text formats that way by default. ### Slop ```text 🚀 Getting started ✨ Why teams choose us ✅ Fast setup ✅ Secure by default 🔒 Enterprise-grade security 💡 Pro tip: you can also import from CSV. ``` Every line here is marked twice. The rocket says the same thing as "Getting started", the checkmarks repeat a list that a list already signals, and the padlock restates the word "security" beside it. The glyphs carry no information the sentence does not, and each one is announced aloud: a screen reader reads "rocket Getting started", so the ornament becomes a word in the reading order. The sparkle is the clearest case. It was adopted as the visual shorthand for AI in the mid-2020s, so a product that opens a section with ✨ is now labelling its own copy as machine-written — usually the opposite of what the page is trying to say. ### Better ```text Getting started Why teams choose us Setup takes about two minutes. Data is encrypted at rest and in transit. Tip: you can also import from CSV. ``` Remove a glyph when the sentence beside it already carries the meaning. Where a feature list said ✅ three times, the rewrite states what each item actually does, which is the information the checkmark was standing in for. Emoji keep their place where they are content rather than decoration: a user's own message, a reaction, a name someone chose, a legend where the glyph is the value being explained. Status is the one structural use that can survive, and only when the emoji is not the sole carrier — a ✅ beside the word "Passed" is redundant, a ✅ *instead of* "Passed" fails for anyone whose reader announces it as "check mark button", and fails again on a platform whose font draws it differently. Treat a single emoji as a weak cue. Wikipedia's own guidance on the subject makes the same reservation about every pattern it lists: they are "only potential signs of a problem, not the problem itself." What raises confidence is repetition and position — one emoji per heading across a page, or one opening every bullet, is a formatting rule rather than a choice, and a formatting rule nobody set is the definition this law works from. ## When copy should remain detailed The Intentionality Law does not reward brevity for its own sake. Detailed copy is appropriate when users need to understand: - financial commitment; - privacy or data collection; - destructive scope; - security consequences; - unfamiliar domain concepts; - accessibility instructions; - complex form requirements; - legal obligations; - irreversible actions; - uncertainty in automated decisions; - error recovery; - differences between options that cannot be expressed visually without ambiguity. The correct amount of copy is the smallest amount that preserves informed action. Two cases deserve extra care. Anything irreversible needs its scope stated in numbers rather than adjectives, because `this cannot be undone` tells a reader less than `this permanently deletes 18 projects and their uploaded files`. Anything automated needs its uncertainty exposed, because a reader cannot judge a machine decision they believe to be exact. Brevity is a means here, not the goal. A shorter sentence that removes a consequence is a worse sentence, and a review should treat lost information as a more serious defect than an extra clause. --- ## Interaction slop catalog ## 1. Happy-path polish with unfinished states A page can look carefully designed while loading, error, empty, disabled, partial-success, and offline states fall back to generic components. ### Review Check every consequential component for: - default; - hover; - focus-visible; - active; - loading; - disabled; - error; - success; - empty; - partial success; - long-running state where relevant. A product's visual quality should survive real system behavior. Generated interfaces are strong in the default state and weak everywhere else, because the default state is what a prompt describes and what a screenshot shows. The other states stay invisible until something goes wrong, so they inherit whatever the component library does, which is usually a raw browser message or nothing at all. The empty state deserves the most attention in that list. It is the first thing a new account sees, it is where a product explains what a screen is for, and it is the state a template has the least reason to design. A table that renders column headers over nothing tells a new user the product is broken. Error states carry the second cost. A message that names what failed, says whether the action can be retried, and states what to do next turns a dead end into a task. `Something went wrong` does none of that, and it appears in generated interfaces more than any other error string. --- ## 2. Fake or decorative controls Generated marketing surfaces often contain controls that look interactive because the visual pattern expects them. Examples include: - segmented controls that do not change content; - search inputs that are screenshots; - fake command bars; - buttons that scroll to generic sections without clear purpose; - links labeled `Canonical URL` that open the page the reader is already on; - breadcrumbs on an index that repeat the active navigation item without adding a parent destination; - dashboard filters that do nothing in prototypes promoted to production. A control should either act or be presented clearly as an illustration. A breadcrumb to a real parent page still helps orientation; a copy-URL action can help when the reader needs the current address. Dead controls cost more than decoration, because they consume a decision rather than attention. Someone who clicks a segmented control and sees nothing change does not conclude that the control is fake. They conclude they misunderstood the product, then either try again or stop trusting the rest of the interface. Keyboard and assistive-technology users pay the larger share. A focusable element with a button role joins the tab order and is announced as an action, so a decorative control adds a stop on a path that leads nowhere. Anything that does not act should not be focusable and should not carry an interactive role. Illustrations of an interface are legitimate and common on marketing pages. Make the framing honest: place the mock inside a figure, remove the focusable elements, and let it read as a picture of the product rather than the product itself. --- ## 3. Confirmation everywhere Agents sometimes add confirmation dialogs to every mutation because confirmation seems safe. Repeated low-risk confirmations create interaction slop. They interrupt common work and make high-risk confirmations less distinctive. Use confirmation according to consequence. Prefer undo or reversible actions for routine operations when the system can support them. Confirmation is a tax on the frequent case, paid to protect the rare one. A dialog in front of an action someone performs forty times a day stops being read after the third time, and that is the failure: the habit of dismissing dialogs transfers to the one dialog that mattered. Match the friction to the damage. Cheap and reversible actions need no interruption and an undo affordance. Expensive or irreversible actions need a dialog that states scope in numbers. Destructive and unrecoverable actions justify typed confirmation, and that device only works while it stays rare. A confirmation that cannot name what it protects is usually unnecessary. When the dialog body would say `are you sure?` and nothing more, the product has not identified a consequence worth the interruption. --- ## 4. Decorative status A green dot, amber border, colored badge, or pulse animation implies state. Verify that the state is real and consistently mapped. Remove status decoration that does not correspond to system state. Status color is the strongest promise an interface can make with the least text, which makes a false one expensive. A green dot beside a service name reads as checked recently and healthy. If the dot is hard-coded, the interface is reporting a fact it never measured, and the first reader who trusts it during an outage will not trust it again. Consistency matters as much as truth. Amber has to mean the same thing on the dashboard, in the table, and in the notification, or readers build no mapping at all. Write the mapping down beside the tokens, keep the set small, and pair every status color with a word or an icon so the meaning survives color-vision differences and forced-color modes. Pulse animation deserves its own check. A pulse says something is happening now. On a value that refreshes once an hour it reports activity that does not exist. --- ## 5. Fake progress A progress bar should represent real progress or clearly communicate indeterminate activity. Decorative percentages, arbitrary jumps, and progress bars that stall at predetermined values are examples of interaction slop because they create false precision. A determinate bar is a prediction, and readers use it to decide whether to wait, switch tabs, or leave. A bar that reaches 90% in a second and holds there for a minute teaches them the number means nothing, which removes the only reason to show it. Choose the indicator from what the system actually knows. Use a determinate bar when the total is known and progress is measured against it. Use an indeterminate indicator when work is running but unquantified. Use a step list when the phases are known and their durations are not, which covers most imports, builds, and deploys and tells a reader more than any percentage would. Anything that can run past a few seconds also needs the honest extras: elapsed time, what is happening now, and a way to leave without losing the work. --- ## 6. Hover motion without a job A list row that slides sideways on hover draws attention to movement rather than the destination. If the displacement communicates no selection, drag affordance, or spatial relationship, it adds motion without information and can make a stable list feel jumpy. Keep clear hover and keyboard-focus feedback. Color, underline, border, or a focus outline may be enough. Movement remains useful when it explains a real transition or interaction. Pointer users lose the least here. The cost lands on everyone else, because a translation on hover cannot be perceived by keyboard users at all, so an interface whose only affordance is movement offers them no affordance. The fix is to give focus-visible the same weight as hover rather than to add more motion. Displacement inside a scrolling list has a second failure. Rows that shift as the pointer crosses them make the list feel unstable during ordinary scrolling, and for readers sensitive to motion the effect compounds down a long page. --- ## Slop clusters Individual signals have low diagnostic value. Clusters are stronger. The reason is arithmetic. Every signal in this document appears in a large number of deliberately designed products, so acting on one alone produces mostly false positives. Signals become informative when they co-occur, because a deliberate design converges on one or two popular choices and rarely on eight at once. The dataset behind these patterns shows the same shape from the other direction. No single tell it measured exceeded 2.5% of on-topic comments, and yet sameness dominates the corpus as an umbrella complaint. People are not reacting to purple. They are reacting to purple arriving with everything that usually accompanies it. Read the lists below as evidence bundles rather than checklists. Three items from one bundle justify a closer look. Six justify a finding. One justifies nothing. ## Example: high-confidence generic SaaS cluster ```text violet primary + gradient hero text + centered huge headline + two generic CTA buttons + three equal feature cards + Lucide icon in a colored rounded square + rounded-xl border shadow-sm + generic "supercharge your workflow" copy + fade-up animation on every section ``` The combination deserves review even though each piece can be legitimate by itself. ## Example: high-confidence pseudo-premium cluster ```text cream page background + fashionable editorial serif + sage primary + oversized whitespace + small all-caps eyebrow + decorative line art + vague restrained copy + generic product screenshot card ``` Again, the combination is only a finding when the project has no design rationale for it. ## Example: pseudo-technical cluster ```text near-black background + tiny gray monospace metadata + arbitrary version number + slash separators + oversized empty region + fake terminal command + system labels used decoratively ``` ## Example: copy cluster ```text heading restatement + generic benefit paragraph + staged opener + forced triad + abstract business language + one-line closer ``` Clusters help Layr avoid aesthetic policing, because a bundle can be described back to the team that built the surface. A finding that names eight converging choices opens a conversation about which of them were decisions. A finding that names one color opens an argument about taste. --- ## The correction model A good anti-slop review should improve decision quality while preserving the project's own visual direction. ## Step 1: recover the brief Before changing the interface, identify: - product purpose; - audience; - primary user task; - desired emotional quality; - existing design tokens; - brand colors; - typography choices; - reference products or visual references; - platform conventions; - accessibility constraints; - density requirements; - domain-specific expectations. When those inputs already exist, the agent should follow them. When they do not exist, the agent should expose the missing decision and avoid silently choosing the statistically common answer. --- ## Step 2: find defaults masquerading as decisions Look for: - untouched starter tokens; - repeated stock component combinations; - default colors; - default font choices; - template page structures; - generic icons; - standard motion wrappers; - filler copy. The agent should identify the underlying default before proposing a visual replacement. --- ## Step 3: identify what each element is trying to do Map each candidate element to a function: ```text information hierarchy grouping affordance state feedback navigation accessibility identity emotion ``` An element with no function becomes a removal candidate. --- ## Step 4: remove before decorating Many weak interfaces improve when unnecessary material disappears. Try removing: - one container level; - one description; - one badge; - one icon wrapper; - one decorative accent; - one animation; - one redundant heading; - one generic CTA; - one fake metadata label. Then reevaluate hierarchy. --- ## Step 5: replace with project-specific choices When an element still needs treatment, use the project's actual system. Examples: - apply the documented brand primary when the current color is an unspecified fashionable default; - use documented radius tokens; - choose layout based on content hierarchy; - use real screenshots or data where product proof matters; - write copy from real capabilities; - use semantic status colors; - connect motion to state. --- ## Step 6: verify the full state model A de-slopped default state can still hide generated behavior. Test: - responsive widths; - long labels; - empty data; - dense data; - loading; - error; - permissions; - keyboard focus; - reduced motion; - disabled actions; - partial results; - offline or retry behavior where relevant. --- ## Step 7: run the specificity review Ask whether the finished surface could be transplanted into an unrelated product with only the logo changed. If the answer is yes, inspect where the product's real structure, language, content, or identity has been lost. Specificity should come from real product differences. Arbitrary decoration weakens that specificity. --- ## Agent execution layer ## Agent directive > Review the interface for clusters of unchosen defaults, generic visual recipes, redundant language, and decorative behavior. Do not report a finding solely because a popular visual pattern is present. Establish project intent, inspect observable evidence, verify whether each pattern carries semantic or brand meaning, and recommend the smallest project-specific correction. ## Required behavior The agent must: 1. inspect existing design tokens and components before recommending new ones; 2. identify the product or page goal; 3. distinguish framework defaults from deliberate project choices; 4. evaluate repeated patterns across the whole surface and include isolated components only when they carry strong direct evidence; 5. treat writing as part of the interface; 6. preserve accessibility and consequential instructions; 7. prefer removal when an element adds no information or function; 8. avoid replacing one trend with another unspecified trend; 9. state uncertainty when product intent is unavailable; 10. allow `no finding` when evidence is weak. ## Prohibited agent behavior The agent must not: - declare that AI created a design based on appearance; - ban a color, font, library, component, layout, or aesthetic globally; - convert every interface to Layr's own visual taste; - strip copy that communicates risk, policy, accessibility, constraints, or recovery; - replace purple with green automatically; - replace sans with serif automatically; - remove all cards; - remove all gradients; - remove all rounded corners; - force every interface into minimalism; - add decorative variety merely to appear human; - produce generic findings such as `make this feel less AI` or `add more personality`. --- ## Evidence hierarchy ### High-confidence evidence - untouched starter-library tokens visible in code; - stock component class combinations repeated broadly; - several known slop signals co-occurring in one surface; - copy that directly repeats visible labels or state; - identity or page-type labels that repeat a nearby logo, title, or navigation cue without clarifying context; - decorative metadata with no functional or semantic source; - colored edge treatments on cards or search results that imply state without encoding one; - dead controls or fake interaction; - repeated motion with no state relationship; - layout overflow, inconsistent spacing, or broken responsive behavior; - a design choice conflicts with an existing documented project token or brand rule. ### Medium-confidence evidence - common trend combinations without an explicit project rationale; - generic marketing language; - excessive card containment; - excessive rounding; - common font choices with no documented typography system; - over-large whitespace that appears disconnected from hierarchy; - decorative accent colors with unclear semantics. ### Low-confidence evidence - one purple control; - one gradient; - one card; - one serif heading; - one pill button; - one centered section; - one animation; - one bento layout; - dark mode; - one common font. Low-confidence evidence should rarely produce a finding alone. --- ## Finding contract ```yaml finding: rule_id: LAYR-001 title: string category: - default-slop - pseudo-slop - visual-slop - copy-slop - interaction-slop - layout-slop location: string evidence: observable: - string contextual: - string cluster: - string intent_check: documented_choice: true | false | unknown semantic_role: string | null brand_role: string | null impact: specificity: low | medium | high comprehension: low | medium | high usability: low | medium | high accessibility: low | medium | high severity: low | medium | high confidence: low | medium | high recommendation: remove?: string | null change?: string | null preserve: - string rationale: string replacement_check: introduces_new_unspecified_default: true | false ``` --- ## Example agent findings ### Finding A: decorative feature cards ```yaml finding: rule_id: LAYR-001 title: "Feature section relies on a repeated starter-card recipe" category: [default-slop, visual-slop] location: "/home#features" evidence: observable: - "Six feature items use the same rounded card, border, shadow, icon square, title, and two-line description." - "The card treatment is identical across unrelated feature types." contextual: - "The project's design tokens define section dividers and editorial rows, but this section bypasses those patterns." cluster: - "cardification" - "decorative icon containers" - "uniform spacing" intent_check: documented_choice: false semantic_role: "Feature grouping" brand_role: null impact: specificity: high comprehension: medium usability: low accessibility: low severity: medium confidence: high recommendation: remove: "Remove independent card containers for features that do not have their own state or action scope." change: "Render the features as editorial rows separated by rules, using the existing typography and spacing tokens." preserve: - "Feature titles" - "Product-specific descriptions" rationale: "The section keeps the information while restoring hierarchy and aligning with the documented design language." replacement_check: introduces_new_unspecified_default: false ``` ### Finding B: redundant settings copy ```yaml finding: rule_id: LAYR-001 title: "Supporting copy repeats the setting label" category: [copy-slop] location: "/settings/notifications" evidence: observable: - "Heading: Email notifications" - "Description: Receive notifications by email." - "The toggle directly beside the copy controls that state." contextual: [] cluster: - "heading restatement" - "obvious-control explanation" intent_check: documented_choice: false semantic_role: "None beyond the label" brand_role: null impact: specificity: medium comprehension: low usability: low accessibility: low severity: low confidence: high recommendation: remove: "Remove the description." change: null preserve: - "Email notifications label" - "Accessible toggle name" rationale: "The description adds no consequence, constraint, or recovery information." replacement_check: introduces_new_unspecified_default: false ``` ### Finding C: intentional purple brand ```yaml result: rule_id: LAYR-001 finding: null reason: > Violet is used as the documented brand primary across marketing, product, illustrations, and focus states. The hue has a defined token ramp and does not appear as a generic purple-to-blue gradient. A popular color alone is insufficient evidence of slop. ``` Returning no finding is a required outcome rather than a failed review. A rule that can only produce findings will produce them where none exist, and an anti-slop review that never clears a surface teaches teams to ignore it. --- ## Human-facing review checklist A designer or founder should be able to use this section without reading the agent schema. ## Visual decisions - Can I explain why this palette belongs to this product? - Can I explain why this type system belongs to this product? - Do repeated components share a real semantic role? - Are cards creating useful boundaries? - Does color encode something consistent? - Does every decorative accent have a reason? - Is whitespace shaping hierarchy or merely making the page look expensive? - Does the interface still feel coherent with real content lengths? - Are the loading and error states designed to the same standard as the happy path? - Does motion explain state or simply animate the page? ## Copy decisions - Does the first sentence add information beyond the heading? - Does helper text add a constraint, consequence, instruction, or recovery path? - Can a paragraph be replaced with a concrete fact? - Are claims specific to this product? - Does the copy contain staged introductions before simple information? - Are there repeated rhetorical patterns that make several sections sound identical? - Does the copy repeat the visible state? - Does an identity or page label add context beyond the nearby logo, title, or navigation? - Are headings descriptive enough to support scanning? - Would removing this sentence change the user's understanding or decision? ## Product specificity - Could the page belong to an unrelated SaaS after changing the logo? - Are screenshots and examples real enough to reveal the product's actual structure? - Do the primary actions reflect the real user goal? - Does the design system have decisions beyond starter defaults? - Are original product concepts visible in the interface? --- ## Before and after examples ## Example 1: generic AI landing hero ### Slop ```text ✨ The future of productivity Supercharge your workflow with AI Unlock seamless collaboration, automate repetitive tasks, and empower your team to achieve more. [ Get started ] [ Learn more ] purple → blue gradient headline large rounded pill buttons three glowing cards below ``` ### Correction ```text Layr reviews interface code against your design rules. Run the same rules locally and in pull requests. Each finding includes its component, evidence, severity, and proposed correction. [ Read the rules ] [ Install Layr ] ``` The correction uses concrete behavior. The visual treatment can then follow Layr's actual design system. --- ## Example 2: card accent with no semantics ### Slop ```text [accent stripe: blue] Fast setup Get started in just minutes. ``` The blue stripe does not represent category or state. The description adds little information. ### Correction ```text Setup Install the CLI, point Layr at the repository, and run `layr review`. ``` Or keep the stripe if it has a defined meaning: ```text blue = design-system rule amber = accessibility warning red = destructive interaction risk ``` Once color carries semantics, the accent earns its place. --- ## Example 3: pseudo-technical copy ### Slop ```text SYSTEM / FOUNDATION / 0.1 Initialize the future of intelligent design infrastructure. ``` ### Correction ```text Design foundations Tokens, typography, spacing, color, motion, and component rules used by Layr. ``` If `0.1` is a real version, keep it and make it useful: ```text Design foundations Version 0.1 · Updated Sep 15, 2026 · View changes ``` --- ## Example 4: overexplained settings ### Slop ```text Appearance Customize the appearance of your interface by choosing the visual theme that best fits your preferences. Theme Select the theme you would like to use for the application. ○ Light ○ Dark ○ System ``` ### Correction ```text Appearance Theme ○ Light ○ Dark ○ System ``` The options explain the choice. --- ## Example 5: necessary explanatory copy ### Keep the detail ```text Delete workspace This permanently deletes 18 projects and their uploaded files. Members will lose access immediately. This action cannot be undone. Type ACME to continue. ``` The copy carries consequence, scope, and irreversibility. Removing it would reduce informed action. --- ## Example 6: common font used intentionally ### Acceptable ```text Typeface: Inter Reason: full language coverage required by the product, stable numeric alignment, existing four-year brand usage, and shared typography across web and native apps. ``` Layr should not flag the font because a real design decision exists. --- ## Example 7: bento layout A bento grid is a weak signal on its own. If the layout communicates different object sizes, priority, or media types clearly, it may be appropriate. The 2026 Reddit-mined dataset found bento-grid complaints near the bottom of the measured signals. Layr should inspect hierarchy and semantics before creating a finding about the pattern. --- ## Example 8: an anti-slop headline with no clear promise ### Slop ```text LAYR-001 · The Intentionality Law AI slop starts with the choices you didn't make. ``` The line sounds like a conclusion, but it does not tell the reader whether this page helps prevent, find, or remove AI slop. The ID and canonical law name add a second title before the point. ### Correction ```text Keep AI slop out of your interface. Every visible decision should support meaning, action, identity, accessibility, or comprehension. ``` The headline names the outcome. The following sentence gives the reader a criterion for reviewing the interface. `LAYR-001` and `The Intentionality Law` remain in the citation and source representation, where they help identify the rule. --- ## Example 9: navigation that leads back to the same place ### Slop ```text Header: Reference [current] Reference index breadcrumb: Reference Rule page: Canonical URL ↗ [opens this same rule page] ``` ### Correction ```text Header: Reference [current] Reference index: no breadcrumb needed Rule page: Copy URL [copies the current address] Rule page: View source Markdown [opens the Markdown representation] ``` The correction keeps navigation to real destinations and gives the current URL a useful action. On deeper pages, a breadcrumb to the parent category can still help. --- ## Example 10: filler in a type specimen and agent description ### Slop ```text Type specimen: Functional clarity. Editorial clarity. Agent description: An open reference connecting established design knowledge with practical instructions for people and software agents. ``` ### Correction ```text Type specimen: Perception & Visual Hierarchy. The Intentionality Law. Agent description: Each rule combines source-backed guidance, a visual study and practical examples. Agents can read its Markdown representation. ``` Real page titles reveal how the type behaves at useful lengths. The agent description states what the reference contains and where agents can read it. --- ## Example 11: a list row that moves on hover ### Slop ```css .category-row > a:hover { padding-left: var(--space-2); color: var(--color-accent-text); } ``` ### Correction ```css .category-row > a:hover { color: var(--color-accent-text); } .category-row > a:focus-visible { outline: 2px solid var(--color-focus); } ``` The row still responds to pointer and keyboard interaction. Its content stays in place because shifting it communicates no additional state. A motion cue with a real purpose should be judged in its own context. --- ## Rules for writing Layr itself Because this law will appear on the Layr website, its own copy should follow the same standard. ## Write for a specific reader Human-facing prose should assume the reader is a designer, engineer, founder, or product person trying to evaluate an interface. Use product examples they can recognize. Avoid generic motivational prose. ## State the point early Readers should understand the rule before reading the theory. ## Keep information density high A long article can be valuable when each section adds a new tool, distinction, example, or exception. Length becomes slop when paragraphs repeat the same principle with different adjectives. ## Prefer literal verbs Use words such as: - remove; - compare; - group; - label; - show; - hide; - measure; - preserve; - retry; - select; - explain; - verify. These verbs describe interface behavior directly. ## Vary rhythm naturally Avoid writing every section with identical paragraph length, identical lists, or the same sentence opening. Technical reference material can be structured while still sounding authored. ## Keep strong opinions tied to evidence When a claim comes from community discussion, label it as community evidence. When a claim comes from established accessibility guidance, say so. When a category is a Layr-specific inference, name it that way. ## Preserve uncertainty AI-slop aesthetics change quickly. The rule should make room for trend drift and intentional exceptions. --- ## Rule maintenance The Intentionality Law should evolve without turning into a frozen style guide. ## Version the signature registry Maintain time-sensitive signals separately from the stable law. Example: ```yaml signature_registry: version: "2026.09" signals: - default-shadcn-treatment - ai-purple-primary - purple-gradient-text - cream-serif-sage-cluster - repeated-rounded-card-cluster - pseudo-technical-metadata - generic-ai-copy-cluster ``` The stable rule remains intentionality. The signature list can change as trends change. ## Review signals periodically A pattern that is highly recognizable in 2026 may become ordinary platform convention later. Another pattern may replace it. Re-evaluate: - prevalence; - false-positive rate; - community recognition; - semantic legitimacy; - accessibility impact; - brand use; - framework defaults. ## Keep community signals separate from usability violations A site can look generic and still be easy to use. A site can look original and still be unusable. Layr should report these dimensions independently when possible, so a team can tell the difference between a page that needs a design decision and a page that needs a usability fix. Collapsing the two lets a genericity complaint borrow the urgency of a real defect, which is how anti-slop review loses credibility. Example: ```yaml impact: genericity: high usability: low accessibility: none observed ``` A surface with that profile deserves a design conversation and no incident. A surface with low genericity and high accessibility impact deserves the opposite, and the separation makes both routable to the people who can act on them. --- ## Research foundation This is an original Layr rule. The sources below inform its detection model and editorial guidance. Each entry states what the source measured or claimed, what this law took from it, and what it cannot support, so a reader can weigh a finding against the evidence behind it rather than against the reputation of the citation. ## Community and AI-slop research ### JCarterJohnson, `vibecoded-design-tells` A self-published, reproducible Reddit-mining project focused on visual cues people associate with vibe-coded websites. Its dataset reports 3,214,533 posts scanned across 47 subreddits between 2020 and 2026, 46,971 on-topic posts, and 3,033 comments drawn from 125 canonical threads asking why AI-built sites look alike. A design-context subset of 32,822 posts carries most of the aesthetic discussion, and roughly 29.5% of that subset registers negative sentiment about how these sites look. The method matters more than the totals. The project ranks tells by prevalence share rather than raw count, because the topic barely existed before 2024: normalized per 10,000 posts, discussion rises from 1.81 in 2023 to 277.91 in 2024 and 335.95 in 2025. Raw counts would have measured the growth of the conversation instead of the weight of each complaint. Comment share inside the 125 canonical threads is the primary signal, since that material is entirely on topic, and post share across the design-context subset is secondary. An independent agent then re-checked each finding for reality, visual validity, and false-positive risk, and 11 of the 12 leading tells survived that pass. The ranked results this law draws on: | Tell | Comment share | Post share | | --- | --- | --- | | Default shadcn/Tailwind kit | 2.5% | 2.2% | | Purple or violet primary | 2.3% | 0.7% | | Gradients and gradient hero text | 2.0% | 1.2% | | Excessive animation and template fades | 1.1% | 2.0% | | Broad rounding and pill buttons | 0.8% | 0.5% | | Dark mode with neon glow | 0.7% | 1.3% | | Emoji used as icons | 0.5% | 2.7% | | Generic sans faces such as Inter or Geist | 0.4% | 0.4% | | Symmetric hero, three cards, CTA | 0.4% | 1.6% | The negative results carry as much weight as the positive ones. Bento grids rank last and are contested by the complainers themselves. Glassmorphism registers between 0.2% and 0.3%. Complaints about mesh, blob, and aurora backgrounds were rejected as a keyword artifact of that run. Layr's list of patterns that do not count as slop by themselves exists because of those three results. Read the numbers for their order rather than their magnitude. Every share is small in absolute terms, because most comments describe the overall feeling of sameness instead of naming a layer, and the author states that share metrics understate the visual impact of fonts and gradients. The ranking tells Layr which signals deserve weight. It does not tell Layr that 2.5% of interfaces have a problem. - Repository: https://github.com/JCarterJohnson/vibecoded-design-tells - UI skill: https://github.com/JCarterJohnson/vibecoded-design-tells/blob/main/skill/SKILL.md - Data and methodology: https://github.com/JCarterJohnson/vibecoded-design-tells/blob/main/unslop-ai-ui/DATA_AND_GRAPHS.md The companion `unslop-ui` skill is a second and separate input. It asks for four decisions before an interface is built: a named reference site or design direction, a specific brand color that is not the framework default, a chosen typeface with a stated reason, and a layout intent derived from real user goals. It carries the rule this law restates as the replacement test, that a fix must apply the project's own choices rather than swap one default for another, and it supports an `unslop-ignore` marker so deliberate choices survive scanning. Layr's correction model owes its sequence to that skill. Its 2026 addition of the cream, serif, and sage combination to the same list is the clearest available evidence that anti-slop recipes turn into recipes. Limits to restate in any finding built on this source. The work is self-published rather than peer-reviewed. It measures what people say about interfaces, not what those interfaces do to task success, so nothing here supports a usability claim. Reddit skews toward developers, indie founders, and early-stage products, which over-represents the categories where generated sites are most common. Two of the largest subreddits needed backoff recovery during collection, which affects coverage. Treat the percentages as dataset-specific measurements of community recognition. ### Reddit discussions reviewed Several 2026 discussions repeat themes of visual sameness, generic purple/blue palettes, rounded boxes, default component-library output, repetitive landing-page structures, and the need for project-specific design decisions. Two things recur across them that the ranked dataset does not capture. Complaints cluster on marketing pages rather than on product surfaces, because landing pages are what people share, which means the corpus says more about first impressions than about interfaces people use daily. And commenters describe the effect before they can localize it: the page is identified as generated, then the reasons get assembled afterwards. That order is why this law reviews clusters and why it keeps authorship out of findings. Representative threads: - https://www.reddit.com/r/ClaudeCode/comments/1u7g0z5/i_scanned_3200000_posts_across_47_ai_and_saas/ - https://www.reddit.com/r/vibecoding/comments/1p5vfjr/i_analysed_500_vibe_coded_websites_heres_what_i/ - https://www.reddit.com/r/vibecoding/comments/1ubewk8/any_advice_to_escape_the_ai_slop_web_design_look/ - https://www.reddit.com/r/vibecoding/comments/1s37qlp/what_are_the_signs_of_an_ai_slop_ui/ - https://www.reddit.com/r/micro_saas/comments/1skltqv/stop_making_vibecoded_sites_that_look_like_ai_slop/ - https://www.reddit.com/r/webdesign/comments/1vfck61/it_feels_like_there_are_more_ai_websites_than/ Treat comments as observations and opinions, not controlled usability evidence. They establish that a pattern is recognizable to a technical audience in 2026. They establish nothing about comprehension, task success, error rates, or conversion, and a finding that cites them should claim only what they can carry. --- ## AI-writing pattern reference ### blader/humanizer `humanizer` is an MIT-licensed agent skill for editing AI-sounding prose. It works from one premise: a language model writes what is most likely to come next, while a person chooses for one reader and one subject. Every pattern it documents is a statistically favored default rather than a decision, which makes it this law's argument applied to sentences instead of surfaces. Its catalog holds 25 patterns in five groups, and it grades them instead of listing them flat. Five are strong enough to act on after a single sighting: not-X-but-Y contrasts, one-line closers and dramatic fragments, aphorisms that dress an ordinary point as a hidden truth, staged run-ups before the point, and arguing against a position nobody raised. The rhythm group is weak alone and needs companions: forced triads, repeated sentence openings, dashes used as a universal connector, stacked qualifiers, hyphenated pairs, and passive constructions that hide who acts. A third group covers inflation and borrowed authority, including overused vocabulary, inflated significance, vague connective verbs, shallow `-ing` riders, sales language, unnamed experts, and the avoidance of `is`, `are`, and `has`. A fourth covers formatting by rule: bold as decoration, decorative headings, curly quotation marks. The last covers leftovers from chat and draft, where chatbot residue is described as the most certain tell on the list and the easiest to miss, because the wrapper surrounds real content. Three of its structural decisions carry into Layr unchanged. Patterns are graded by strength rather than treated as equal. Several tells appearing together are the safeguard against false positives. And the skill names when not to act, exempting quotations, titles, proper names, discussion of the phrase itself, and any text written before models could have produced it. Layr adapts those ideas to product copy and changes what the review protects. Humanizer preserves the writer's voice. Layr preserves the reader's ability to act, so a consequence, a constraint, a recovery path, or an accessibility instruction outranks every pattern in the catalog. Where the two conflict, the information stays and the pattern survives. The examples and wording in this document are original to Layr. - Repository: https://github.com/blader/humanizer - Skill: https://github.com/blader/humanizer/blob/main/SKILL.md - License: https://github.com/blader/humanizer/blob/main/LICENSE ### Emoji-as-formatting sources Wikipedia's `Signs of AI writing` carries a dedicated `Emoji as formatting` entry among its style signals, and frames the whole list the way this law frames its own: the patterns are "only potential signs of a problem, not the problem itself." The sparkle's adoption as the visual shorthand for AI is documented separately, which is what makes it the most self-defeating glyph a product can open a section with. The Reddit-mined dataset already cited under community research measured emoji used as icons rather than emoji in prose; it is the closest quantitative evidence available and is reported in section 12 rather than restated here. - Signs of AI writing: https://en.wikipedia.org/wiki/Wikipedia:Signs_of_AI_writing - Sparkles emoji: https://en.wikipedia.org/wiki/Sparkles_emoji - Detecting AI text, including emoji tells: https://www.rte.ie/brainstorm/2025/1128/1545935-chatgpt-ai-writing-text-detection-words-phrases-emojis/ --- ## Established UX and accessibility guidance ### Nielsen Norman Group: Aesthetic and Minimalist Design Nielsen's eighth usability heuristic argues that irrelevant or rarely needed information competes with relevant information for attention, so every extra unit on a screen diminishes the visibility of the units that matter. The supporting article separates two ideas that are usually merged. Minimalist design means including everything necessary and nothing more, which makes removing too much a failure of the same heuristic as adding too much. Aesthetic design means applying scale, hierarchy, balance, contrast, and the Gestalt principles well. A visually spare interface can fail the heuristic by omitting what people need, and a visually rich interface can satisfy it completely. That distinction is load-bearing here. It is the guidance that stops an anti-slop review from becoming an argument for flat, grey, empty pages, and it supplies the removal criterion this law uses: maximize the elements with informational value, reduce the ones without it, and judge both by what the reader needs rather than by how much is on the screen. The article also describes the aesthetic-usability effect, where people judge attractive interfaces as easier to use and forgive real problems in them. Layr uses that in both directions. A polished generated surface can hide an incomplete product model, which is why the interaction catalog exists. A surface that reads as generic is not automatically harder to use, which is why genericity and usability are reported as separate dimensions. - https://www.nngroup.com/articles/aesthetic-minimalist-design/ ### Nielsen Norman Group: Concise, Scannable, and Objective Web Writing Morkes and Nielsen tested five versions of one travel site holding identical information: a promotional control, a version cut to about half the word count, a version reformatted with headings, lists, and bold text, a version with the promotional language stripped out, and a version combining the last three. Measured against the control, the concise version scored 58% better on the study's usability index, the scannable version 47%, the objective version 27%, and the combined version 124%. Two results survive the study's age. Conciseness did the most work of any single edit, and the three edits compounded rather than traded against each other, which argues against treating scannable formatting as a substitute for cutting words. The finding that readers distrust promotional language also explains why generic benefit copy underperforms on product pages even when it reads smoothly. State the caveats whenever the numbers are cited. This is a 1997 study, run on a single site, with a small participant pool, and the percentages describe that experiment rather than a constant to apply elsewhere. Layr cites the ranking and the direction, never a promised improvement. - https://www.nngroup.com/articles/concise-scannable-and-objective-how-to-write-for-the-web/ ### W3C WAI: Clear and Understandable Content This cognitive accessibility objective collects thirteen design patterns under one goal, that people with language and processing impairments can understand a page. The patterns this law's copy catalog draws on most are clear words in place of complicated vocabulary, simple tense and voice, avoiding double negatives and nested clauses, literal rather than figurative language, succinct text, unambiguous formatting and punctuation, instructions separated rather than combined, implied content made explicit, and white space used as visual separation. Two of them cut against a reflex an anti-slop review can develop. Explaining implied content asks writers to state unstated assumptions, and providing summaries asks for an overview of long material. Both add words. A review optimizing only for brevity will delete exactly the sentences this guidance requires, which is why the law's criterion is informed action rather than word count. State the status precisely in a finding. These are supplemental W3C materials supporting WCAG 2, not success criteria, so they inform recommendations and do not establish conformance failures. - https://www.w3.org/WAI/WCAG2/supplemental/objectives/o3-clear-content/ ### W3C WAI: Keep Text Succinct The pattern asks for content chunked into short blocks: one topic per paragraph, the main point first, one point per sentence, unordered lists for items and requirements, numbered lists for sequences of three or more steps, and concise descriptive headings. It suggests breaking paragraphs longer than about 50 words, and watching for repeated linking words such as `and` and `but`, which usually mark a sentence carrying more than one point. It names who this serves: readers with learning disabilities, memory impairments, or difficulty sustaining attention, and anyone reading while doing something else. That framing changes the argument. Front-loading the main point and splitting a long sentence are accessibility work rather than style preference, which gives Layr a basis for copy findings that would otherwise reduce to taste. Two entries in the copy catalog come directly from this pattern. Copy that hides the useful fact is the failure it describes, and the formatting-by-rule entry inherits its distinction between lists a reader jumps into and prose that happens to be arranged vertically. - https://www.w3.org/WAI/WCAG2/supplemental/patterns/o3p05-succinct-text/ ### Apple Human Interface Guidelines: Design Principles Apple's current design principles connect purpose, clarity, hierarchy, consistency, harmony, and craft, and three of them map onto this law closely. Clarity is described as a product of hierarchy, where order, spacing, and contrast make the most important item on a screen the most obvious one, which is the standard the centering and whitespace entries measure against. Consistency is stated behaviorally, that things which look the same should behave the same, which is the argument this law makes against decorative accents, fake controls, and status color without a mapping. Craft is framed as the attention to detail that builds trust, naming typography, responsive animation, performance, and iteration, and it supports the layout-quality entry against the assumption that anti-slop work is mostly color and typeface selection. Cite this as platform design guidance from a vendor with a strong point of view, not as independent research. It is persuasive about intent and hierarchy. It is not evidence about what people recognize as generated, and it describes conventions that are strongest on Apple platforms. - https://developer.apple.com/design/human-interface-guidelines/design-principles --- ## Source and evidence caveats The term `AI slop` is informal. It does not have one accepted academic definition. Community recognition changes as tools, templates, and model defaults change. A visual pattern that reads as generated today may become an ordinary convention later. Human designers also use the same patterns, and AI-assisted teams can produce highly intentional work. For those reasons, Layr should use this law to evaluate **decision quality and observable interface consequences**. Authorship should remain outside the finding. The most durable question remains simple: > **Does this interface contain a choice because the product needs it, or because the generator needed something to put there?** ## Agent guidance Review criteria, the finding contract a report must use, and worked examples. Original Layr principle. Category: Layr Principles. ## Retrieve - Canonical page: https://layr.design/reference/layr-001-intentionality - Markdown for agents: https://layr.design/__layr/pages/reference/layr-001-intentionality.md - Reference map: https://layr.design/llms.txt - Route index: https://layr.design/__layr/routes.toon ## Rule object ```yaml rule: id: "LAYR-001" title: "The Intentionality Law" category: "Layr Principles" origin: layr-original canonical_url: "https://layr.design/reference/layr-001-intentionality" principle: "Every visible decision should support meaning, action, identity, accessibility, or comprehension. Remove what does none of those." directive: "Review the interface for clusters of unchosen defaults, generic visual recipes, redundant language, and decorative behavior. Do not report a finding solely because a popular visual pattern is present. Establish project intent, inspect observable evidence, verify whether each pattern carries semantic or brand meaning, and recommend the smallest project-specific correction." applies_when: [] observable_signals: - "an untouched component-library theme;" - "the default neutral ramp from a starter kit;" - "default radius values used everywhere;" - "the first common font suggested by the framework;" - "a common violet or indigo primary chosen because no brand color was supplied;" - "a stock hero layout produced by a template;" - "standard animation wrappers added to every section;" - "generic placeholder illustrations promoted into final production UI." - "replacing purple gradients with cream, serif typography, and sage green because that combination currently reads as tasteful;" - "replacing Inter with the current fashionable editorial serif without considering the product voice;" - "removing rounded cards everywhere and forcing sharp brutalist geometry because anti-AI discourse currently favors it;" - "converting a generic SaaS page into a generic editorial page while preserving the same underlying structure and content." - "headings restated in the first sentence;" - "helper text that repeats a label;" - "identity or page-type labels that repeat a nearby logo, title, or navigation cue;" - "descriptions that explain an obvious control;" - "generic marketing claims with no product-specific information;" - "filler sections added to make a page feel substantial;" - "AI-style staging before a simple point;" - "formulaic conclusions that repeat what the section already said;" - "overuse of bold labels, decorative headings, or prose patterns that make every section sound generated from the same template." - "buttons that exist because the template expects a button but lead nowhere;" - "repeated confirmations for harmless actions;" - "missing loading, empty, error, or partial-success states;" - "motion attached to every element without conveying state;" - "decorative status colors that have no consistent semantic mapping;" - "fake progress indicators that are disconnected from real system progress;" - "a polished happy path paired with raw or inconsistent failure states." audit_questions: - "Purpose test: Ask what job the element performs." - "Product-specificity test: Ask whether the same element could appear unchanged in dozens of unrelated products." - "Subtraction test: Temporarily remove the element." - "Semantic test: If a visual treatment looks meaningful, verify that it represents something real." - "Replacement test: A correction fails when it swaps one unspecified default for another." - "Explanation test: Compare the copy with what the interface already communicates." recommended_actions: - "inspect existing design tokens and components before recommending new ones;" - "identify the product or page goal;" - "distinguish framework defaults from deliberate project choices;" - "evaluate repeated patterns across the whole surface and include isolated components only when they carry strong direct evidence;" - "treat writing as part of the interface;" - "preserve accessibility and consequential instructions;" - "prefer removal when an element adds no information or function;" - "avoid replacing one trend with another unspecified trend;" - "state uncertainty when product intent is unavailable;" - "allow no finding when evidence is weak." avoid_when: - "declare that AI created a design based on appearance;" - "ban a color, font, library, component, layout, or aesthetic globally;" - "convert every interface to Layr's own visual taste;" - "strip copy that communicates risk, policy, accessibility, constraints, or recovery;" - "replace purple with green automatically;" - "replace sans with serif automatically;" - "remove all cards;" - "remove all gradients;" - "remove all rounded corners;" - "force every interface into minimalism;" - "add decorative variety merely to appear human;" - "produce generic findings such as make this feel less AI or add more personality." common_failure_patterns: [] ``` ## Review procedure For every finding: 1. inspect existing design tokens and components before recommending new ones; 2. identify the product or page goal; 3. distinguish framework defaults from deliberate project choices; 4. evaluate repeated patterns across the whole surface and include isolated components only when they carry strong direct evidence; 5. treat writing as part of the interface; 6. preserve accessibility and consequential instructions; 7. prefer removal when an element adds no information or function; 8. avoid replacing one trend with another unspecified trend; 9. state uncertainty when product intent is unavailable; 10. allow no finding when evidence is weak. ## Prohibited - declare that AI created a design based on appearance; - ban a color, font, library, component, layout, or aesthetic globally; - convert every interface to Layr's own visual taste; - strip copy that communicates risk, policy, accessibility, constraints, or recovery; - replace purple with green automatically; - replace sans with serif automatically; - remove all cards; - remove all gradients; - remove all rounded corners; - force every interface into minimalism; - add decorative variety merely to appear human; - produce generic findings such as make this feel less AI or add more personality. ## Evidence hierarchy high-confidence: - untouched starter-library tokens visible in code; - stock component class combinations repeated broadly; - several known slop signals co-occurring in one surface; - copy that directly repeats visible labels or state; - identity or page-type labels that repeat a nearby logo, title, or navigation cue without clarifying context; - decorative metadata with no functional or semantic source; - colored edge treatments on cards or search results that imply state without encoding one; - dead controls or fake interaction; - repeated motion with no state relationship; - layout overflow, inconsistent spacing, or broken responsive behavior; - a design choice conflicts with an existing documented project token or brand rule. medium-confidence: - common trend combinations without an explicit project rationale; - generic marketing language; - excessive card containment; - excessive rounding; - common font choices with no documented typography system; - over-large whitespace that appears disconnected from hierarchy; - decorative accent colors with unclear semantics. low-confidence: - one purple control; - one gradient; - one card; - one serif heading; - one pill button; - one centered section; - one animation; - one bento layout; - dark mode; - one common font. ## Finding contract — emit exactly this shape ```yaml finding: rule_id: LAYR-001 title: string category: - default-slop - pseudo-slop - visual-slop - copy-slop - interaction-slop - layout-slop location: string evidence: observable: - string contextual: - string cluster: - string intent_check: documented_choice: true | false | unknown semantic_role: string | null brand_role: string | null impact: specificity: low | medium | high comprehension: low | medium | high usability: low | medium | high accessibility: low | medium | high severity: low | medium | high confidence: low | medium | high recommendation: remove?: string | null change?: string | null preserve: - string rationale: string replacement_check: introduces_new_unspecified_default: true | false ``` ## Worked examples ### Finding A: decorative feature cards ```yaml finding: rule_id: LAYR-001 title: "Feature section relies on a repeated starter-card recipe" category: [default-slop, visual-slop] location: "/home#features" evidence: observable: - "Six feature items use the same rounded card, border, shadow, icon square, title, and two-line description." - "The card treatment is identical across unrelated feature types." contextual: - "The project's design tokens define section dividers and editorial rows, but this section bypasses those patterns." cluster: - "cardification" - "decorative icon containers" - "uniform spacing" intent_check: documented_choice: false semantic_role: "Feature grouping" brand_role: null impact: specificity: high comprehension: medium usability: low accessibility: low severity: medium confidence: high recommendation: remove: "Remove independent card containers for features that do not have their own state or action scope." change: "Render the features as editorial rows separated by rules, using the existing typography and spacing tokens." preserve: - "Feature titles" - "Product-specific descriptions" rationale: "The section keeps the information while restoring hierarchy and aligning with the documented design language." replacement_check: introduces_new_unspecified_default: false ``` ### Finding B: redundant settings copy ```yaml finding: rule_id: LAYR-001 title: "Supporting copy repeats the setting label" category: [copy-slop] location: "/settings/notifications" evidence: observable: - "Heading: Email notifications" - "Description: Receive notifications by email." - "The toggle directly beside the copy controls that state." contextual: [] cluster: - "heading restatement" - "obvious-control explanation" intent_check: documented_choice: false semantic_role: "None beyond the label" brand_role: null impact: specificity: medium comprehension: low usability: low accessibility: low severity: low confidence: high recommendation: remove: "Remove the description." change: null preserve: - "Email notifications label" - "Accessible toggle name" rationale: "The description adds no consequence, constraint, or recovery information." replacement_check: introduces_new_unspecified_default: false ``` ### Finding C: intentional purple brand ```yaml result: rule_id: LAYR-001 finding: null reason: > Violet is used as the documented brand primary across marketing, product, illustrations, and focus states. The hue has a defined token ramp and does not appear as a generic purple-to-blue gradient. A popular color alone is insufficient evidence of slop. ``` ## Before and after ### 1. Heading restatement ```text # before Notifications Manage your notifications and notification preferences. ``` ```text # after Notifications ``` ### 2. Obvious-control explanation ```text # before Invite member Use this button to invite a new member to your workspace. [ Invite member ] ``` ```text # after Team members 12 [ Invite member ] ``` ### 3. Generic section filler ```text # before Powerful analytics Gain valuable insights into your data with our robust analytics platform designed to help you make smarter decisions and unlock your full potential. ``` ```text # after Analytics Compare conversion by source, plan, and signup week. Export the current view as CSV. ``` ### 4. Staged openings ```text # before Here's what you need to know about workspace roles. Let's break down how each permission level works. ``` ```text # after Workspace roles control who can edit settings, manage billing, and invite members. ``` ### 5. Artificial contrast ```text # before This feature goes beyond simple search. It transforms the way your team discovers information. ``` ```text # after Search across documents, comments, and attachments from one command menu. ``` ### 6. Dramatic one-line closers ```text # before The rule engine evaluates every component against the active ruleset. That changes everything. ``` ```text # after The rule engine evaluates every component against the active ruleset and attaches evidence to each finding. ``` ### 7. Forced symmetry and triads ```text # before Design faster, collaborate smarter, and ship better. ``` ```text # after Run the same design rules in local review, pull requests, and the Layr reference site. ``` ### 8. Inflated significance ```text # before This groundbreaking workflow represents a pivotal shift in how modern teams approach design quality. ``` ```text # after The workflow runs design checks before a pull request is merged. ``` ### 9. Abstract business vocabulary ```text # before A robust platform that empowers teams to streamline workflows and unlock seamless collaboration. ``` ```text # after Designers can leave a finding in Layr and create the corresponding Linear or GitHub issue without copying the context manually. ``` ### 13. Copy that repeats visible state ```text # before Upload complete Your upload has completed successfully. ``` ```text # after Upload complete 243 records imported. 7 need review. ``` ### 14. Copy that hides the useful fact ```text # before To help ensure that the process works as expected and that we are able to provide you with the best possible experience, there may be circumstances in which certain records cannot be imported due to issues with the original source data. ``` ```text # after Rows with missing IDs will be skipped. You can download them after the import and retry once the IDs are fixed. ``` ### 15. Redundant identity and page labels ```text # before [ LAYR logo ] LAYR | Design Reference LAYR DESIGN REFERENCE Rules for interfaces understood by humans and agents. ``` ```text # after [ LAYR logo ] LAYR Rules for interfaces understood by humans and agents. ``` ### 16. Emoji as formatting ```text # before 🚀 Getting started ✨ Why teams choose us ✅ Fast setup ✅ Secure by default 🔒 Enterprise-grade security 💡 Pro tip: you can also import from CSV. ``` ```text # after Getting started Why teams choose us Setup takes about two minutes. Data is encrypted at rest and in transit. Tip: you can also import from CSV. ``` ### Example 1: generic AI landing hero ```text # before ✨ The future of productivity Supercharge your workflow with AI Unlock seamless collaboration, automate repetitive tasks, and empower your team to achieve more. [ Get started ] [ Learn more ] purple → blue gradient headline large rounded pill buttons three glowing cards below ``` ```text # after Layr reviews interface code against your design rules. Run the same rules locally and in pull requests. Each finding includes its component, evidence, severity, and proposed correction. [ Read the rules ] [ Install Layr ] ``` ### Example 2: card accent with no semantics ```text # before [accent stripe: blue] Fast setup Get started in just minutes. ``` ```text # after Setup Install the CLI, point Layr at the repository, and run `layr review`. ``` ### Example 3: pseudo-technical copy ```text # before SYSTEM / FOUNDATION / 0.1 Initialize the future of intelligent design infrastructure. ``` ```text # after Design foundations Tokens, typography, spacing, color, motion, and component rules used by Layr. ``` ### Example 4: overexplained settings ```text # before Appearance Customize the appearance of your interface by choosing the visual theme that best fits your preferences. Theme Select the theme you would like to use for the application. ○ Light ○ Dark ○ System ``` ```text # after Appearance Theme ○ Light ○ Dark ○ System ``` ### Example 8: an anti-slop headline with no clear promise ```text # before LAYR-001 · The Intentionality Law AI slop starts with the choices you didn't make. ``` ```text # after Keep AI slop out of your interface. Every visible decision should support meaning, action, identity, accessibility, or comprehension. ``` ### Example 9: navigation that leads back to the same place ```text # before Header: Reference [current] Reference index breadcrumb: Reference Rule page: Canonical URL ↗ [opens this same rule page] ``` ```text # after Header: Reference [current] Reference index: no breadcrumb needed Rule page: Copy URL [copies the current address] Rule page: View source Markdown [opens the Markdown representation] ``` ### Example 10: filler in a type specimen and agent description ```text # before Type specimen: Functional clarity. Editorial clarity. Agent description: An open reference connecting established design knowledge with practical instructions for people and software agents. ``` ```text # after Type specimen: Perception & Visual Hierarchy. The Intentionality Law. Agent description: Each rule combines source-backed guidance, a visual study and practical examples. Agents can read its Markdown representation. ``` ### Example 11: a list row that moves on hover ```text # before .category-row > a:hover { padding-left: var(--space-2); color: var(--color-accent-text); } ``` ```text # after .category-row > a:hover { color: var(--color-accent-text); } .category-row > a:focus-visible { outline: 2px solid var(--color-focus); } ``` ## Reporting rules - Report only what the interface shows as observable evidence; phrase psychological or motivational effects as possible consequences. - Returning no finding is a valid result when evidence is insufficient.