Skip to main content
UI Guides

Search rules

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

layoutVercel

Balance Contrast in Lockups

SHOULD

SHOULD: Balance icon/text lockups (stroke/weight/size/spacing/color)

Adjust weight, size, spacing when text and icons sit together

Bad

Good

Why it matters

Icons and text have different visual weights. A light icon next to bold text feels unbalanced. Either use heavier icons, lighter text, adjust sizing, or tweak color to create visual harmony in icon-text combinations.

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.