Semantic Colors
Semantic colors carry meaning, not brand. They tell a user that something succeeded, needs attention, failed, or is simply informational. Because these meanings are near-universal, COVALIDA uses conventional signal colors — a designer should never invent a new "brand green" for success. The one deliberate exception: info reuses the brand teal, so neutral messages stay unmistakably COVALIDA.
When to use each
Success — #22C55E
#22C55E · rgb(34, 197, 94)
Confirmation. Use it for a valid form field, a completed upload, a passing check, a "saved" toast, or a healthy status dot in the Trust Center. Green means "you're clear to proceed" — the reassuring signal that fits COVALIDA's calm, fear-reducing tone. Keep it for genuine positive outcomes, not decoration.
Warning — #EAB308
#EAB308 · rgb(234, 179, 8)
Attention without alarm. Use it for a soft caution: an expiring certificate, an incomplete-but-savable section, an approaching deadline, or a "review recommended" banner. Warning flags something the user should notice but that is not yet a failure. This amber is bright on light backgrounds, so pair it with dark text — never rely on small amber type on white to carry the message.
Error — #EF4444
#EF4444 · rgb(239, 68, 68)
Something is wrong and blocks progress. Use it for invalid input, a failed submission, a required field left empty, or the confirm state of a destructive action (delete, revoke). Error is the strongest signal in the set — use it sparingly so it keeps its urgency. Never use red merely to make something look important.
Info — #008080
#008080 · rgb(0, 128, 128)
Neutral, helpful context: a tip, a "what happens next" note, a general system message. Info deliberately reuses Deep Teal rather than the industry-default blue, so informational UI stays on-brand and the palette doesn't sprawl. This is the one place brand and semantic color intentionally overlap — see Palette.
Applying them in UI
Semantic color rarely appears alone. Combine it with an icon and text so meaning survives for color-blind users and in grayscale.
- Validation — tint the field border and helper text: Error
#EF4444on an invalid field, Success#22C55Eon a confirmed one. Always add an icon and a message; color is never the only signal. - Alerts and banners — use a pale tinted background with a solid left accent bar and dark text. A 10–15% tint of the signal color keeps the surface readable; the accent bar and icon carry the meaning.
- Toasts and inline status — a small colored dot or icon plus a short label. Keep the surface neutral (white or Light Mint) and let the dot signal state.
- Status dots — Success = healthy/active, Warning = needs review, Error = failed/expired, Info/teal = informational or in-progress.
Text on signal colors
#EAB308 (warning) is light — use dark text on it. #EF4444 and #22C55E are mid-tones; verify text contrast per use, and prefer dark text on tinted (pale) backgrounds rather than white text on the saturated color. Check every combination against Accessibility.
Rules of restraint
Semantic colors are functional accents, not part of the brand palette. Keep them disciplined.
- Use them sparingly. A screen full of red and green looks broken. Signal colors should be rare enough that they still signal.
- Never use a semantic color as a brand color. Do not build a green button, a yellow header, or a red panel because it "looks nice." Brand emphasis is teal; green/amber/red mean success/warning/error and nothing else.
- Keep meanings fixed. One color, one meaning, everywhere. Green is never "on-brand accent," red is never "just a highlight."
- Don't recolor them to match teal. Their value is that they're recognizably conventional. Shifting them toward teal weakens the signal.
Related
- Palette — the five core brand colors.
- Scales & Tints — building tinted backgrounds and borders.
- Methodology — how semantic accents fit the 60-30-10 ratio.
- Design Tokens — semantic values ready to copy.