Skip to content
UIGrammer
EN 中文

Anti-pattern · Color · Low

Tinted Neutral Image Outline

A tinted neutral image outline is a faint accent-coloured ring added around photos and avatars that adds no meaning and dirties the edge.

The tell

Every image or avatar carries the same faint colored ring, usually in the accent hue, at 1px.

Why it happens

Borders around avatars signal "selected" in most design systems; models generalise that cue to all imagery. It is a cheap way to make a flat layout look considered.

The rule

Drop the ring, or use a neutral hairline only where the image edge genuinely disappears into the background.

  1. Remove the accent ring from all photography first and re-check the layout.
  2. If an image edge vanishes against its surface, add a neutral hairline at 10-15% black.
  3. Keep accent borders exclusively for selected and active states.

What is a Tinted Neutral Image Outline?

A 1px accent-tinted border around every image is a habit models pick up from avatar stacks and selected states. On photographs it does nothing: it does not separate the image from the background (the image already has edges), and it muddies the boundary on light photos. Use a real hairline in a neutral tone when you need separation, or drop the border entirely.

Fix prompt

Paste this after your existing prompt to strip the pattern from the result.