Files
re-xxm/.opencode/skills/unslop/references/signs.md
T
2026-11-01 23:18:03 +08:00

6.9 KiB

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.