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

TokenUse CaseExample
--ai-accentAI badges, icons, primary actions"AI Suggested" badge
--ai-backgroundUnconfirmed AI field backgroundInvoice amount field with AI value
--ai-borderAI field border highlightForm field with AI suggestion
--ai-foregroundAI-related text"Extracted from invoice" label
--ai-mutedSecondary AI indicatorsConfidence percentage text

Icon

ElementSpecification
IconSparkles (Lucide)
Size16px (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