Things to avoid
129 rules and 1 spec
Filters
Generic-AI aesthetic (25 rules)
- Purple and violet as the unspecified defaultBucket: hybrid · Severity: warning · Has a detector
- Gradient text on headingsBucket: mechanical · Severity: error · Has a detector
- Decorative gradient blobs and orbsBucket: judgment · Severity: note · Has no detector
- Trend styles that fight legibilityBucket: mechanical · Severity: error · Has a detector
- Decorative styling that implies meaningBucket: judgment · Severity: note · Has no detector
- Repeated informationBucket: judgment · Severity: note · Has no detector
- Icons all competing at equal weightBucket: judgment · Severity: note · Has no detector
- A container around every groupBucket: judgment · Severity: note · Has no detector
- Emoji as interface iconographyBucket: mechanical · Severity: warning · Has a detector
- The three-column feature grid reflexBucket: judgment · Severity: note · Has no detector
- Oversized radius everywhereBucket: judgment · Severity: note · Has no detector
- Shadow as the only depth cueBucket: judgment · Severity: note · Has no detector
- Marketing voice in an applicationBucket: mechanical · Severity: warning · Has a detector
- Placeholder content shippedBucket: mechanical · Severity: warning · Has a detector
- A kicker above every headingBucket: hybrid · Severity: warning · Has a detector
- An eyebrow chip over the headlineBucket: hybrid · Severity: warning · Has a detector
- Cream and beige by reflexBucket: hybrid · Severity: warning · Has a detector
- An italic serif display headlineBucket: hybrid · Severity: warning · Has a detector
- A side-tab accent borderBucket: hybrid · Severity: warning · Has a detector
- A thick coloured border on a rounded elementBucket: hybrid · Severity: warning · Has a detector
- Cards inside cardsBucket: judgment · Severity: warning · Has no detector
- The soft rounded cardBucket: judgment · Severity: warning · Has no detector
- A decorative grid or stripe backgroundBucket: hybrid · Severity: warning · Has a detector
- Dark mode with glowing accentsBucket: hybrid · Severity: warning · Has a detector
- Numbered section labelsBucket: hybrid · Severity: warning · Has a detector
Typography (13 rules)
- Unbounded line lengthBucket: judgment · Severity: note · Has no detector
- Centred or justified body textBucket: judgment · Severity: note · Has no detector
- One line-height for everythingBucket: judgment · Severity: note · Has no detector
- Thin weights for body textBucket: judgment · Severity: note · Has no detector
- Ad-hoc type sizesBucket: judgment · Severity: note · Has no detector
- All-caps for anything longBucket: judgment · Severity: note · Has no detector
- Skipping heading levels for visual reasonsBucket: judgment · Severity: note · Has no detector
- Long-form text below 18pxBucket: judgment · Severity: note · Has no detector
- More than two typefacesBucket: judgment · Severity: note · Has no detector
- More than two font weightsBucket: judgment · Severity: note · Has no detector
- Text placed directly on a photoBucket: judgment · Severity: note · Has no detector
- Monospace sized by a guessed ratioBucket: judgment · Severity: note · Has no detector
- A word stranded on its own lineBucket: judgment · Severity: note · Has no detector
Colour and contrast (9 rules)
- Depth built from shadow in dark modeBucket: judgment · Severity: note · Has no detector
- Pure black on pure whiteBucket: mechanical · Severity: warning · Has a detector
- Grey text below contrast floorBucket: mechanical · Severity: error · Has a detector
- Colour as the sole signalBucket: judgment · Severity: note · Has no detector
- Dark mode by inversionBucket: judgment · Severity: note · Has no detector
- Semantic colours invented inlineBucket: judgment · Severity: note · Has no detector
- Link treatmentBucket: judgment · Severity: note · Has no detector
- Coloured heading textBucket: judgment · Severity: note · Has no detector
- Non-interactive elements styled like interactive onesBucket: judgment · Severity: note · Has no detector
Spacing and layout (14 rules)
- Spacing off the scaleBucket: judgment · Severity: note · Has no detector
- Symmetric spacing around headingsBucket: judgment · Severity: note · Has no detector
- Spacing that does not grow outwardBucket: judgment · Severity: note · Has no detector
- Icon and text out of balanceBucket: judgment · Severity: note · Has no detector
- Broken left edgeBucket: judgment · Severity: note · Has no detector
- Multiple alignments in one componentBucket: judgment · Severity: note · Has no detector
- Mixed-size text centred verticallyBucket: judgment · Severity: note · Has no detector
- No proximity hierarchyBucket: judgment · Severity: note · Has no detector
- One padding value for all containersBucket: judgment · Severity: note · Has no detector
- Optical alignment ignoredBucket: judgment · Severity: note · Has no detector
- A page that never adapts to the viewportBucket: mechanical · Severity: warning · Has a detector
- A full-height section sized with
100vhBucket: mechanical · Severity: warning · Has a detector - A pinned bar under the notch or the home indicatorBucket: mechanical · Severity: warning · Has a detector
- The page scrolls sideways on a phoneBucket: judgment · Severity: warning · Has no detector
States and interaction (23 rules)
- Missing statesBucket: judgment · Severity: note · Has no detector
- Focus removed without replacementBucket: mechanical · Severity: error · Has a detector
- Empty states omittedBucket: judgment · Severity: note · Has no detector
- Hover-only affordancesBucket: judgment · Severity: note · Has no detector
- Disabled buttonsBucket: judgment · Severity: note · Has no detector
divwith a click handlerBucket: judgment · Severity: note · Has no detector- Icon-only controls without namesBucket: judgment · Severity: note · Has no detector
- Dynamic results with no announcementBucket: judgment · Severity: note · Has no detector
- Icon without a visible labelBucket: judgment · Severity: note · Has no detector
- Unconventional controlsBucket: judgment · Severity: note · Has no detector
- Important navigation hidden when it fitsBucket: judgment · Severity: note · Has no detector
- Off-screen content with no affordanceBucket: judgment · Severity: note · Has no detector
- Minimal but unreadableBucket: judgment · Severity: note · Has no detector
- Brand colour colliding with a system meaningBucket: judgment · Severity: note · Has no detector
- More than one interactive colourBucket: judgment · Severity: note · Has no detector
- Interface built only for short contentBucket: judgment · Severity: note · Has no detector
- Truncating where items share a prefixBucket: judgment · Severity: note · Has no detector
- Button hierarchy carried by colour aloneBucket: judgment · Severity: note · Has no detector
- Light grey secondary buttonBucket: judgment · Severity: note · Has no detector
- Inconsistent button shapesBucket: judgment · Severity: note · Has no detector
- Destructive actions coloured red at restBucket: judgment · Severity: note · Has no detector
- Primary action parked at the rightBucket: judgment · Severity: note · Has no detector
- A menu that cannot be opened, or does not say it is openBucket: mechanical · Severity: warning · Has a detector
Forms (16 rules)
- Placeholder as labelBucket: judgment · Severity: note · Has no detector
- Unhelpful error textBucket: judgment · Severity: note · Has no detector
- Validation timing wrong at both endsBucket: judgment · Severity: note · Has no detector
- Input cleared on errorBucket: judgment · Severity: note · Has no detector
- Missing input affordancesBucket: judgment · Severity: note · Has no detector
- Critical function dependent on JavaScriptBucket: judgment · Severity: note · Has no detector
- Required fields left unmarkedBucket: judgment · Severity: note · Has no detector
- Labels beside inputsBucket: judgment · Severity: note · Has no detector
- Uniform field widthsBucket: judgment · Severity: note · Has no detector
- A dropdown for a small set of optionsBucket: judgment · Severity: note · Has no detector
- A long dropdown where autocomplete belongsBucket: judgment · Severity: note · Has no detector
- Toggle and checkbox used interchangeablyBucket: judgment · Severity: note · Has no detector
- Negatively phrased checkbox labelsBucket: judgment · Severity: note · Has no detector
- Instructional verbs in labelsBucket: judgment · Severity: note · Has no detector
- Form text small enough to make the phone zoomBucket: mechanical · Severity: warning · Has a detector
- Asking for more than the task needsBucket: judgment · Severity: warning · Has no detector
Motion (7 rules)
- Entrance animation on everythingBucket: judgment · Severity: note · Has no detector
prefers-reduced-motionignoredBucket: judgment · Severity: note · Has no detector- A pulsing status dotBucket: hybrid · Severity: warning · Has a detector
- Durations too longBucket: judgment · Severity: note · Has no detector
- A layout change that jumpsBucket: judgment · Severity: note · Has no detector
- Animating layout, or everythingBucket: hybrid · Severity: warning · Has a detector
- Several things moving at onceBucket: judgment · Severity: note · Has no detector
Code-level (6 rules)
- New component instead of the existing oneBucket: judgment · Severity: note · Has no detector
- Local convention overriddenBucket: judgment · Severity: note · Has no detector
- Values hard-coded past the token layerBucket: mechanical · Severity: error · Has a detector
- JavaScript for something CSS doesBucket: judgment · Severity: note · Has no detector
- A generic element where a native one says what the content isBucket: mechanical · Severity: warning · Has a detector
- A token name nothing declaresBucket: mechanical · Severity: error · Has a detector
Search and sharing (9 rules)
- Metadata that no longer matches the pageBucket: judgment · Severity: error · Has no detector
- An indexable page with no title or description of its ownBucket: mechanical · Severity: error · Has a detector
- Metadata past its budgetBucket: mechanical · Severity: warning · Has a detector
- A page that must not be indexed and does not say soBucket: mechanical · Severity: error · Has a detector
- A sitemap that contradicts the pageBucket: judgment · Severity: error · Has no detector
- Invented facts in metadataBucket: mechanical · Severity: warning · Has a detector
- Structured data retyped instead of readBucket: judgment · Severity: note · Has no detector
- A list served as a fact when it is emptyBucket: judgment · Severity: note · Has no detector
- An indexable page a link preview cannot readBucket: mechanical · Severity: warning · Has a detector
Safety at the interface (7 rules)
- A new-tab link that hands over the page it leftBucket: mechanical · Severity: error · Has a detector
- User content written as markupBucket: mechanical · Severity: warning · Has a detector
- Credential fields that fight the password managerBucket: mechanical · Severity: warning · Has a detector
- A frame with no sandbox, a script from anywhereBucket: mechanical · Severity: warning · Has a detector
- A secret rendered as plain textBucket: judgment · Severity: note · Has no detector
- An error that describes the systemBucket: judgment · Severity: warning · Has no detector
- Inline handlers on a page with a content policyBucket: judgment · Severity: note · Has no detector