# Don't Use Glow as Affordance

**NEVER** · **ID:** `design-ibelick-no-glow` · **Category:** design
**Source:** [@Ibelick](https://www.ui-skills.com/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/design-ibelick-no-glow

> NEVER: Use glow effects (box-shadow with blur and color) as primary affordances. Glows are decorative, not functional. Use borders or backgrounds for affordance.

Never rely on glow effects as the primary indicator for interactive elements

Verbatim from the baseline-ui skill — one line under "Design". Our reasoning: a glow is a soft, low-contrast halo, which is precisely the wrong material for the one job an affordance has, namely being unmistakable. It washes out in sunlight, renders differently on every panel, and is invisible to anyone who cannot perceive the hue it is made of. If a glow is the only thing marking a control as interactive, the control has no marking. Carry the affordance on something structural — a border, a fill, a shape, a label — and treat glow as ornament layered on top, never as the signal itself. The same applies to focus: a glow is not a focus ring.

## Bad — do not do this

`design-ibelick-no-glow-bad`

```tsx
export function IbelickNoGlowBad() {
  return (
    <div className="space-y-4">
      <div className="flex gap-4">
        <button
          className="px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm"
          style={{
            boxShadow: '0 0 20px rgba(59, 130, 246, 0.6), 0 0 40px rgba(59, 130, 246, 0.3)',
          }}
        >
          Primary Action
        </button>
        <button
          className="px-4 py-2 rounded-lg bg-muted text-sm"
          style={{
            boxShadow: '0 0 15px rgba(100, 100, 100, 0.4)',
          }}
        >
          Secondary
        </button>
      </div>
      <p className="text-xs text-destructive">
        Glow effects as affordance - hard to see in bright light, unclear hierarchy
      </p>
    </div>
  );
}
```

## Good — do this

`design-ibelick-no-glow-good`

```tsx
export function IbelickNoGlowGood() {
  return (
    <div className="space-y-4">
      <div className="flex gap-4">
        <button className="px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm shadow-sm hover:bg-primary/90 transition-colors">
          Primary Action
        </button>
        <button className="px-4 py-2 rounded-lg bg-muted text-sm border hover:bg-muted/80 transition-colors">
          Secondary
        </button>
      </div>
      <p className="text-xs text-success">
        Clear hierarchy through color and contrast, not glow effects
      </p>
    </div>
  );
}
```

## References

- [ibelick — baseline-ui skill](https://raw.githubusercontent.com/ibelick/ui-skills/main/skills/baseline-ui/SKILL.md)
- [Clickability Signifiers](https://www.nngroup.com/articles/clickable-elements/)