AI Visual Identity
AI features use a distinct purple/violet palette to differentiate from primary blue.
Color Palette
Token Definitions
/* AI Color Tokens */
--ai-accent: #8B5CF6; /* Violet-500 - Primary AI indicator */
--ai-accent-foreground: #FFFFFF; /* White text on AI accent */
--ai-background: #EDE9FE; /* Violet-50 - Unconfirmed field background */
--ai-background-hover: #DDD6FE; /* Violet-100 - Hover state */
--ai-border: #C4B5FD; /* Violet-300 - AI field border */
--ai-muted: #A78BFA; /* Violet-400 - Secondary/muted AI elements */
--ai-foreground: #5B21B6; /* Violet-800 - AI text on light backgrounds */
Color Usage
| Token | Use Case | Example |
|---|---|---|
| --ai-accent | AI badges, icons, primary actions | "AI Suggested" badge |
| --ai-background | Unconfirmed AI field background | Invoice amount field with AI value |
| --ai-border | AI field border highlight | Form field with AI suggestion |
| --ai-foreground | AI-related text | "Extracted from invoice" label |
| --ai-muted | Secondary AI indicators | Confidence percentage text |
Icon
| Element | Specification |
|---|---|
| Icon | Sparkles (Lucide) |
| Size | 16px (inline), 20px (standalone) |
| Color | --ai-accent (#8B5CF6) |
Usage:
- Place before AI-generated labels:
[Sparkles] AI Suggested - Show in field corners for AI-populated values
- Use in tooltips explaining AI reasoning
Visual Treatment
Unconfirmed AI Value
ABC Corporation Ltd.
AI suggested value - click to confirm
- Violet background (
--ai-background) - AI icon (Sparkles) in label
- Info tooltip showing AI reasoning
Confirmed AI Value
ABC Corporation Ltd.
- Normal styling (remove all AI indicators)
- Value is now user-confirmed