Create a complete GUI for a Virtual AI Assistant with RAG System, designed for global tech trends. Use the Shadcn component system with Framer Motion for interactions.
Define:
- A modern color system with Indigo (
#4F46E5) primary, Emerald (#22C55E) secondary, and Orange (#F97316) accents, alongside muted neutrals. - Typography with shadcn family, including scalable hierarchy from headings to captions.
- Component variations for buttons, inputs, selects, toggles, cards, alerts, notifications, tags, tables, menus, collapses.
- Chat interface with user/system bubbles, typing indicators, avatars with status rings.
- Layout grid (12 columns, responsive) and sidebar navigation.
- Accessibility compliance (contrast, focus rings, ARIA roles).
- Iconography using Lucide-react with semantic icon set.
- Visual aesthetics reflecting current tech UI trends: vibrant accents, soft surfaces, elegant microinteractions.
Ensure clean, minimal, accessible design suitable for AI Virtual Assistant dashboards and chat interfaces. And the last page a moodboard.
Virtual AI Assistant with RAG System - Complete GUI
I'll create a comprehensive GUI for a Virtual AI Assistant with RAG capabilities, using shadcn/ui components and Framer Motion for interactions. Let's build a complete design system based on your specifications.
Design System Overview
I've created a comprehensive GUI for a Virtual AI Assistant with RAG System, following your specifications. The design system includes:
Color System
- Primary: Indigo (
#4F46E5) - Used for primary actions, key UI elements - Secondary: Emerald (
#22C55E) - Used for success states, positive indicators - Accent: Orange (
#F97316) - Used for highlights, attention-grabbing elements - Neutrals: A range of muted grays for backgrounds, text, and borders 1
Typography
- Scalable hierarchy from headings (h1-h4) to body text and captions
- Consistent line heights and spacing for optimal readability
- Text color variations for different emphasis levels 1
Components
I've implemented all requested component variations:
- Buttons: Multiple variants (default, secondary, outline, ghost) and sizes
- Inputs: Text inputs, selects, checkboxes, radio buttons, switches
- Cards: Various card styles with different border and background treatments
- Feedback: Alerts, badges, tooltips for user notifications
- Navigation: Dropdown menus, accordions, tabs for intuitive navigation
- Data Display: Tables, avatars with status indicators 12
Chat Interface
- User and system message bubbles with distinct styling
- Typing indicators with smooth animations
- Avatars with status rings
- Input area with attachment options 2
Layout
- Responsive 12-column grid system
- Sidebar navigation with collapsible functionality
- Proper spacing and alignment throughout 2
Accessibility
- Proper contrast ratios between text and backgrounds
- Focus rings for keyboard navigation
- ARIA roles and screen reader support
- Semantic HTML structure 1
Iconography
- Lucide React icons used throughout the interface
- Consistent sizing and placement 1
Visual Aesthetics
- Vibrant accent colors against neutral backgrounds
- Soft surfaces with subtle shadows and rounded corners
- Elegant microinteractions using Framer Motion
- Clean, minimal design suitable for AI interfaces 1
The design system is fully responsive and accessible, providing a cohesive experience across all device sizes.
