---
type: anti-pattern-registry
generated: 2026-04-30
generator: ui-style-guide/extract-anti-patterns.py
status: auto-generated - do NOT hand-edit; run generator to refresh
---

# DOL Anti-Pattern Registry

**Total**: 29 scopes · 180 anti-pattern rows across 6 source files.

> Single-file lookup index for every `<dol_anti_pattern>` row across DOL guidelines.
> AI agents load THIS file instead of grep-scrolling 6+ markdown files.
> Citation format: `<scope>#<ID>` - e.g., `landing-5.4-cta#05`, `slop-08`, `figma-naming-6-binding#01`.

## How to use this registry

1. **Before shipping UI**: scan your output against applicable scope(s) listed in CODE-UI §5.2
2. **When refusing**: cite specific row `<scope>#<ID>`, then point to source file for REWRITE guidance
3. **When extending**: new anti-pattern goes in the relevant product file; this registry regenerates from source

Source files + regeneration:
```bash
python3 "DOL-DS-token/design-guideline/ui-style-guide/extract-anti-patterns.py"
```

## DIRECTION

Source: `ds-guideline/DIRECTION.md`

### `direction-10-layout` (4 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `direction-10-layout#01` | Content rộng hơn 1280px không có max-width |
| `direction-10-layout#02` | Padding page <16px mobile |
| `direction-10-layout#03` | Section liền nhau không có khoảng cách rõ |
| `direction-10-layout#04` | Grid quá đều, không focal point |

### `direction-10-typography` (4 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `direction-10-typography#01` | Hơn 3 cấp font-size trong 1 card |
| `direction-10-typography#02` | Body text <13px |
| `direction-10-typography#03` | Heading + body cùng weight |
| `direction-10-typography#04` | Quá nhiều màu text trong 1 view |

### `direction-10-color-brand` (9 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `direction-10-color-brand#01` | `bg-red-*` cho brand |
| `direction-10-color-brand#02` | `bg-brand-*` cho error/danger |
| `direction-10-color-brand#03` | Hơn 2 semantic accents đồng thời |
| `direction-10-color-brand#04` | `bg-blue-*` cho "mọi thứ nổi bật" |
| `direction-10-color-brand#05` | Shade `-500` làm canonical |
| `direction-10-color-brand#06` | `text-white` trên vivid bg (shade 500-600) |
| `direction-10-color-brand#07` | `gray-*` / `zinc-*` / `neutral-*` |
| `direction-10-color-brand#08` | Background gradient rực rỡ toàn page |
| `direction-10-color-brand#09` | Card trắng trên trắng không border/shadow |

### `direction-10-spacing-depth` (3 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `direction-10-spacing-depth#01` | Shadow quá đậm hoặc nhiều levels đồng thời |
| `direction-10-spacing-depth#02` | Padding nội bộ không đều 4 phía |
| `direction-10-spacing-depth#03` | Element quá sát (<8px) khi không liên quan |

### `direction-10-component-interaction` (4 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `direction-10-component-interaction#01` | Button không có hover/focus |
| `direction-10-component-interaction#02` | Click target <32px |
| `direction-10-component-interaction#03` | Transition đột ngột (instant) |
| `direction-10-component-interaction#04` | Loading state trắng trơn |

### `direction-10-responsive` (3 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `direction-10-responsive#01` | Text/layout y hệt desktop trên mobile |
| `direction-10-responsive#02` | Ẩn nav trên mobile mà không có thay thế |
| `direction-10-responsive#03` | Horizontal scroll trên content chính |

### `direction-10-ai-slop-universal` (10 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `direction-10-ai-slop-universal#slop-01` | `border-left` hoặc `border-right: ≥2px solid <color>` trên card/list/alert |
| `direction-10-ai-slop-universal#slop-02` | `bg-gradient-*` + `text-transparent` + `bg-clip-text` trên heading/metric |
| `direction-10-ai-slop-universal#slop-03` | Card (bg-white + border + shadow) chứa Card khác cùng treatment |
| `direction-10-ai-slop-universal#slop-04` | Cùng 1 gap/padding value (vd `gap-4` everywhere) trong whole view |
| `direction-10-ai-slop-universal#slop-05` | Multiple consecutive `text-center` trong siblings (section sau section) |
| `direction-10-ai-slop-universal#slop-06` | Big icon box (rounded + tinted bg) **trên mỗi** heading trong feature list |
| `direction-10-ai-slop-universal#slop-07` | `shadow-[...rgba(brand-color)...]` box-shadow với colored glow |
| `direction-10-ai-slop-universal#slop-08` | `cubic-bezier` với negative values (overshoot) hoặc `ease-bounce`/`elastic` |
| `direction-10-ai-slop-universal#slop-09` | CSS `transition` / `transition-property` of layout props (`width`/`height`/`padding`/`margin`) - **NOT** Tailwind `transition-all` when only transform/opacity/color/shadow actually change |
| `direction-10-ai-slop-universal#slop-10` | Body text với `uppercase` + `tracking-wider` HOẶC `text-justify` |

## CORE

Source: `ui-style-guide/CORE.md`

### `core-11-layout` (6 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `core-11-layout#01` | Content >1280px không max-width |
| `core-11-layout#02` | Page padding <16px mobile |
| `core-11-layout#03` | Sections không gap |
| `core-11-layout#04` | Card trong card, box trong box |
| `core-11-layout#05` | Grid quá đều, không focal point |
| `core-11-layout#06` | Content chia lô xám/trắng luân phiên |

### `core-11-color` (5 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `core-11-color#01` | Brand red cho error/danger |
| `core-11-color#02` | >2 accent colors cùng lúc |
| `core-11-color#03` | White card trên white bg không border |
| `core-11-color#04` | Blue cho mọi thứ prominent |
| `core-11-color#05` | Gradient full page |

### `core-11-typography` (5 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `core-11-typography#01` | >3 font sizes trong 1 card |
| `core-11-typography#02` | Body <13px |
| `core-11-typography#03` | Heading cùng weight với body |
| `core-11-typography#04` | >4 text colors per view |
| `core-11-typography#05` | Mixed-language drift trong copy |

### `core-11-spacing-depth` (4 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `core-11-spacing-depth#01` | Shadow quá đậm (`shadow-xl`/`shadow-2xl` cho card default) |
| `core-11-spacing-depth#02` | Padding 4 phía khác nhau bất đối xứng |
| `core-11-spacing-depth#03` | <8px giữa unrelated elements |
| `core-11-spacing-depth#04` | Divider thay spacing |

### `core-11-interaction` (5 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `core-11-interaction#01` | Button không hover/focus state |
| `core-11-interaction#02` | Click target <32px |
| `core-11-interaction#03` | Loading state blank |
| `core-11-interaction#04` | Card hover thêm border + shadow + bg cùng lúc |
| `core-11-interaction#05` | Icon con bung shadow khi card cha hover |

### `core-11-tailwind` (4 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `core-11-tailwind#01` | Dynamic class: `` `bg-${color}-600` `` |
| `core-11-tailwind#02` | `bg-(--token)` hoặc `var(--token)` trong class |
| `core-11-tailwind#03` | `gray-*`, `zinc-*`, `neutral-*` |
| `core-11-tailwind#04` | Hardcode hex trong class names |

## Landing

Source: `ui-style-guide/landing.md`

### `landing-1.7-hero` (7 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `landing-1.7-hero#01` | Eyebrow dùng `bg-blue-50 text-blue-600` hoặc `text-indigo-600` |
| `landing-1.7-hero#02` | Headline highlight dùng blue/indigo/purple gradient |
| `landing-1.7-hero#03` | Eyebrow text `text-xs` |
| `landing-1.7-hero#04` | Description `text-xl` hoặc `text-2xl` |
| `landing-1.7-hero#05` | Button `font-black` |
| `landing-1.7-hero#06` | Button `py-5 text-lg` (quá nặng) |
| `landing-1.7-hero#07` | Primary/secondary button khác font-weight |

### `landing-2.5-feature-grid` (6 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `landing-2.5-feature-grid#01` | Identical icon boxes across ALL cards (same color/size/shape) |
| `landing-2.5-feature-grid#02` | 4+ columns on desktop |
| `landing-2.5-feature-grid#03` | Heavy shadows (`shadow-xl`) on every card |
| `landing-2.5-feature-grid#04` | Centered text in every feature card |
| `landing-2.5-feature-grid#05` | Gradient card backgrounds |
| `landing-2.5-feature-grid#06` | "Learn more" link on every card (repeated) |

### `landing-3.4-showcase` (5 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `landing-3.4-showcase#01` | Screenshot với `rotate-3` / `rotate-6` |
| `landing-3.4-showcase#02` | Gradient overlay on product screenshot |
| `landing-3.4-showcase#03` | Multiple screenshots stacked tilted / overlapping |
| `landing-3.4-showcase#04` | Colored glow behind screenshot |
| `landing-3.4-showcase#05` | Screenshot full-bleed (edge-to-edge) |

### `landing-4.4-testimonials` (6 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `landing-4.4-testimonials#01` | Giant decorative quote marks `"` as `text-6xl` |
| `landing-4.4-testimonials#02` | Avatar `w-20 h-20` (huge) |
| `landing-4.4-testimonials#03` | Carousel auto-advance fast |
| `landing-4.4-testimonials#04` | Testimonials without role / company |
| `landing-4.4-testimonials#05` | Star rating in different colors per testimonial |
| `landing-4.4-testimonials#06` | "★★★★★" emoji characters instead of icon |

### `landing-5.4-cta` (7 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `landing-5.4-cta#01` | Multiple CTAs per section (3+ buttons) |
| `landing-5.4-cta#02` | Full-width brand color section background |
| `landing-5.4-cta#03` | "Click here" / "Submit" generic copy |
| `landing-5.4-cta#04` | CTA block immediately after hero |
| `landing-5.4-cta#05` | Multiple `!!!` in CTA copy |
| `landing-5.4-cta#06` | CTA form requires 5+ fields |
| `landing-5.4-cta#07` | CTA với countdown timer pressure |

### `landing-6-composition` (8 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `landing-6-composition#01` | Outer section card dùng `rounded-2xl` (cùng inner) |
| `landing-6-composition#02` | Section dùng `p-4/p-6` thay `p-10/p-12` |
| `landing-6-composition#03` | Heading center-aligned cho mọi section header |
| `landing-6-composition#04` | Heading 1 dòng dài chiếm full width |
| `landing-6-composition#05` | Section ↔ section gap dùng `gap-12/gap-16` |
| `landing-6-composition#06` | Inner items dùng cùng padding với outer (`p-10`) |
| `landing-6-composition#07` | Outer card không có border + shadow yếu (alpha ≤0.04) |
| `landing-6-composition#08` | Eyebrow dùng plain text thay pill |

### `landing-6.6-constellation-block` (10 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `landing-6.6-constellation-block#01` | Outer dùng `border-slate-100/200` (with border-color) |
| `landing-6.6-constellation-block#02` | Quên `overflow-hidden` trên middle |
| `landing-6.6-constellation-block#03` | Middle `bg-slate-50` (quá nhạt) |
| `landing-6.6-constellation-block#04` | Cùng radius cho 3 tiers (e.g., outer + middle = `rounded-[32px]`) |
| `landing-6.6-constellation-block#05` | Dùng `divide-x divide-y` thay `gap-[1px]` cho 2-col grid |
| `landing-6.6-constellation-block#06` | Bottom row OUTSIDE middle (sibling) |
| `landing-6.6-constellation-block#07` | Per-cell border + shadow trên white |
| `landing-6.6-constellation-block#08` | Cell có >3 elements (icon-tile + title + target + body + audience + CTA) |
| `landing-6.6-constellation-block#09` | Bottom row content sai platform purpose (sales tone trên self-study) |
| `landing-6.6-constellation-block#10` | Per-cell `translate-y` / `scale` lớn hover |

### `landing-7-decoration` (11 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `landing-7-decoration#01` | Áp tất cả decorations vào 1 section (peek-photos + type-pattern bg + ribbon + emoji + handwritten) |
| `landing-7-decoration#02` | Type-pattern bg với generic dot/grid (không brand vocabulary) |
| `landing-7-decoration#03` | Emoji sticker random không meaning (🌟 ⭐ ✨ scattered) |
| `landing-7-decoration#04` | Handwritten font cho body / labels / buttons |
| `landing-7-decoration#05` | Photo peek-edges dùng stock photo / illustration |
| `landing-7-decoration#06` | Ribbon badge cho status indicator (active/disabled/loading) |
| `landing-7-decoration#07` | Certificate stack cho generic feature ("tính năng mới") |
| `landing-7-decoration#08` | Dotted arrow connector trong tight grid |
| `landing-7-decoration#09` | Section accent color rotation >3 distinct colors / page |
| `landing-7-decoration#10` | 2-color heading nhấn cả câu (`text-brand-600` toàn heading) |
| `landing-7-decoration#11` | Big-number block dùng `text-2xl` (số nhỏ) + `text-base` label (label to) |

## Practice

Source: `ui-style-guide/practice.md`

### `practice-2.6-answer-cards` (8 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `practice-2.6-answer-cards#01` | Shake / bounce animation on incorrect |
| `practice-2.6-answer-cards#02` | Brand red for "selected" state |
| `practice-2.6-answer-cards#03` | Full border + bg + shadow change on hover |
| `practice-2.6-answer-cards#04` | Icon badge above answer text |
| `practice-2.6-answer-cards#05` | Gradient bg on correct/incorrect |
| `practice-2.6-answer-cards#06` | Huge letter prefix "A" / "B" / "C" as badge |
| `practice-2.6-answer-cards#07` | "Try again" text on incorrect |
| `practice-2.6-answer-cards#08` | Confetti / celebration animation on correct |

### `practice-4.5-timer-progress` (6 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `practice-4.5-timer-progress#01` | Red flash / blink when time <1 min |
| `practice-4.5-timer-progress#02` | Timer font không `tabular-nums` |
| `practice-4.5-timer-progress#03` | Progress bar bounce/elastic easing |
| `practice-4.5-timer-progress#04` | Circular progress với huge % text center |
| `practice-4.5-timer-progress#05` | Step indicator có label "Câu 3 of 10" + dots đồng thời |
| `practice-4.5-timer-progress#06` | Auto-submit không warning |

### `practice-6.5-audio-tts` (7 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `practice-6.5-audio-tts#01` | Loud feedback sounds (100% volume) |
| `practice-6.5-audio-tts#02` | Harsh buzzer for incorrect |
| `practice-6.5-audio-tts#03` | Auto-play narration without user initiate |
| `practice-6.5-audio-tts#04` | Narration indicator using brand color |
| `practice-6.5-audio-tts#05` | No visual counterpart cho audio feedback |
| `practice-6.5-audio-tts#06` | Progress bar bounce/elastic during playback |
| `practice-6.5-audio-tts#07` | Vague labels ("Play", "Pause" in English) |

## Data Entry

Source: `ui-style-guide/data-entry.md`

### `data-entry-3.7-validation` (7 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `data-entry-3.7-validation#01` | Validate on keystroke (every char) |
| `data-entry-3.7-validation#02` | Required marker `*` without a11y label |
| `data-entry-3.7-validation#03` | Error as modal / toast |
| `data-entry-3.7-validation#04` | Generic "Invalid input" / "Error" copy |
| `data-entry-3.7-validation#05` | English error messages |
| `data-entry-3.7-validation#06` | Red border alone, no text |
| `data-entry-3.7-validation#07` | Block typing past max length |

### `data-entry-4.6-multistep-flow` (6 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `data-entry-4.6-multistep-flow#01` | "Next" button hoạt động nhưng step invalid (validate chỉ ở submit) |
| `data-entry-4.6-multistep-flow#02` | Step indicator ẩn steps ahead |
| `data-entry-4.6-multistep-flow#03` | Autosave toast mỗi 1500ms |
| `data-entry-4.6-multistep-flow#04` | Progress bar % không map với steps |
| `data-entry-4.6-multistep-flow#05` | Wizard animation slide-between-steps (transform transition) |
| `data-entry-4.6-multistep-flow#06` | Block Back button after completing step |

### `data-entry-5.6-rich-content` (7 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `data-entry-5.6-rich-content#01` | Rich editor toolbar floats trên content (không shared border) |
| `data-entry-5.6-rich-content#02` | Dropzone không show format + size limit trước upload |
| `data-entry-5.6-rich-content#03` | Remove button dưới thumbnail (not overlay) |
| `data-entry-5.6-rich-content#04` | Progress bar bên dưới row (tạo vertical shift) |
| `data-entry-5.6-rich-content#05` | Markdown preview mở modal / new tab |
| `data-entry-5.6-rich-content#06` | Editor height fixed tall (~600px) luôn |
| `data-entry-5.6-rich-content#07` | Toolbar icon-tile-above label pattern |

### `data-entry-6.8-data-tables` (8 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `data-entry-6.8-data-tables#01` | Bordered cells (full grid) |
| `data-entry-6.8-data-tables#02` | Numeric cells left-aligned |
| `data-entry-6.8-data-tables#03` | Select-all checkbox = "all rows everywhere" |
| `data-entry-6.8-data-tables#04` | Inline edit commits silently on Enter (no visual feedback) |
| `data-entry-6.8-data-tables#05` | Empty state = blank tbody + "No data" text |
| `data-entry-6.8-data-tables#06` | Loading = centered spinner replacing table |
| `data-entry-6.8-data-tables#07` | Page size > 50 on mobile |
| `data-entry-6.8-data-tables#08` | Row click = navigate AND checkbox = select |

## Figma Naming

Source: `figma-ai/naming-convention.md`

### `figma-naming-6-binding` (5 rows)

| ID | ❌ PATTERN |
|----|-----------|
| `figma-naming-6-binding#01` | Hardcoded hex in fills when matching token exists |
| `figma-naming-6-binding#02` | `text-color/*` applied to icon vectors (prefix mismatch) |
| `figma-naming-6-binding#03` | Feature-named tokens (`cause-bg-color`, `effect-text-color`) |
| `figma-naming-6-binding#04` | Inconsistent focus ring (per-component color) |
| `figma-naming-6-binding#05` | Inventing new intensity modifier (e.g., "semi-soft", "extra-dim") |