Skip to main content
UI Guides

Search rules

Search all UI Guides rules by name, category, or source

designimpeccable

No Side-Stripe Accent Borders

NEVER

NEVER: Hang a thick colored stripe off one side of a card (one border side >= 2px while the others are <= 1px, in a non-neutral color, on a rounded box) — it makes the border-box asymmetric so text lands off-centre, and encodes status in hue alone. Use one even border, a tinted surface, and a leading icon plus a worded status.

Border a card evenly on all four sides instead of hanging a thick colored stripe off one edge

Bad

Good

Why it matters

impeccable's detector flags an element when one side's border-width is >= 2px while the others are <= 1px (or at least twice the widest other side), the border color is non-neutral, and either the width is >= 3px or the border-radius is greater than zero — a stripe on a rounded card. The pattern is not just overused: it makes the border-box asymmetric so text lands off-center, and it encodes status in hue alone. Use one even border, a tinted surface, and a leading icon plus a worded status instead.

References

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.