---
title: "Anti-slop: 30 tells with before/after (craft)"
description: "Each tell reads as \"generated\" because the measured top sites don't do it. Numbers are from the 24-site teardown (2026-09-15)."
canonical: https://void-design.vercel.app/docs/craft/anti-slop
lastModified: 2026-09-16
---
# Anti-slop: 30 tells with before/after
Each tell reads as "generated" because the measured top sites don't do it. Numbers are from the 24-site teardown (2026-09-15). Run this list against screenshots at 1440 and 390.
## Color
**1. Purple→blue gradients.** 0 of 24 sites put a gradient on a CTA or headline at the fold; Stripe's gradient is an art-directed WebGL ribbon.
```tsx
// before
Get started
// after
// bg-brand, flat, inset highlight
```
**2. Gradient headline text.** (`design/gradient-text`)
```tsx
// before
The future of work
// after
Standups in 4 minutes. Written by the tickets.
```
**3. Rainbow accents.** Measured accent use ≤ 5% of elements, one hue. (`design/multiple-accents`)
```tsx
// before:
// after: every icon className="size-4 text-fg-muted"; brand only on the CTA and links
```
**4. Pure black on white + gray-500.** Foregrounds measured: #171717, #141413, #26251e; backgrounds #fafafa, #faf9f5.
```tsx
// before
// after (nothing on body: base sets bg-bg text-fg)
```
**5. Solid gray borders everywhere.** Measured hairlines are 1px at 5–12% alpha.
```tsx
// before
// after
// or surface-card
```
**6. Glass cards.** Blur measured only on headers (Linear 20px, Mercury 10px) and overlays.
```tsx
// before
// after
```
**7. Blob/orb hero.**
```tsx
// before
// after one edge light at 12% brand, or none, plus a real product frame or a typographic hero
```
**8. Default selection and focus.** 20/24 sites brand the selection. Fix: don't override base (`::selection`, `:focus-visible`); delete any `outline-none`.
## Typography
**9. Default tracking on big headings.** 14/18 sites with ≥ 40px display text use negative tracking. (`design/heading-tracking`)
```tsx
// before
// after
// size, lh 0.96, −0.04em×knob, weight from direction
```
**10. Bold display.** 18/23 measured H1s ≤ 600. Remove `font-bold`/`font-extrabold` from headings.
**11. Loose display leading.** Measured 0.85–1.15. Never `leading-normal`/`leading-relaxed` on `text-display*`.
**12. No small-type texture.** Workhorse is 14px; mono labels add technical texture.
```tsx
// before
```
**14. Orphans.** Base sets `text-wrap: balance` on h1–h4; also cap width: `max-w-[16ch]`.
**15. Too many fonts.** ≤ 2 families + mono (`design/too-many-font-families`, `lint/google-fonts-link`). Delete ``; use the direction's `next/font` loaders.
## Layout
**16. Everything centered.** Interior headings centered: Linear 1/14, Stripe 1/32.
```tsx
// before
…
…
// after
…
…
```
**17. The template page** (badge → centered H1 → 2 buttons → glow screenshot → 3 icon cards → logos → testimonials → pricing → FAQ → CTA). Fix: plan sections from the brief with archetypes (`website/references/section-archetypes.md`); each section must have a job.
**18. Three identical icon cards.** None of the top sites uses it as the primary feature explainer.
```tsx
// before
{features.map(f =>
{f.title}
{f.body}
)}
// after: feature rows with real UI, or an editorial divided list
{features.map((f, i) => (
{String(i + 1).padStart(2, "0")}
{f.title}
{f.body}
))}
```
**19. Random bento.** Spans must follow importance; each tile shows something real (UI, data, code). If tiles would hold only icon + title + text, use tell 18's list instead.
**20. Uniform section padding.** Measured 96–160px with variation. Replace every `py-20` with the rhythm table in `layout.md`.
**21. Unreadable line length.** `max-w-7xl` paragraphs → `max-w-prose` or `max-w-[60ch]` (`design/line-length-long`).
**22. Generic navbar** (80px, 5 centered links, gradient button). Measured headers 56–72px, CTA solid neutral or brand, small.
```tsx
// after: template SiteHeader — sticky h-(--header-h), text-sm links text-fg-muted, Button size="sm"
```
## Components and details
**23. `rounded-2xl shadow-xl` everywhere.** `shadow-xl` doesn't exist in void (emits nothing) and cards cap at `rounded-xl`.
```tsx
// before