# The AI-UI tells and their fixes > Condensed from: Impeccable (https://github.com/pbakaus/impeccable), Open Design (https://github.com/nexu-io/open-design), Taste Skill (https://github.com/Leonxlnx/taste-skill), Hallmark (https://github.com/Nutlope/hallmark) A tell is a default produced without a reason; a pinned brief or DESIGN.md can earn any back except (ban) items. Removing tells is not enough: fill the gap with a product-specific idea, real content and imagery. Machine checks: `detectors.json`. ## The 10 worst offenders 1. Purple/indigo-to-blue gradients (`from-purple-500 to-blue-500`, `#6366f1`) Β· gradient-clipped headline text. 2. Inter/Roboto/Poppins as the only voice Β· tiny tracked-caps eyebrow above every heading. 3. Three equal cards of rounded icon tile + heading + blurb Β· thick coloured `border-left` on rounded cards. 4. Emoji as icons (πŸš€ ✨ ⚑) Β· glow shadows, blurred orbs and glass panels as decoration. 5. Buzzword copy (unlock, seamless, elevate) with invented proof ("10,000+ happy customers", β˜…β˜…β˜…β˜…β˜…) Β· "Get started" + "Learn more". ## Typography - **Default face** (Inter, Roboto, Poppins, Montserrat, Space Grotesk, Plus Jakarta Sans, DM Sans, Outfit, Geist; the "tasteful" wave: Fraunces, Playfair, Instrument Serif, Newsreader) β†’ you stopped looking β†’ **Fix:** pick a face from the subject's world; max 2 families; h1/h2 via `var(--font-display)`, never bare `system-ui`. Operate/Read surfaces may use a tuned system stack on purpose. - **Gradient text** (ban) β†’ decoration in place of hierarchy β†’ **Fix:** solid ink; emphasis by size or weight. - **Flat scale** (steps under 1.25Γ—, 9 near-equal sizes, bold everywhere) β†’ nothing leads β†’ **Fix:** ratio 1.2-1.25, 5-6 sizes; bodyβ†’headline jump β‰₯3Γ—; ≀3 sizes above the fold; weights 400 read / 500-550 UI / 600 headings. - **Eyebrow / kicker** (ban): tiny uppercase tracked label or pill over a heading β†’ the default SaaS section opener β†’ **Fix:** delete it; fold real info into the heading. - **Accented word**: one word in italic serif, colour or gradient inside a roman heading β†’ **Fix:** set the head one way; use a line break or a second line at a second size. - **Sentence-size display headline** (3-4 lines at text-6xl+) β†’ eats the viewport β†’ **Fix:** ~5-word title, max 2 lines, rest in a lede; display max 6rem. - **Tracking extremes** β†’ **Fix:** body 0; caps labels 0.06-0.1em; 32px+ heads -0.01 to -0.02em; 48px+ display -0.02 to -0.03em; floor -0.04em. CJK: tracking 0, display leading 1.3-1.4. - **Tiny text** β†’ **Fix:** body 16px (15-18), small 13-14px, caption 12px; nothing functional under 11px. - **Unbounded measure, tight leading, justified text** β†’ **Fix:** prose 45-75ch (`max-width: 65ch`); body leading 1.5-1.65, display 1.0-1.2; `text-wrap: balance` on heads, `pretty` on body; left-aligned. - **Mono as costume** for labels/meta β†’ **Fix:** mono only for code, data, measurements; `font-variant-numeric: tabular-nums` for figures. ## Color - **AI palette**: violet/indigo gradients, blueβ†’cyan two-stop "trust" gradient, neon cyan on near-black β†’ **Fix:** one anchor hue mixed in OKLCH for this product; flat fills. - **Framework default accent** (`#6366f1`, `#4f46e5`, `bg-indigo-600`, Tailwind blue-500) β†’ **Fix:** `var(--accent)` from DESIGN.md. - **Accent flood** β†’ an accent in ten places means nothing β†’ **Fix:** neutrals 70-90% of pixels, one accent 5-10% (≀2 visible uses per screen), semantic 0-5%, effects under 1%. - **Pure #000 / #fff** β†’ vibration, framework feel β†’ **Fix:** dark bg `#0f0f0f` + fg `#f0f0f0`; light bg `#fafafa` + fg `#111`; or OKLCH chroma β‰₯0.005 toward the anchor hue. - **Gray text on colour** β†’ washed out, fails contrast β†’ **Fix:** darker shade of the surface hue or near-white; body 4.5:1, large text/UI/focus 3:1. - **Cream + serif + terracotta** (`#faf9f5` + `#d97757`) β†’ the third-wave "warm editorial" fix became the look β†’ **Fix:** move one axis: accent first, paper second, display face last. - **Glow**: zero-offset coloured shadows, radial halos, blurred orbs β†’ **Fix:** depth by a lightness step or neutral offset shadow (`0 1px 2px` + `0 8px 24px` at 6-16% black). - **Theme by category** ("dev tool = dark") or inverted dark mode β†’ **Fix:** one sentence of physical use scene decides light/dark; design dark elevation explicitly; dark borders `rgba(255,255,255,.08)`. ## Layout & composition - **Template skeleton** (hero β†’ logos β†’ 3 features β†’ testimonial β†’ pricing β†’ FAQ β†’ CTA) β†’ **Fix:** order by the argument; add one non-stock section (inline demo, comparison vs status quo). - **Three equal cards** as structure β†’ **Fix:** use the real count; lead item large, rest as list or table; vary widths and heights. - **Everything centred** (over ~70%) β†’ no shared edge β†’ **Fix:** left-anchor on 2-3 reused x-positions; one centred moment. - **Monotonous spacing** β†’ **Fix:** 4px-based scale; tight inside groups; section gaps β‰₯120px at 1440 and varied; space above a heading β‰₯2Γ— space below. - **Same layout every section** (name each in one word; a repeat in a row is the template) β†’ **Fix:** vary composition per section. - **Hero misfit**: `h-screen`, headline + lede + action + visual not all visible at 1280Γ—800, >80 words per screen, dead band >160px β†’ **Fix:** `min-h-svh`; headline, one sentence, actions, visual. - **Index numbering** (01 / 02 / 03, "Step 02") β†’ **Fix:** order by position and scale; `
    ` for real sequences. ## Components & surfaces - **Icon tile above heading** (`h-12 w-12 rounded-xl bg-*-100`) β†’ the universal feature card β†’ **Fix:** icon inline beside the heading, or none. - **Side-stripe border** (ban): `border-left` β‰₯2px on rounded cards/alerts β†’ **Fix:** tinted background, icon + label, or full 1px border. - **Nested cards** (ban) β†’ **Fix:** one containment layer; separate with space, type, dividers. - **Cards everywhere / ghost card** (rounded-2xl + shadow-xl on all; 1px border + wide shadow) β†’ **Fix:** declare elevation once, edge OR shadow; nothing at rest wears a shadow; card radius 12-16px. - **Glass by default** β†’ **Fix:** one sticky bar may blur; cards opaque, one tone step from the ground. - **Hero-metric template** (big number, small label, stat row) β†’ **Fix:** pair each real figure with the sentence that says what it means. - **Fake product** (styled-div dashboards, traffic-light chrome, device frames) β†’ **Fix:** real screenshot or live component in a plain `
    `. - **AI chrome**: wordmark/links/button nav with hairline, 4-column footer, closing email sign-up, modal by reflex β†’ **Fix:** decide each for this product; end on what the visitor came to do. ## Icons & imagery - **Emoji or unicode glyphs as icons** (ban), two icon libraries β†’ **Fix:** one library, 1.5-1.8px stroke, `currentColor`; decorative SVG gets `aria-hidden="true"`. - **Placeholder imagery**: grey boxes, picsum/placehold.co, pravatar faces, empty `src` β†’ **Fix:** real verified photos (one decisive photo beats five); reserve space with `aspect-ratio`. - **Drawn illustration and decorative backgrounds**: SVG scenes from primitives, sketchy SVG, grain, grid/stripe/blob backgrounds β†’ **Fix:** photograph, the product itself, or type at scale; SVG for geometry and diagrams. - **Type-only marketing page** β†’ reads unfinished β†’ **Fix:** show the subject in β‰₯4 real pictures. ## Copy - **Buzzwords** (unlock, unleash, supercharge, seamless, elevate, empower, revolutionize, cutting-edge, next-gen, world-class, all-in-one, effortless, streamline) β†’ **Fix:** the specific verb and noun. - **Filler openers** ("In today's fast-paced world", "Built for the modern team") β†’ **Fix:** start with the claim. - **Manufactured cadence** ("Not a tool. A teammate.", "X. No Y." repeated, threes everywhere) β†’ **Fix:** say it once, plainly; use the count the content has. - **Generic CTAs** (Get started, Learn more, Book a demo, Submit, glued arrows) β†’ **Fix:** name the action: "Start tracking", "See the plans". - **Invented proof** (user counts, 10Γ— claims, 99.99% uptime, logo walls, β˜…β˜…β˜…β˜…β˜…) β†’ **Fix:** sourced proof, or show the product working; label samples. - **Placeholders** (lorem ipsum, "Feature one", Jane Doe, Acme, Sarah Chen) β†’ **Fix:** plausible full-density content, listed for the client to confirm. - **Furniture text** ("Field notes", "Quietly trusted by", "Scroll to explore", "Available for work", "Est. 2024", A Β· B Β· C strings, "X theater") β†’ **Fix:** plain section names; delete. - **Em-dash habit** (more than ~4 per page) β†’ **Fix:** full stops, commas, colons. ## Motion - **Fade-up on every block**, staggered hero entrances, hover lift on every card β†’ **Fix:** one authored focal moment; content visible by default; reveal once, ≀900ms; one hover signal per element. - **Bounce/elastic/overshoot** (`animate-bounce`, `cubic-bezier(.34,1.56,.64,1)`), ease-in or `scale(0)` entrances β†’ **Fix:** `cubic-bezier(0.16,1,0.3,1)` from scale 0.95-0.98 + opacity 0. - **Arbitrary durations** β†’ **Fix:** feedback 100-150ms, state 150-300ms, overlays 200-300ms, view transitions 300-500ms, focal entrance 500-800ms; exits faster; frequent hovers ≀200ms; mobile 20-30% shorter. - **`transition: all`**, animating width/height/top/left/margin β†’ **Fix:** name properties; transform, opacity, bounded blur/clip-path/mask. - **Meaningless loops**: pulsing dots and CTAs, marquees, typewriter heads, custom cursors, preloaders β†’ **Fix:** static; pulse only for live data; pause control past 5s. - **No reduced-motion path** β†’ **Fix:** `prefers-reduced-motion: reduce` drops translate/scale/parallax, keeps opacity/colour state changes. - **Hidden at rest** (`.reveal{opacity:0}` waiting on JS) β†’ **Fix:** hide only under `.js`, or animate from visible with `@starting-style`. ## Interaction & states - **Happy path only** β†’ **Fix:** default, hover, focus, active, disabled, loading, error, success, empty; errors name the problem and the recovery. - **Loading by availability** β†’ **Fix:** under 300ms nothing; 0.3-2s subtle spinner; 2-10s layout skeleton or labelled spinner; 10s+ determinate bar + cancel; stop at 60s with retry. - **Blank empty state** ("No data") β†’ **Fix:** headline + one value sentence + primary action; no-results echoes the query. - **Focus removed** (`outline-none`, ring fades in) β†’ **Fix:** `:focus-visible` ring β‰₯2px at β‰₯3:1, instant. - **`
    `**, `` without href β†’ **Fix:** `