Back to Playbook

Semantic Colors

Functional colors that communicate status and feedback, such as success, warning, error, and information.

Why it matters

Semantic colors provide meaning to the interface. They allow users to quickly scan and understand the status of system elements without reading every label. Using standard colors (green for success, red for error) leverages existing mental models.

Status Colors

Edit

Used for success messages, completed actions, and positive trends. Indicates that everything is working as expected.

Edit

Used for warnings, attention needed, or pending actions. Signals caution without blocking the user.

Edit

Used for errors, destructive actions, and critical alerts. Demands immediate attention.

Edit

Used for neutral information, help tips, and links. Provides context without implying success or failure.

Live Preview

See how your semantic colors communicate status in real-time.

Success: Your changes have been saved successfully.
Warning: Your account subscription expires in 3 days.
Error: Failed to connect to the server. Please try again.
Info: A new version of the app is available.
Active Pending Failed

Usage Checklist

  1. Don't rely on color alone

    Always use text or icons alongside color to ensure accessibility for colorblind users.

  2. Consistent application

    Don't use the error color for a non-destructive button or the success color for a neutral action.

  3. Contrast

    Ensure text on semantic backgrounds meets accessibility standards (WCAG AA).

Previous: Neutrals Next: Dark Mode