📖 Step 5: Design - Advanced UI/UX#121 / 291
Semantic Color
Semantic Color
📖One-line summary
A color system where colors carry meaning, like red for error and green for success.
✨Example
Colors that carry meaning
✓Success: changes saved
✕Error: the operation failed
⚠Warning: storage is low
ℹInfo: a new version is out
⚡Vibe coding prompt examples
>_
Define a semantic color system using CSS variables. Split into --color-success, --color-error, --color-warning, --color-info, and support dark mode.
>_
Define semantic colors in design tokens. Create 50~900 scales for primary, secondary, error, success, and warning.
Try these prompts in your AI coding assistant!