Before vs After
Old Wise green palette (left) vs new corrected SaaS palette (right).
Before — Wise Green
Single-accent green system. Dark institutional feel. Limited chart/badge variety. Heavy borders and backgrounds.
Primary Button
Secondary
After — Modern SaaS
Multi-accent system. Light, energetic, modern. 4 semantic accents. Dedicated chart palette. Clean hierarchy.
Color Tokens
Complete color palette organized by semantic role.
Base Colors
#F4F4F5
Background Primary
--color-background-primary
Main app background
#FFFFFF
Background Secondary
--color-background-secondary
Cards, elevated surfaces
#ECECEE
Background Panel
--color-background-panel
Inner panels, table headers
#D8D8DC
Border Soft
--color-border-soft
Card borders, dividers
#D9D9DD
Border Neutral
--color-border-neutral
Progress tracks, dividers
Text Colors
#141418
Text Primary
--color-text-primary
Headings, body text
#8F96A3
Text Secondary
--color-text-secondary
Labels, captions, hints
#FFFFFF
Text Inverse
--color-text-inverse
Text on dark/accent backgrounds
#C0C4CC
Text Disabled
--color-text-disabled
Disabled states, placeholders
Accent Colors
#B8E62E
Lima Vibrante
--color-accent-lime
CTA, progress, Google Ads
#5667EA
Azul Royal
--color-accent-blue
Metrics, Meta Ads, primary actions
#8F4BE8
Roxo Eletrico
--color-accent-purple
Creatives, secondary charts
#38A9D4
Ciano Claro
--color-accent-cyan
Links, badges, info chips
Support Colors
#E9D9F9
Lavanda Suave
--color-support-lavender
Purple chip/badge backgrounds
#D9EEF7
Azul Gelo
--color-support-ice-blue
Info badge/link backgrounds
#F0FAD4
Lima BG
--color-support-lime-bg
Lime badge/chip backgrounds
#EEF0FD
Blue Light
--color-accent-blue-light
Blue badge/hover backgrounds
#F3ECFC
Purple Light
--color-accent-purple-light
Purple badge/hover backgrounds
Feedback Colors
#2E7D32
Success
--color-feedback-success
Positive states, confirmations
#F9A825
Warning
--color-feedback-warning
Caution states, alerts
#C62828
Error
--color-feedback-error
Errors, destructive actions
#38A9D4
Info
--color-feedback-info
Informational messages
Chart Colors
Chart Sequence
chart-1 to chart-4
--color-chart-1..4
Primary data series
Extended
chart-5, chart-6
--color-chart-5..6
Extended data series
#D9D9DD
Chart Track
--color-chart-track
Progress tracks, empty bars
Buttons
Primary uses Blue Royal. High-energy CTA uses Lima. Destructive uses Error red.
Variants
States
Sizes
Inputs
Border: border-soft. Focus: accent-blue with glow. Error: feedback-error.
Default state
Focus: blue border + subtle glow
Password must be at least 8 characters
Disabled: panel background + muted text
Cards
White cards on light background (#F4F4F5). Subtle shadow + soft border.
Total Impressions
1.2M
+12.5% vs last week
Active Campaigns
47
+3 new
Conversion Rate
3.8%
Target: 5%76%
Budget Spent
R$ 48.2k
-2.1% vs budget
Spend by Platform
Meta Ads
Google Ads
TikTok
Distribution
This month
4
Meta Ads42%
Google Ads26%
TikTok17%
Other15%
Badges & Chips
Semantic badges use support tint backgrounds. Chips for filters and actions.
Badges
Meta Ads
Google Ads
Creative
Information
Active
Pending
Failed
Draft
Chips (Filters)
All
Campaigns
Ad Sets
Creatives
Chips (Filled)
Meta
Google
TikTok
LinkedIn
Feedback
Semantic feedback colors with tinted backgrounds. Always includes text + icon, never color alone.
✓ Campaign published successfully
⚠ Budget reaching 90% of limit
✕ Payment method declined
ℹ Data syncs every 30 minutes
Accessibility note: Feedback must never rely on color alone. Always pair with icon and text label. All feedback text meets WCAG AA contrast on their respective backgrounds.
Progress Indicators
Progress bars use accent colors on neutral tracks.
Google Ads76%
Meta Ads58%
TikTok32%
LinkedIn45%
Token Reference
Complete token list with role and restriction.
| Preview | Token | Value | Use for | Never use for |
|---|---|---|---|---|
--color-background-primary | #F4F4F5 | App background | Card backgrounds | |
--color-background-secondary | #FFFFFF | Cards, panels, modals | Page background | |
--color-background-panel | #ECECEE | Table headers, code blocks | Primary backgrounds | |
--color-text-primary | #141418 | Headings, body text | Backgrounds, borders | |
--color-text-secondary | #8F96A3 | Labels, captions | Primary headings, links | |
--color-border-soft | #D8D8DC | Card borders, dividers | Text, backgrounds | |
--color-accent-lime | #B8E62E | CTA, progress, Google Ads | Body text, large backgrounds [CONTRASTE_A_VALIDAR] | |
--color-accent-blue | #5667EA | Primary action, metrics, Meta | Error states, success states | |
--color-accent-purple | #8F4BE8 | Creatives, secondary charts | Primary CTA, error states | |
--color-accent-cyan | #38A9D4 | Links, badges, info | Primary CTA, error/success | |
--color-support-lavender | #E9D9F9 | Purple badge backgrounds | Primary UI backgrounds | |
--color-support-ice-blue | #D9EEF7 | Info badge backgrounds | Primary UI backgrounds | |
--color-support-track | #D9D9DD | Progress tracks, dividers | Text, interactive elements | |
--color-feedback-success | #2E7D32 | Success messages, positive | Decorative, CTA | |
--color-feedback-warning | #F9A825 | Warnings, caution | Body text [CONTRASTE_A_VALIDAR] | |
--color-feedback-error | #C62828 | Errors, destructive | Decorative, progress | |
--color-feedback-info | #38A9D4 | Informational messages | Errors, warnings |
Accessibility Notes
Contrast validation status for key combinations.
[CONTRASTE_A_VALIDAR] Lima (#B8E62E) on white (#FFFFFF) has a contrast ratio of approximately 1.85:1. Never use lime for text on white. Only use lime for large graphic elements, progress bars, or with dark text (#2E4006) on top.
[CONTRASTE_A_VALIDAR] Warning (#F9A825) on white has low contrast (~2.1:1). Use only on warning-bg (#FFF8E1) with dark text (#7B6813), never on white backgrounds.
| Combination | Ratio | Status |
|---|---|---|
| #141418 on #FFFFFF | ~18.5:1 | AAA |
| #141418 on #F4F4F5 | ~16.8:1 | AAA |
| #8F96A3 on #FFFFFF | ~3.8:1 | AA Large only |
| #5667EA on #FFFFFF | ~4.6:1 | AA |
| #FFFFFF on #5667EA | ~4.6:1 | AA |
| #8F4BE8 on #FFFFFF | ~4.1:1 | AA Large only |
| #2E4006 on #B8E62E | ~7.2:1 | AAA |
| #B8E62E on #FFFFFF | ~1.85:1 | FAIL |
| #2E7D32 on #E8F5E9 | ~4.8:1 | AA |
| #C62828 on #FFEBEE | ~5.5:1 | AA |
| #7B6813 on #FFF8E1 | ~5.0:1 | AA |
AI Agent Color Rules
Non-negotiable rules for any AI agent generating UI with this palette.
Only documented tokensNever use hardcoded colors outside this palette.
Never use #B8E62E for textLima has no contrast on white. Only for fills, progress bars, or with #2E4006 text on top.
Never use purple as primary CTA#8F4BE8 is for creatives and secondary data. Primary CTA = blue or lime.
#5667EA for metrics/actionsBlue is the primary interactive color for buttons, links, and data highlights.
#38A9D4 for info/badgesCyan is for informational chips, links, and non-critical badges.
#F4F4F5 background, #FFFFFF cardsPage bg is warm gray. Cards are white. Never reverse this.
#141418 for primary textNear-black. Never use pure #000000. #8F96A3 only for secondary text.
Always validate contrastWhen text sits on accent colors, check ratio. Mark issues as [CONTRASTE_A_VALIDAR].
States coverage requiredEvery screen must include loading, error, empty, and success states.
Feedback never color-onlyAlways pair color with icon + text. Never rely on color alone for meaning.
Chart color sequenceUse chart-1 (blue) first, then chart-2 (lime), chart-3 (purple), chart-4 (cyan).
Mark unknownsIf a new color is needed, output validation_needed: true. Never invent without justification.
Machine-Readable Rules
// AI Color Rules — machine-readable
{
"ai_color_rules": {
"allowed_tokens_only": true,
"forbidden": [
"hardcoded colors outside palette",
"#B8E62E as text color",
"#8F4BE8 as primary CTA",
"#F9A825 as text on white",
"pure #000000 for text",
"low contrast text over accent colors"
],
"required_checks": [
"WCAG AA contrast on all text",
"state coverage (loading/error/empty/success)",
"semantic token usage (not hardcoded)",
"feedback icon + text (never color alone)",
"chart color sequence (blue first)"
],
"mandatory_output": {
"screen_name": "",
"components_used": [],
"tokens_used": [],
"patterns_used": [],
"states_covered": [],
"accessibility_notes": [],
"validation_needed": []
}
}
}
CSS Tokens (Copy-Ready)
Complete CSS custom properties for implementation.
/* ═══ Corrected Color Tokens ═══ */
:root {
/* Base */
--color-background-primary: #F4F4F5;
--color-background-secondary: #FFFFFF;
--color-background-panel: #ECECEE;
/* Text */
--color-text-primary: #141418;
--color-text-secondary: #8F96A3;
--color-text-inverse: #FFFFFF;
--color-text-disabled: #C0C4CC;
/* Border */
--color-border-soft: #D8D8DC;
--color-border-neutral: #D9D9DD;
--color-border-focus: #5667EA;
--color-border-error: #C62828;
/* Accents */
--color-accent-lime: #B8E62E;
--color-accent-lime-hover: #A5D026;
--color-accent-lime-text: #2E4006;
--color-accent-blue: #5667EA;
--color-accent-blue-hover: #4555D4;
--color-accent-blue-light: #EEF0FD;
--color-accent-purple: #8F4BE8;
--color-accent-purple-hover: #7E3DD4;
--color-accent-purple-light: #F3ECFC;
--color-accent-cyan: #38A9D4;
--color-accent-cyan-hover: #2E96BE;
--color-accent-cyan-light: #E8F5FA;
/* Support */
--color-support-lavender: #E9D9F9;
--color-support-ice-blue: #D9EEF7;
--color-support-panel: #ECECEE;
--color-support-track: #D9D9DD;
--color-support-lime-bg: #F0FAD4;
/* Feedback */
--color-feedback-success: #2E7D32;
--color-feedback-success-bg: #E8F5E9;
--color-feedback-warning: #F9A825;
--color-feedback-warning-bg: #FFF8E1;
--color-feedback-error: #C62828;
--color-feedback-error-bg: #FFEBEE;
--color-feedback-info: #38A9D4;
--color-feedback-info-bg: #E0F4FB;
/* Chart */
--color-chart-1: #5667EA; /* Meta Ads */
--color-chart-2: #B8E62E; /* Google Ads */
--color-chart-3: #8F4BE8; /* TikTok */
--color-chart-4: #38A9D4; /* LinkedIn/Other */
--color-chart-5: #F9A825; /* Extended */
--color-chart-6: #E8457A; /* Extended */
--color-chart-track: #D9D9DD;
}
Design System — Corrected Color Palette — v2.0 Preview — 2026-05-14
35 color tokens | 4 accent colors | 6 chart colors | 4 feedback colors | WCAG AA target
Replaces: Wise V2 green-only palette (Forest Green #163300 / Bright Green #9FE870)