# Balance Contrast in Lockups

**SHOULD** · **ID:** `layout-balance-contrast` · **Category:** layout
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/layout-balance-contrast

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

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

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.

## Bad — do not do this

`layout-balance-contrast-bad`

```tsx
export function BalanceContrastBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <div className="flex items-center gap-3 p-3 bg-muted rounded-lg mb-4">
          <svg className="w-5 h-5 text-muted-foreground" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
          </svg>
          <span className="text-sm font-bold text-foreground">Notifications</span>
        </div>
        <div className="flex items-center gap-3 p-3 bg-muted rounded-lg">
          <svg className="w-5 h-5 text-foreground" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z" />
          </svg>
          <span className="text-sm font-light text-muted-foreground">Help Center</span>
        </div>
        <p className="mt-3 text-xs text-muted-foreground">
          Thin icon with bold text vs. heavy icon with light text. Visual weight doesn't match.
        </p>
      </div>
      <p className="text-xs text-error mt-4">
        Mismatched icon/text weights - visual imbalance
      </p>
    </div>
  );
}
```

## Good — do this

`layout-balance-contrast-good`

```tsx
export function BalanceContrastGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <div className="flex items-center gap-3 p-3 bg-muted rounded-lg mb-4">
          <svg className="w-5 h-5 text-muted-foreground" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
          </svg>
          <span className="text-sm font-medium text-foreground">Notifications</span>
        </div>
        <div className="flex items-center gap-3 p-3 bg-muted rounded-lg">
          <svg className="w-5 h-5 text-muted-foreground" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
          </svg>
          <span className="text-sm font-medium text-foreground">Help Center</span>
        </div>
        <p className="mt-3 text-xs text-muted-foreground">
          Consistent 1.5px stroke icons with medium-weight text. Balanced visual hierarchy.
        </p>
      </div>
      <p className="text-xs text-success mt-4">
        Matched icon stroke and text weight - visual harmony
      </p>
    </div>
  );
}
```

## References

- [Visual Balance](https://www.nngroup.com/articles/visual-hierarchy-ux-definition/)