# Inconsistent Semantic Colors

**SHOULD** · **ID:** `design-color-meaning` · **Category:** design
**Source:** Custom
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/design-color-meaning

> SHOULD: Use semantic color tokens consistently - red/destructive for errors, green/success for confirmation, yellow/warning for caution, blue/info for information.

Use semantic colors consistently (error=red, success=green)

This is our own rule, not an upstream citation — the Rams review has no bullet for it, and we previously mislabelled it as one. It is NOT the same rule as design-semantic-colors, which is about token naming (write `bg-destructive`, not `bg-red-600`, so themes can move). You can obey that one perfectly and still hand `bg-destructive` to the Save button. This rule is about the meaning a colour has already acquired: users read red as stop/danger and green as go/safe before they read the label, so an inverted pair does not merely confuse, it gets the destructive action clicked. Fix the semantics of the mapping, then remember that colour is only ever the second signal — the label and the icon must say it too (see content-redundant-cues).

## Bad — do not do this

`design-color-meaning-bad`

```tsx
export function ColorMeaningBad() {
  // BAD: Colors used inconsistently, contradicting universal expectations
  // Red typically means danger/stop, green means success/go
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Inverted Color Meanings</h4>
        <div className="space-y-4 p-4 bg-muted rounded-lg">
          {/* BAD: Status badges with wrong colors */}
          <div className="flex flex-wrap gap-2">
            {/* BAD: Red for positive state */}
            <span className="px-2 py-1 text-xs rounded-full bg-destructive/20 text-destructive">
              Active
            </span>
            {/* BAD: Green for negative state */}
            <span className="px-2 py-1 text-xs rounded-full bg-success/20 text-success">
              Inactive
            </span>
            {/* BAD: Blue for warning */}
            <span className="px-2 py-1 text-xs rounded-full bg-info/20 text-info">
              Error
            </span>
          </div>

          {/* BAD: Action buttons with inverted semantics */}
          <div className="flex gap-2">
            {/* BAD: Red "Save" button - looks dangerous */}
            <button className="px-3 py-1.5 bg-destructive text-destructive-foreground rounded-md text-sm">
              Save Changes
            </button>
            {/* BAD: Green "Delete" button - looks safe */}
            <button className="px-3 py-1.5 bg-success text-success-foreground rounded-md text-sm">
              Delete All
            </button>
          </div>

          {/* BAD: Form validation with wrong colors */}
          <div className="space-y-2">
            <div className="flex items-center gap-2">
              <span className="w-2 h-2 rounded-full bg-destructive" />
              <span className="text-sm text-destructive">Payment successful!</span>
            </div>
            <div className="flex items-center gap-2">
              <span className="w-2 h-2 rounded-full bg-success" />
              <span className="text-sm text-success">Card declined</span>
            </div>
          </div>
        </div>
        <div className="mt-3 bg-muted rounded p-2 font-mono text-xs">
          <code className="text-error">Red=Success? Green=Error? Users will misread!</code>
        </div>
      </div>
      <p className="text-xs text-error">
        Inverted color semantics cause confusion and dangerous mistakes
      </p>
    </div>
  );
}
```

## Good — do this

`design-color-meaning-good`

```tsx
export function ColorMeaningGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Consistent Semantic Colors</h4>
        <div className="space-y-4 p-4 bg-muted rounded-lg">
          <div className="flex flex-wrap gap-2">
            <span className="px-2 py-1 text-xs rounded-full bg-success/20 text-success">Active</span>
            <span className="px-2 py-1 text-xs rounded-full bg-destructive/20 text-destructive">Inactive</span>
            <span className="px-2 py-1 text-xs rounded-full bg-warning/20 text-warning">Pending</span>
          </div>
          <div className="flex gap-2">
            <button className="px-3 py-1.5 bg-primary text-primary-foreground rounded-md text-sm">
              Save
            </button>
            <button className="px-3 py-1.5 bg-destructive text-destructive-foreground rounded-md text-sm">
              Delete
            </button>
          </div>
        </div>
        <div className="mt-3 bg-muted rounded p-2 font-mono text-xs">
          <code>Green=success, Red=danger, Yellow=warning</code>
        </div>
      </div>
      <p className="text-xs text-success">
        Colors match user expectations - no confusion
      </p>
    </div>
  );
}
```

## References

- [Psychology of Color in UX](https://www.smashingmagazine.com/2025/08/psychology-color-ux-design-digital-products/)