<!-- https://getkonjo.com/design/agents/anti-patterns · source: .claude/skills/design/references/anti-patterns.md -->

# Anti-patterns

Each is a named mechanism observed in a real product. "It looks dated" is not a diagnosis;
these are.

## In Konjo's own tree

1. **Hairline-only hierarchy.** 318 uses of `radius.card`, 487 border declarations, all one
   weight. Train home stacks up to eight containers at identical weight under a band that
   shouts three times, so nothing can be second-most-important.
2. **Uppercase inflation.** Five uppercase registers shipping at once (`eyebrow` 11/800,
   `sectionLabel` 12/500, `bandLabel` 16/900, `bandLabelLead` 18/900, tri-buttons 10/800).
   Uppercase used as ambient light instead of a spotlight.
3. **Duplicate destination in one viewport.** Events home shows the same event three times
   — band strip, featured card, browse row. Learn shows the same destination twice.
4. **Truncate rather than reflow.** The shipped marketing screenshot clips "curriculum &
   class …" mid-sentence. Band labels are `numberOfLines={1}`, so long event names silently
   disappear.
5. **Ship a law, then break it privately.** Thirteen violations of the no-depth law — six
   in `src/`, seven gradients in Studio. `PlansLibraryScreen` defines *two* shadow levels,
   an elevation ramp reinvented locally because the token set has none.
6. **One bespoke Card per feature.** 16+ `*Card.tsx` components, 29 files defining their own
   button style, and no `Card` or `Button` primitive anywhere in `src/`.
7. **Empty space that reads as unfinished, not spacious.** ~400pt of blank white below
   Train home; a red button floating in a void on Run class.
8. **Inverted emphasis from colour inflation.** On Train home the red "See all" is more
   prominent than the section label it belongs to.
9. **Two equally-weighted red buttons** on Run class with no primary/secondary rank — for
   the persona with literally one free hand.
10. **The most emotional moment is the least legible thing in the product.** The achievement
    gold pair computes to 2.97:1.
11. **Studio is better systematised than the app.** `apps/studio` has `ui/button.tsx`; the
    128-screen mobile app has no Button at all.

## In the competitors

12. **Inverted row anatomy** — Mindbody's class list sets "Mon 4/6 at 7:00am" at 15pt grey
    *above* "Gentle Yoga with Sound Bath" at 17pt black. The eye lands on the timestamp
    instead of the class.
13. **A 48pt button carrying 13pt type** — Mindbody's "BOOK NOW". Target size and label size
    decided independently of each other.
14. **The primary row action as the weakest element in the row** — Mindbody's "SCHEDULE"
    ghost button: lowest contrast, smallest type, smallest target, and under 44pt.
15. **Selected state that doesn't read as selected** — Mindbody's segmented tabs differ only
    by a 3px underline in the same colour, weight, and size as unselected.
16. **Three button styles in one 44pt row** — Zen Planner's date stepper: two bare chevrons
    with no container, a bordered square icon button, and an unstyled label.
17. **Competing bold lines** — Zen Planner class rows set two of four lines bold, so the
    class name and the instructor name fight.
18. **An unexplained decorative accent** — Zen Planner's 4px gold left bar, which encodes
    nothing.
19. **A gradient nav bar** — Zen Planner's black-to-charcoal top bar. Dates a product instantly.
20. **Four stacked metadata treatments in one row** — Mindbody search results: name, address,
    tag chips, distance, and star rating, each with its own size and colour.
21. **Marketing composition inside the product** — several competitors ship App Store shots
    of tilted device mockups because the real screens have no hero. If the product needs a
    tilted mockup to look good, the product doesn't look good.