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.
Before shipping UI : scan your output against applicable scope(s) listed in CODE-UI §5.2When refusing : cite specific row <scope>#<ID>, then point to source file for REWRITE guidanceWhen extending : new anti-pattern goes in the relevant product file; this registry regenerates from source
Source files + regeneration:
python3 "DOL-DS-token/design-guideline/ui-style-guide/extract-anti-patterns.py"
Source: ds-guideline/DIRECTION.md
ID ❌ PATTERN direction-10-layout#01Content rộng hơn 1280px không có max-width direction-10-layout#02Padding page <16px mobile direction-10-layout#03Section liền nhau không có khoảng cách rõ direction-10-layout#04Grid quá đều, không focal point
ID ❌ PATTERN direction-10-typography#01Hơn 3 cấp font-size trong 1 card direction-10-typography#02Body text <13px direction-10-typography#03Heading + body cùng weight direction-10-typography#04Quá nhiều màu text trong 1 view
ID ❌ PATTERN direction-10-color-brand#01bg-red-* cho branddirection-10-color-brand#02bg-brand-* cho error/dangerdirection-10-color-brand#03Hơn 2 semantic accents đồng thời direction-10-color-brand#04bg-blue-* cho “mọi thứ nổi bật”direction-10-color-brand#05Shade -500 làm canonical direction-10-color-brand#06text-white trên vivid bg (shade 500-600)direction-10-color-brand#07gray-* / zinc-* / neutral-*direction-10-color-brand#08Background gradient rực rỡ toàn page direction-10-color-brand#09Card trắng trên trắng không border/shadow
ID ❌ PATTERN direction-10-spacing-depth#01Shadow quá đậm hoặc nhiều levels đồng thời direction-10-spacing-depth#02Padding nội bộ không đều 4 phía direction-10-spacing-depth#03Element quá sát (<8px) khi không liên quan
ID ❌ PATTERN direction-10-component-interaction#01Button không có hover/focus direction-10-component-interaction#02Click target <32px direction-10-component-interaction#03Transition đột ngột (instant) direction-10-component-interaction#04Loading state trắng trơn
ID ❌ PATTERN direction-10-responsive#01Text/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#03Horizontal scroll trên content chính
ID ❌ PATTERN direction-10-ai-slop-universal#slop-01border-left hoặc border-right: ≥2px solid <color> trên card/list/alertdirection-10-ai-slop-universal#slop-02bg-gradient-* + text-transparent + bg-clip-text trên heading/metricdirection-10-ai-slop-universal#slop-03Card (bg-white + border + shadow) chứa Card khác cùng treatment direction-10-ai-slop-universal#slop-04Cùng 1 gap/padding value (vd gap-4 everywhere) trong whole view direction-10-ai-slop-universal#slop-05Multiple consecutive text-center trong siblings (section sau section) direction-10-ai-slop-universal#slop-06Big icon box (rounded + tinted bg) trên mỗi heading trong feature list direction-10-ai-slop-universal#slop-07shadow-[...rgba(brand-color)...] box-shadow với colored glowdirection-10-ai-slop-universal#slop-08cubic-bezier với negative values (overshoot) hoặc ease-bounce/elasticdirection-10-ai-slop-universal#slop-09CSS 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-10Body text với uppercase + tracking-wider HOẶC text-justify
Source: ui-style-guide/CORE.md
ID ❌ PATTERN core-11-layout#01Content >1280px không max-width core-11-layout#02Page padding <16px mobile core-11-layout#03Sections không gap core-11-layout#04Card trong card, box trong box core-11-layout#05Grid quá đều, không focal point core-11-layout#06Content chia lô xám/trắng luân phiên
ID ❌ PATTERN core-11-color#01Brand red cho error/danger core-11-color#02>2 accent colors cùng lúc core-11-color#03White card trên white bg không border core-11-color#04Blue cho mọi thứ prominent core-11-color#05Gradient full page
ID ❌ PATTERN core-11-typography#01>3 font sizes trong 1 card core-11-typography#02Body <13px core-11-typography#03Heading cùng weight với body core-11-typography#04>4 text colors per view core-11-typography#05Mixed-language drift trong copy
ID ❌ PATTERN core-11-spacing-depth#01Shadow quá đậm (shadow-xl/shadow-2xl cho card default) core-11-spacing-depth#02Padding 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#04Divider thay spacing
ID ❌ PATTERN core-11-interaction#01Button không hover/focus state core-11-interaction#02Click target <32px core-11-interaction#03Loading state blank core-11-interaction#04Card hover thêm border + shadow + bg cùng lúc core-11-interaction#05Icon con bung shadow khi card cha hover
ID ❌ PATTERN core-11-tailwind#01Dynamic class: `bg-${color}-600` core-11-tailwind#02bg-(--token) hoặc var(--token) trong classcore-11-tailwind#03gray-*, zinc-*, neutral-*core-11-tailwind#04Hardcode hex trong class names
Source: ui-style-guide/landing.md
ID ❌ PATTERN landing-1.7-hero#01Eyebrow dùng bg-blue-50 text-blue-600 hoặc text-indigo-600 landing-1.7-hero#02Headline highlight dùng blue/indigo/purple gradient landing-1.7-hero#03Eyebrow text text-xs landing-1.7-hero#04Description text-xl hoặc text-2xl landing-1.7-hero#05Button font-black landing-1.7-hero#06Button py-5 text-lg (quá nặng) landing-1.7-hero#07Primary/secondary button khác font-weight
ID ❌ PATTERN landing-2.5-feature-grid#01Identical icon boxes across ALL cards (same color/size/shape) landing-2.5-feature-grid#024+ columns on desktop landing-2.5-feature-grid#03Heavy shadows (shadow-xl) on every card landing-2.5-feature-grid#04Centered text in every feature card landing-2.5-feature-grid#05Gradient card backgrounds landing-2.5-feature-grid#06”Learn more” link on every card (repeated)
ID ❌ PATTERN landing-3.4-showcase#01Screenshot với rotate-3 / rotate-6 landing-3.4-showcase#02Gradient overlay on product screenshot landing-3.4-showcase#03Multiple screenshots stacked tilted / overlapping landing-3.4-showcase#04Colored glow behind screenshot landing-3.4-showcase#05Screenshot full-bleed (edge-to-edge)
ID ❌ PATTERN landing-4.4-testimonials#01Giant decorative quote marks " as text-6xl landing-4.4-testimonials#02Avatar w-20 h-20 (huge) landing-4.4-testimonials#03Carousel auto-advance fast landing-4.4-testimonials#04Testimonials without role / company landing-4.4-testimonials#05Star rating in different colors per testimonial landing-4.4-testimonials#06”★★★★★” emoji characters instead of icon
ID ❌ PATTERN landing-5.4-cta#01Multiple CTAs per section (3+ buttons) landing-5.4-cta#02Full-width brand color section background landing-5.4-cta#03”Click here” / “Submit” generic copy landing-5.4-cta#04CTA block immediately after hero landing-5.4-cta#05Multiple !!! in CTA copy landing-5.4-cta#06CTA form requires 5+ fields landing-5.4-cta#07CTA với countdown timer pressure
ID ❌ PATTERN landing-6-composition#01Outer section card dùng rounded-2xl (cùng inner) landing-6-composition#02Section dùng p-4/p-6 thay p-10/p-12 landing-6-composition#03Heading center-aligned cho mọi section header landing-6-composition#04Heading 1 dòng dài chiếm full width landing-6-composition#05Section ↔ section gap dùng gap-12/gap-16 landing-6-composition#06Inner items dùng cùng padding với outer (p-10) landing-6-composition#07Outer card không có border + shadow yếu (alpha ≤0.04) landing-6-composition#08Eyebrow dùng plain text thay pill
ID ❌ PATTERN landing-6.6-constellation-block#01Outer dùng border-slate-100/200 (with border-color) landing-6.6-constellation-block#02Quên overflow-hidden trên middle landing-6.6-constellation-block#03Middle bg-slate-50 (quá nhạt) landing-6.6-constellation-block#04Cùng radius cho 3 tiers (e.g., outer + middle = rounded-[32px]) landing-6.6-constellation-block#05Dùng divide-x divide-y thay gap-[1px] cho 2-col grid landing-6.6-constellation-block#06Bottom row OUTSIDE middle (sibling) landing-6.6-constellation-block#07Per-cell border + shadow trên white landing-6.6-constellation-block#08Cell có >3 elements (icon-tile + title + target + body + audience + CTA) landing-6.6-constellation-block#09Bottom row content sai platform purpose (sales tone trên self-study) landing-6.6-constellation-block#10Per-cell translate-y / scale lớn hover
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#02Type-pattern bg với generic dot/grid (không brand vocabulary) landing-7-decoration#03Emoji sticker random không meaning (🌟 ⭐ ✨ scattered) landing-7-decoration#04Handwritten font cho body / labels / buttons landing-7-decoration#05Photo peek-edges dùng stock photo / illustration landing-7-decoration#06Ribbon badge cho status indicator (active/disabled/loading) landing-7-decoration#07Certificate stack cho generic feature (“tính năng mới”) landing-7-decoration#08Dotted arrow connector trong tight grid landing-7-decoration#09Section accent color rotation >3 distinct colors / page landing-7-decoration#102-color heading nhấn cả câu (text-brand-600 toàn heading) landing-7-decoration#11Big-number block dùng text-2xl (số nhỏ) + text-base label (label to)
Source: ui-style-guide/practice.md
ID ❌ PATTERN practice-2.6-answer-cards#01Shake / bounce animation on incorrect practice-2.6-answer-cards#02Brand red for “selected” state practice-2.6-answer-cards#03Full border + bg + shadow change on hover practice-2.6-answer-cards#04Icon badge above answer text practice-2.6-answer-cards#05Gradient bg on correct/incorrect practice-2.6-answer-cards#06Huge letter prefix “A” / “B” / “C” as badge practice-2.6-answer-cards#07”Try again” text on incorrect practice-2.6-answer-cards#08Confetti / celebration animation on correct
ID ❌ PATTERN practice-4.5-timer-progress#01Red flash / blink when time <1 min practice-4.5-timer-progress#02Timer font không tabular-nums practice-4.5-timer-progress#03Progress bar bounce/elastic easing practice-4.5-timer-progress#04Circular progress với huge % text center practice-4.5-timer-progress#05Step indicator có label “Câu 3 of 10” + dots đồng thời practice-4.5-timer-progress#06Auto-submit không warning
ID ❌ PATTERN practice-6.5-audio-tts#01Loud feedback sounds (100% volume) practice-6.5-audio-tts#02Harsh buzzer for incorrect practice-6.5-audio-tts#03Auto-play narration without user initiate practice-6.5-audio-tts#04Narration indicator using brand color practice-6.5-audio-tts#05No visual counterpart cho audio feedback practice-6.5-audio-tts#06Progress bar bounce/elastic during playback practice-6.5-audio-tts#07Vague labels (“Play”, “Pause” in English)
Source: ui-style-guide/data-entry.md
ID ❌ PATTERN data-entry-3.7-validation#01Validate on keystroke (every char) data-entry-3.7-validation#02Required marker * without a11y label data-entry-3.7-validation#03Error as modal / toast data-entry-3.7-validation#04Generic “Invalid input” / “Error” copy data-entry-3.7-validation#05English error messages data-entry-3.7-validation#06Red border alone, no text data-entry-3.7-validation#07Block typing past max length
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#02Step indicator ẩn steps ahead data-entry-4.6-multistep-flow#03Autosave toast mỗi 1500ms data-entry-4.6-multistep-flow#04Progress bar % không map với steps data-entry-4.6-multistep-flow#05Wizard animation slide-between-steps (transform transition) data-entry-4.6-multistep-flow#06Block Back button after completing step
ID ❌ PATTERN data-entry-5.6-rich-content#01Rich editor toolbar floats trên content (không shared border) data-entry-5.6-rich-content#02Dropzone không show format + size limit trước upload data-entry-5.6-rich-content#03Remove button dưới thumbnail (not overlay) data-entry-5.6-rich-content#04Progress bar bên dưới row (tạo vertical shift) data-entry-5.6-rich-content#05Markdown preview mở modal / new tab data-entry-5.6-rich-content#06Editor height fixed tall (~600px) luôn data-entry-5.6-rich-content#07Toolbar icon-tile-above label pattern
ID ❌ PATTERN data-entry-6.8-data-tables#01Bordered cells (full grid) data-entry-6.8-data-tables#02Numeric cells left-aligned data-entry-6.8-data-tables#03Select-all checkbox = “all rows everywhere” data-entry-6.8-data-tables#04Inline edit commits silently on Enter (no visual feedback) data-entry-6.8-data-tables#05Empty state = blank tbody + “No data” text data-entry-6.8-data-tables#06Loading = centered spinner replacing table data-entry-6.8-data-tables#07Page size > 50 on mobile data-entry-6.8-data-tables#08Row click = navigate AND checkbox = select
Source: figma-ai/naming-convention.md
ID ❌ PATTERN figma-naming-6-binding#01Hardcoded hex in fills when matching token exists figma-naming-6-binding#02text-color/* applied to icon vectors (prefix mismatch)figma-naming-6-binding#03Feature-named tokens (cause-bg-color, effect-text-color) figma-naming-6-binding#04Inconsistent focus ring (per-component color) figma-naming-6-binding#05Inventing new intensity modifier (e.g., “semi-soft”, “extra-dim”)
