Signs of slop

Go through every group and note each sign you find with where it lives. Each line pairs the sign with its fix.

Surfaces and color

• Purple to blue or violet to pink gradients on backgrounds, cards, buttons or the active nav item → one neutral surface, accent only where it means something
• Gradient text in headings, numbers or the logo → solid primary text color
• Colored glows, like shadow-[0_0_20px_rgba(139,92,246,0.5)], drop-shadow on emoji or glowing pills → remove, depth from surface steps and hairlines
• Radial color washes or blurred blobs behind content → remove
• Neon or high contrast colored borders → hairline at 6 to 10% opacity
• Many near identical tints of the same hue for text, like five lavenders → three text roles from one neutral ramp
• Every element highlighted, so nothing stands out → one accent used once or twice per screen
• Glass cards with a white inner highlight and a colored shadow → plain raised surface with a hairline

Type

• Headings at weight 800 or 900 → 400 to 500 and size for hierarchy
• Uppercase labels with wide tracking, like NAVIGATION or PAID THIS MONTH → sentence case at normal or slightly open tracking
• Too many sizes and weights on one screen → a few sizes from the scale, weights 400 and 500
• Numbers in mixed formats, like $48,210 next to $124,860.40, or 07 → one format, tabular figures
• Negative letter spacing on small text → zero or slightly positive
• Italic used for emphasis → color or weight instead

Icons

• Emoji as nav icons, label decoration or status, like 🏠 📥 🚀 💰 ⚠️ 📈 🔥 😬 → one line icon set or nothing
• Emoji inside pills and counts, like 18 👤 → plain number
• Icons in many sizes and colors → one size, one stroke, text role color
• Icons nudged off the column → same icon box width in every row
• A sparkle ✨ for anything AI → remove or use a plain icon only where it explains something

Spacing

• Arbitrary values, like mt-[13px], ml-[7px], h-[31px] → steps on the 4px scale
• Rows in one list with different heights or gaps → one height, one gap
• Groups that sit closer to their neighbours than to their own items → smaller gaps inside groups, bigger between them
• Uneven padding inside sibling cards → one padding
• Big empty gaps above a section and cramped space below it → balanced rhythm

Copy

• Greeting headlines, like Welcome back, Damir! 👋 → the page or period as the title
• Exclamation marks and !! → plain statement
• Changes without a reference, like +12%!! or 3 less!! → +12% vs last month, 3 fewer vs last month
• Wordy placeholders, like Search anything... → Search
• Hype words, like supercharge, seamless, unlock, magic, revolutionize → what the thing actually does
• Trailing periods on labels and buttons → none
• Fake looking data, like $123,456 or [X] → plausible numbers

Components

• Glowing pills for counts, plans, shortcuts or status → quiet mono text or a keycap
• PRO, New ✨, Beta 🚀 badges everywhere → remove or one quiet text badge
• Every element a full pill, from search to buttons to cards → radius by size, nested radius math
• Charts with rainbow bars, glowing bars, pill shaped bars or uppercase day labels → one or two series, muted grid and mono labels, one highlight color
• Every chart or stack in several shades of the accent, so nothing leads → neutral steps with the accent only on the one thing that matters
• Sparklines, tallies or mini bars added to every stat card → the number, its label and its change
• Equal cards side by side, each with the same chart or layout → one main chart, compact stats, varied widths
• Logo as a gradient tile with a sparkle and a gradient wordmark → product name as text plus a simple flat mark
• Logo mark as a glossy orb, a gradient ball or a glowing dot → a flat glyph in one solid color, or the wordmark alone

Landing pages and heroes

• A pill badge above the headline, like ✨ Introducing X 2.0 → remove, or a quiet text link if it is real news
• A headline that could fit any product, like Supercharge your workflow with AI → say what the product does for whom
• Gradient or shimmer on the headline → solid text
• Floating blobs, orbs, grids and glowing lines behind the hero → plain background or one real product visual
• Everything stacked and centered, headline, text, buttons and a picture below → an asymmetric split or text over a large product view, see the Layout pass
• Three or more buttons, or chips and avatars stacked under the buttons → one primary and at most one secondary action
• Trusted by 10,000+ teams, Loved by 10,000+, rows of avatar dots or five stars without a source → ask if it is real, then make it quiet and specific or remove it
• Parallax and elements floating on scroll → static layout, motion only with a purpose
• Feature cards with an emoji, a bold title and a vague line each → fewer features, concrete copy, line icons or none

Visuals

• Glossy 3D blobs, orbs, liquid chrome shapes or a purple nebula as the hero visual → the product itself or one concrete metaphor for what it does
• Stock robots, glowing brains, circuit lines or holograms for anything AI → remove, or show what the AI actually produces
• Text, fake buttons or a fake logo baked into an image → real text in the page, a clean image without text
• An image that does not blend into the page, with a hard edge and a different black → background matched to the page and a soft mask at the edges
• A visual on every section → one visual where it helps, usually only the hero

Motion

• animate-pulse, animate-ping or breathing glows on things that are not live → static
• transition-all and hover:scale on cards and buttons → color or surface step on hover, a tiny scale down on press
• Bouncy springs and overshoot on simple UI → one ease-out curve
• Everything flying in on load from different directions → one short fade and rise with a small stagger
• Parallax, floating loops and elements that move on scroll → static layout
• Animating width, height, top or left → transform and opacity

Template look

These are not slop, but they are what a cleaned up screen falls back to when nobody made a decision. Watch for them after the passes.

• Pure grey #161616 page, Inter, white text and the old brand color on one button, on a product whose world is warm or bright → a ramp tinted toward the world and an accent from it
• A headline that would fit another product if you swapped the name → say what this product does, with its own nouns
• A hero visual that is an empty box or a generic picture → a product preview in code or an image from the world
• Every product getting the same layout, type and palette → let the direction choose

---

Part of unslop by Damir Sokolovsky (@heydamir), CC BY 4.0. Keep this credit in copies and adaptations.