Briefle words · UI design
Semantic color
Color that carries a fixed meaning, like green for success and red for errors, rather than being used as decoration.
Say it to an AI
Invoices card with a mostly neutral palette and a single accent color reserved for the "New invoice" button. Use semantic color on the status badges only: green for Paid, red for Overdue, amber for Pending. No decorative color on avatars, amounts or titles.
How an expert would brief the stronger version of “Invoice list”.
See it
Try it as a puzzle →Recent invoices panel in a freelancer's billing dashboard.
Why: A's badges are green for Paid, red for Overdue and amber for Pending. B's badges are indigo, violet and sky blue, with no link to what they say.
More ways experts use it
A six-row cost table (five services plus total) with Sep, Oct and percent change, numbers right-aligned. Apply semantic color by polarity: this is spend, so increases are red and decreases green, with a 'lower is better' note so the coloring is unambiguous.
Cloud spend table · Data & charts
Related words
Room 1 · Essentials
Learn “Semantic color” in a five-minute lesson