Automation Advisor Design System

Automation Advisor Design System

Design Philosophy

Core Principles:

• Clarity over cleverness: Information should be immediately comprehensible
• Guided autonomy: Users feel supported but in control
• Progressive disclosure: Show complexity only when needed
• Professional warmth: Authoritative without being cold

Target Audience: Knowledge workers evaluating automation opportunities Primary Use Case: Decision-making tool, not entertainment

Color System

Primary Palette

--primary-blue: #3B82F6;      /* Primary actions, links */
--primary-blue-dark: #2563EB; /* Hover states */
--primary-purple: #8B5CF6;    /* Secondary actions, accents */
--primary-purple-dark: #7C3AED;

--success-green: #10B981;
--warning-amber: #F59E0B;
--error-red: #EF4444;

Neutral Palette

--gray-50: #F9FAFB;
--gray-100: #F3F4F6;
--gray-200: #E5E7EB;
--gray-300: #D1D5DB;
--gray-400: #9CA3AF;
--gray-500: #6B7280;
--gray-600: #4B5563;
--gray-700: #374151;
--gray-800: #1F2937;
--gray-900: #111827;

Semantic Colors

--bg-primary: #0F172A;        /* Main background */
--bg-secondary: #1E293B;      /* Card backgrounds */
--bg-tertiary: #334155;       /* Elevated elements */

--text-primary: #F1F5F9;      /* Main text */
--text-secondary: #CBD5E1;    /* Secondary text */
--text-tertiary: #94A3B8;     /* Muted text */

--border-primary: #334155;    /* Default borders */
--border-accent: #3B82F6;     /* Focus/active borders */

Typography

Font Stack

--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;

Type Scale

--text-xs: 0.75rem;    /* 12px - labels, hints */
--text-sm: 0.875rem;   /* 14px - body, buttons */
--text-base: 1rem;     /* 16px - body */
--text-lg: 1.125rem;   /* 18px - emphasized text */
--text-xl: 1.25rem;    /* 20px - section titles */
--text-2xl: 1.5rem;    /* 24px - card titles */
--text-3xl: 1.875rem;  /* 30px - page titles */
--text-4xl: 2.25rem;   /* 36px - hero text */

Font Weights

--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;

Line Heights

--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;

Spacing System

Scale (based on 4px grid)

--space-1: 0.25rem;   /* 4px */
--space-2: 0.5rem;    /* 8px */
--space-3: 0.75rem;   /* 12px */
--space-4: 1rem;      /* 16px */
--space-5: 1.25rem;   /* 20px */
--space-6: 1.5rem;    /* 24px */
--space-8: 2rem;      /* 32px */
--space-10: 2.5rem;   /* 40px */
--space-12: 3rem;     /* 48px */
--space-16: 4rem;     /* 64px */

Border Radius

--radius-sm: 0.375rem;  /* 6px - small elements */
--radius-md: 0.5rem;    /* 8px - buttons, inputs */
--radius-lg: 0.75rem;   /* 12px - cards */
--radius-xl: 1rem;      /* 16px - large cards */
--radius-full: 9999px;  /* Pills, badges */

Shadows

--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);

Component Patterns

Buttons

Primary Button:

background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
color: white;
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-md);
font-weight: var(--font-semibold);
transition: all 150ms ease;

Secondary Button:

background: var(--bg-tertiary);
color: var(--text-primary);
border: 1px solid var(--border-primary);

Ghost Button:

background: transparent;
color: var(--primary-blue);
border: 1px solid var(--primary-blue);

Cards

Default Card:

background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-md);

Elevated Card:

background: var(--bg-tertiary);
border: 1px solid var(--border-accent);
box-shadow: var(--shadow-lg);

Inputs

Text Input/Textarea:

background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
color: var(--text-primary);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
font-size: var(--text-sm);
transition: all 150ms ease;

/* Focus state */
border-color: var(--primary-blue);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

Progress Indicators

Progress Bar:

height: 4px;
background: var(--bg-tertiary);
border-radius: var(--radius-full);

/* Fill */
background: linear-gradient(90deg, var(--primary-blue), var(--primary-purple));
transition: width 300ms ease;

Animation & Transitions

Timing Functions

--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

Durations

--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;

Common Transitions

transition: all var(--duration-fast) var(--ease-out);

Layout Patterns

Container Max-Width

--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;

Split Layout (Question + Conversation)

• Question panel: 40% width
• Conversation panel: 60% width
• Gap: var(--space-6)

Accessibility Standards

Focus Visible

outline: 2px solid var(--primary-blue);
outline-offset: 2px;

Minimum Contrast Ratios

• Text on background: 4.5:1 (AA)
• Large text: 3:1 (AA)
• Interactive elements: 3:1 (AA)

Touch Targets

• Minimum: 44x44px
• Preferred: 48x48px

Responsive Breakpoints

--breakpoint-sm: 640px;   /* Mobile landscape */
--breakpoint-md: 768px;   /* Tablet */
--breakpoint-lg: 1024px;  /* Desktop */
--breakpoint-xl: 1280px;  /* Large desktop */

Icon System

Emoji-based (no icon library dependency):

• 🤖 Robot - AI/automation
• 📊 Chart - analysis/data
• ⚡ Lightning - speed/efficiency
• ⚠️ Warning - alerts
• ✅ Checkmark - success
• ❌ X - error/close
• 🎤 Microphone - voice
• 💬 Speech - conversation

Motion Patterns

Fade In

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
animation: fadeIn 300ms ease-out;

Pulse (for recording)

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

Skeleton Loading

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
background: linear-gradient(90deg,
  var(--bg-secondary) 25%,
  var(--bg-tertiary) 50%,
  var(--bg-secondary) 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;

Error States

Error Message Pattern

<div class="error-banner">
  <div class="error-icon">⚠️</div>
  <div class="error-content">
    <div class="error-title">Error</div>
    <div class="error-message">Descriptive message</div>
  </div>
  <button class="error-retry">Retry</button>
</div>

Styles

.error-banner {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--error-red);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

Loading States

Loading Indicator (dots)

<span class="loading-dots">
  <span>●</span><span>●</span><span>●</span>
</span>

.loading-dots span {
  animation: pulse 1.4s infinite;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

Best Practices

Do's

✅ Use design tokens, never hard-coded values ✅ Maintain consistent spacing (4px grid) ✅ Apply hover/focus states to all interactive elements ✅ Test at 200% zoom ✅ Ensure 4.5:1 contrast for text ✅ Add loading states for async operations ✅ Provide clear error messages with recovery actions

Don'ts

❌ Create one-off color values ❌ Mix spacing systems ❌ Skip accessibility attributes ❌ Use generic error messages ("Error occurred") ❌ Forget reduced motion preferences ❌ Hard-code dimensions that should be responsive ❌ Leave interactive elements without focus states