Skip to main content

Search rules

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

aestheticsimpeccable

Kill the Icon-Tile Feature Card

NEVER

NEVER: Stack a rounded-square icon tile above a feature heading — the tell is geometric: a heading's previous sibling measuring 32–128px on both axes, roughly square, with a visible background or border and a border-radius under half its width. Move the icon inline into the heading line, drop the container, or give the feature a real image. (A circular avatar, radius = half the width, is exempt.)

Stop stacking a rounded-square tinted icon tile above every feature heading — put the icon inline instead

Bad

Good

Why it matters

The tell is geometric, so it can be detected mechanically: a previous sibling of a heading that measures 32–128px on BOTH axes, is roughly square, has a visible background or border, and has a border-radius under half its width. (A circular avatar is exempt — its radius is half the width.) That is the shape every generator reaches for, and it is why three-up feature grids from different products are indistinguishable.

Break the geometry, not the icon: move the icon inline into the heading line, drop the container entirely, or let the feature carry an actual image. If the icon must sit in a box, the box has to earn it.

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.