| name | design-anti-patterns |
| description | Avoid the default "AI-generated" look when designing or reviewing vixen-rs UI — no purple/blue gradients, no nested cards, no Inter-everywhere, no low-contrast grey-on-grey, no emoji-only states, no fluid clamp() in product UI. Use when creating a new screen, styling a component, or reviewing a UI diff — before writing Tailwind classes, enumerate the reflex defaults you will NOT use. |
Design Anti-Patterns (Vixen website)
Source: adapted from impeccable.style ("Gallery of Shame" + anti-attractor procedure by Paul Bakaus).
The procedure
Before you write a single class, enumerate the 6 reflex defaults you will not use. LLMs (and most web templates) snap to the same narrow aesthetic. Naming the trap avoids it.
The 6 traps
- Purple/blue AI gradients.
bg-gradient-to-br from-purple-500 to-blue-500, "radial gradient at 30% 30%" hero blobs, gradient-on-text for headlines. This is the single most recognisable "AI slop" signal. Use a flat brand color or a very subtle single-hue gradient (same hue, two adjacent lightness stops) — never a two-hue rainbow.
- Inter Everywhere. Inter is fine; Inter as the only answer is lazy. Pick a typography pairing intentionally.
- Cardocalypse. Every block is a
rounded-2xl shadow-lg border bg-white p-6 card. Cards inside cards inside cards. Rule: never nest a card inside a card. If you feel you need to, you need a section, a divider, or just whitespace.
- Template layouts. Hero + 3-column features + stat strip + testimonial carousel + CTA. This is a marketing-site cliché. Vixen's website is split between an admin dashboard (density + focus) and a public report page (single content column, no marketing fluff). Neither is a landing page.
- Low contrast.
text-gray-400 on bg-gray-50, placeholder-colored body text, thin 200-weight fonts at 13px. Body text must meet WCAG AA (≥ 4.5:1). Don't prove it by eye — check with a contrast tool (see ui-accessibility skill).
- Emoji / icon-only states. An empty state that is just 🎉 with no copy, or a 64px icon with no explanation. Every empty / error / loading state needs words — see
ui-critique skill. Vixen specifically: don't drop a 🤖 / 🚫 / 🔒 anywhere as the sole signal.
Deterministic checks (run before committing UI)
Grep the diff for these patterns and investigate each hit:
from-\w+-\d+\s+to-\w+-\d+ — multi-hue gradient. Verify hues match or drop to a flat fill.text-gray-400, text-gray-300, text-neutral-400 on non-dark backgrounds — likely too low contrast.- Nested
rounded-(xl|2xl|3xl) with shadow- on both parent and child — cardocalypse.
clamp\( in anything under src/ that isn't a marketing page — see typography-scale skill, fixed scale for app UI.bg-clip-text + gradient on text — AI-gradient-text smell. Use a solid color.- Emoji-only children of
<EmptyState> / error blocks — add copy.
- Pure black
oklch(0 0 0) background in dark mode — causes halation on OLED screens. Use a near-black like oklch(0.13 0 0).
- Clickable element without
cursor: pointer (or class="cursor-pointer" on non-<button>/<a> elements) — affordance failure.
- Animations slower than 300ms or faster than 100ms — too sluggish or too jarring. Vixen targets 150–250ms for state transitions.
What to do instead
- Color: one brand accent, a neutral ramp, semantic (success/warn/danger/info). Document hex values in
website/DESIGN.md (when it lands). Never introduce a new hue inline in a component.
- Elevation: prefer a single 1px border + bg-contrast surface over stacked shadows. Reserve shadows for floating layers (popover, dialog, toast).
- Whitespace > dividers. If two blocks need to feel separate, increase the gap before you add a
border-t.
- Icons: use the project's icon set. Never drop an emoji into production UI.
When reviewing someone else's UI
Ask, in order:
- Is there a gradient? If yes, is it single-hue?
- Are any cards nested? If yes, why?
- What's the contrast ratio of the smallest text? (≥ 4.5:1.)
- Are there empty/error/loading states, and do they have copy?
- Does the screen look like every other AI-generated SaaS dashboard? If yes, reject.
Related
ui-critique — Nielsen heuristics + state coverage review.typography-scale — fixed scale for app UI.tailwind-styling — tokens and CVA patterns.
