Semantic Color
Colours with fixed meanings that communicate status, intent, or state across the entire UI.
Plain English
Semantic colours are the traffic lights of UI design. Green = success, red = error, yellow/amber = warning, blue = info. These meanings are so ingrained in users that violating them creates confusion — a red confirmation button, or a green error message, would make users double-check everything. The value of a semantic colour system is consistency: every status indicator, toast, badge, and alert in the product speaks the same visual language.
Technical
Define semantic colours as tokens with purpose-based names, not colour-based names: --color-success instead of --color-green. This way, you can change the shade without updating component code. Each semantic colour needs a full set: a dark variant for text, a medium for icons/borders, a light for backgrounds. Example: success-text (#166534), success-border (#16a34a), success-bg (#f0fdf4). Semantic colours should pass WCAG AA contrast requirements in all their text usages.
Live Demo
Primary
Main actions, links, focus
Success
Confirmation, completion
Warning
Caution, destructive preview
Danger
Errors, destructive actions
Semantic colors carry meaning. Use them consistently across the entire system.
Usage
✓ Good usage
Use the success semantic colour (green badge) to show a completed task, the error colour (red badge) for a failed one, and the warning colour (amber) for something needing attention.
✗ Bad usage
Using the brand's primary blue for error states because it "looks nicer" — users are conditioned to read blue as info/link, not error.
Recommended values
- Success: green family — text #166534, border #16a34a, bg #f0fdf4
- Error: red family — text #991b1b, border #dc2626, bg #fef2f2
- Warning: amber family — text #92400e, border #d97706, bg #fffbeb
- Info: blue family — text #1e40af, border #2563eb, bg #eff6ff
- Neutral: grey — text #374151, border #d1d5db, bg #f9fafb
Common mistakes
- Using colour alone to convey semantic meaning — always pair with an icon and text label for accessibility.
- Non-standard semantic assignments (red for success, green for delete).
- Insufficient contrast in the "text on semantic background" combination.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Define four semantic colour sets (success/error/warning/info), each with text, border, and background variants. Use green for success, red for errors, amber for warnings, blue for information. Every status indicator uses the semantic set — never raw colours.