# ANTIPATTERNS.md — banned patterns

Direct list. No prose.

> **Scope**: applies to both variants. Product UI (`PRODUCT-UI.md`) adds Spanish-first copy bans (em-dash in visible text, ASCII diacritics, straight quotes around emphasis) — quoted at the end of this file.

## Color

- `#000` or `#fff` literal — use `--ink-900` / `--paper`.
- Two saturated colors in same slide — keep accent singular.
- Pure-black box-shadows — use the system shadow tokens with tinted alpha.
- Outer glow / neon — banned. Use 1 px inner border for elevation feel.
- Gradients on text (`background-clip: text`) — banned. Solid color, emphasis by weight/size.
- Lila/AI-purple aesthetics — banned.
- Recoloring the accent per slide to "match topic" — banned. Accent is invariant.

## Typography

- `Inter` font — banned (overused, signals AI default).
- Sans-serif headlines — banned for hero. Use DM Serif Text italic.
- Sentence-case eyebrows — banned. Always UPPERCASE with 0.14–0.18em letter-spacing.
- Justified text — banned. Left-align (or center for hero only).
- Long body lines (> 75ch) — banned.
- Flat type scale (no contrast between steps) — banned. Min ratio 1.25.

## Layout

- Wrap everything in `Card` — banned. Cards are for elevation, not padding.
- Nested cards — banned, always.
- Three identical card columns — banned. Use 2-col zig-zag or asymmetric grid.
- Centered everything — vary alignment. Centered hero is OK; centered list is monotony.
- `h-screen` — banned. Use `min-h-screen` (and `min-h-[100dvh]` for hero if mobile-critical).
- `width: calc(33% - ...)` flex math — banned. Use CSS Grid.
- Side-stripe accent (`border-left: 3px+ solid <color>`) — banned in product UI conventions, but **the deck uses one variant** (`rule-card-y`). If used, document the choice — do not silently spawn copies.

## Motion

- `transition: all` — banned. Specify properties.
- `ease-in` for UI — banned. Use `ease-out` or `ease-in-out`.
- `scale(0)` entry — banned. Start from `scale(0.95)` + `opacity: 0`.
- `transform-origin: center` on a popover originating from a trigger — banned.
- Bounce / elastic easings — banned.
- Animating layout properties (`width`, `height`, `top`, `left`, `padding`) — banned. Animate `transform` and `opacity`.
- Animating CSS variables on parent that cascade to many children — banned (style recalc storm). Update child `transform` directly.
- `framer-motion` `x` / `y` shorthand under load — prefer full `transform` string for HW acceleration; or use CSS animations off main thread.
- Stagger > 200 ms between adjacent list items — banned. Keeps feel sluggish.
- Custom mouse cursor — **excluded by this branch**. Do not reintroduce.

## Iconography

- Emojis in UI — banned.
- Lucide "user egg" default avatar — banned. Use SVG primitive or initials.
- Mixed stroke widths — pick `1.5` or `2.0`, hold to it.

## Content placeholders (when seeding examples)

- "John Doe", "Jane Doe", "Acme", "Nexus", "SmartFlow" — banned. Invent plausible names/brands.
- `99%`, `99.99%`, `50%` — banned. Use messy data: `47.2%`, `+1.8 pts`.
- Stock skeuomorph icons (briefcase, lightbulb, target) — banned. Stay typographic.

## Anti-AI-slop checklist (run before shipping)

For every slide built, ask:

1. Could someone guess the topic from the palette alone? If yes, the palette is reflexive — review.
2. Are there decorative shadows under hero text? If yes, remove; use weight contrast.
3. Are headings sans-serif? If yes, swap to serif italic display.
4. Are there three same-size cards in a row? If yes, restructure.
5. Is a `border-left: 4px solid accent` carrying meaning? If yes, replace with leading number / icon / full border tint.
6. Is the only color the accent? Good. Did you add a second hue "for variety"? Remove it.

## Override only with intent

The deck's existing `.rule-card-y` (side-stripe) and `IntroScreen` (3 s splash) are deliberate exceptions. Do not duplicate the side-stripe by reflex. Do not add a splash by reflex.

The product UI variant has its own deliberate exception: `descriptionVariant="panel"` in `PageHeading` carries a 3 px left accent border, but it's scoped to the entity-brief slot and not duplicated elsewhere. See `PRODUCT-UI.md`.

## Product UI extras (Spanish-first copy)

Apply on top of everything above when building product UI (admin tools, dashboards, SaaS). Quoted from `PRODUCT-UI.md`:

- **Never em-dash (`—`)** in any visible text. Replace with comma, colon, parentheses or period.
- **ASCII diacritics** (`nao` for `não`, `loeschen` for `löschen`, `informacion` for `información`) — banned. Always full UTF-8 with accents.
- **Straight quotes** around emphasis — banned. Use Spanish guillemets `«…»` or curly quotes `"…"`.
- **Comma as thousand separator** — banned in Spanish copy. Use dot: `1.500`, not `1,500`.
- **Emojis** in product UI text — banned. Use lucide icons or inline SVG (e.g. `components/channel-icon.tsx` for brand glyphs).
- **Exclamation marks in CTAs** — banned. "Lanzar nueva Run", not "¡Lanzar nueva Run!".
- **Tailwind utilities** in the product UI variant — banned. Use plain CSS + tokens + semantic classes from `globals.css`. (Editorial deck variant still uses Tailwind v4; the two variants do not share the styling layer.)
- **`description=` on listing / index / new pages of a module** — banned. The first section below the PageHeading is the documentation; redundant prose just pushes the content down.
- **Hardcoded "michel101" / production passwords in client-visible code** — banned. Dev fallback only; production requires the env defined explicitly.