{"slug":"business/FIGMA_UI_DECISIONS","title":"Figma UI Component Decisions","section":"business","sectionLabel":"Business","status":"unclassified","type":"document","path":"business/FIGMA_UI_DECISIONS.mdx","bytes":24655,"description":null,"updated":null,"source":"integratewise/Integratewise-docs-wiki","content":"\n## Based on AGENTS.md Architecture\n\n---\n\n## 1. L0: Onboarding Flow (4 Screens)\n\n### Screen 1: Welcome + AI Insights\n\n```\nLayout: Centered card, full-bleed background gradient\n\n┌────────────────────────────────────────────┐\n│  [Logo: IntegrateWise]                     │\n│                                            │\n│  \"Let's understand how you work\"           │\n│                                            │\n│  ┌────────────────────────────────────┐   │\n│  │ Name: [________________]          │   │\n│  │ Date of Birth: [__/__/____]       │   │\n│  │                                    │   │\n│  │ [Analyze My Style] →              │   │\n│  └────────────────────────────────────┘   │\n│                                            │\n│  [AI Insight Card - appears after input]   │\n│  ┌────────────────────────────────────┐   │\n│  │ 🤖 Based on your info:             │   │\n│  │ • You're a visual thinker          │   │\n│  • You prefer structured workflows   │\n│  │ • Peak productivity: mornings      │   │\n│  │                                    │   │\n│  │ [Continue]                         │   │\n│  └────────────────────────────────────┘   │\n└────────────────────────────────────────────┘\n\nColors: Gradient background (slate-900 → slate-800)\nCard: White, rounded-2xl, shadow-2xl\nAnimation: Card slides up, AI insights fade in\n```\n\n### Screen 2: AI Loader Demo\n\n```\nLayout: Split screen\n\n┌────────────────────┬────────────────────┐\n│   INPUT SIDE       │   OUTPUT SIDE      │\n│                    │                    │\n│  \"Type anything    │  [Live preview     │\n│   in natural       │   of AI processing]│\n│   language...\"     │                    │\n│                    │  ┌──────────────┐  │\n│  [________________]│  │ 📧 Email     │  │\n│  [________________]│  │ 📊 Report    │  │\n│  [________________]│  │ 📝 Task      │  │\n│                    │  │ 📅 Calendar  │  │\n│  [Watch Demo] →    │  └──────────────┘  │\n│                    │                    │\n│  Examples:         │  \"AI transformed   │\n│  • \"Email team     │   your input into  │\n│    about delay\"    │   structured       │\n│  • \"Schedule       │   actions across   │\n│    review\"         │   4 tools\"         │\n│                    │                    │\n│                    │  [Continue]        │\n└────────────────────┴────────────────────┘\n\nAnimation: Typing effect on input, real-time processing visualization\nColors: Left (white), Right (slate-50 with tool icons)\n```\n\n### Screen 3: Context Selection\n\n```\nLayout: Two large cards side by side\n\n┌────────────────────────────────────────────┐\n│                                            │\n│      \"Choose your workspace context\"       │\n│                                            │\n│  ┌────────────────┐  ┌────────────────┐   │\n│  │                │  │                │   │\n│  │  🎯            │  │  🤝            │   │\n│  │                │  │                │   │\n│  │  PRODUCTIVITY  │  │  CS PLATFORM   │   │\n│  │     HUB        │  │                │   │\n│  │                │  │  For Customer  │   │\n│  │  For ICs, PMs, │  │  Success teams │   │\n│  │  Team Leads    │  │                │   │\n│  │                │  │  Focus:        │   │\n│  │  Focus:        │  │  • Account     │   │\n│  │  • Tasks       │  │    health      │   │\n│  │  • Projects    │  │  • Renewal     │   │\n│  │  • Calendar    │  │    risk        │   │\n│  │  • Docs        │  │  • Expansion   │   │\n│  │                │  │    ops         │   │\n│  │  [Select]      │  │  [Select]      │   │\n│  └────────────────┘  └────────────────┘   │\n│                                            │\n│  \"You can switch anytime from Settings\"    │\n│                                            │\n└────────────────────────────────────────────┘\n\nCard hover: Scale 1.02, shadow increase\nSelected: Blue border, checkmark icon\n```\n\n### Screen 4: Tool Connection + Hydration\n\n```\nLayout: Stepper with progress\n\n┌────────────────────────────────────────────┐\n│  [Back]                    Progress: 75%   │\n│                                            │\n│  \"Connect your tools\"                      │\n│  \"IntegrateWise works with what you use\"   │\n│                                            │\n│  POPULAR TOOLS:                            │\n│  ┌────────────────────────────────────┐   │\n│  │ [Salesforce] [HubSpot] [Slack]    │   │\n│  │ [Stripe] [Notion] [GitHub]        │   │\n│  │ [Gmail] [Calendar] [+ More]       │   │\n│  └────────────────────────────────────┘   │\n│                                            │\n│  OR UPLOAD DATA:                           │\n│  ┌────────────────────────────────────┐   │\n│  │                                    │   │\n│  │      📤 Drop files here           │   │\n│  │      or click to upload           │   │\n│  │                                    │   │\n│  │      CSV, JSON, PDF supported     │   │\n│  │                                    │   │\n│  └────────────────────────────────────┘   │\n│                                            │\n│  [Upload Progress - when active]           │\n│  ┌────────────────────────────────────┐   │\n│  │ Processing: data.csv               │   │\n│  │ [████████████░░░░░░░░] 60%        │   │\n│  │ 4,231 records normalized...        │   │\n│  └────────────────────────────────────┘   │\n│                                            │\n│                    [Complete Setup] →      │\n└────────────────────────────────────────────┘\n\nTool icons: Color brand logos\nUpload zone: Dashed border, hover: solid + blue tint\nProgress: Animated gradient bar\n```\n\n---\n\n## 2. L1: Navigation Structure\n\n### Sidebar Redesign (Collapsible)\n\n```\nExpanded State (240px width):\n\n┌──────────────────────────────┐\n│ [Logo] IntegrateWise    [≡] │\n├──────────────────────────────┤\n│ HOME                         │\n│ ├─ 🏠 Dashboard              │\n├──────────────────────────────┤\n│ RELATIONSHIPS                │\n│ ├─ 🏢 Accounts               │\n│ ├─ 👥 Contacts               │ ← NEW\n├──────────────────────────────┤\n│ WORK                         │\n│ ├─ 📁 Projects               │ ← NEW\n│ ├─ 📊 Pipeline               │ ← NEW\n│ ├─ ✅ Tasks                  │\n│ ├─ 📅 Calendar               │\n│ ├─ 🎥 Meetings               │ ← NEW\n├──────────────────────────────┤\n│ KNOWLEDGE                    │\n│ ├─ 📄 Docs                   │ ← NEW\n│ ├─ 📝 Notes                  │ ← NEW\n│ ├─ 🧠 Knowledge Space        │ ← NEW\n├──────────────────────────────┤\n│ TEAM                         │\n│ ├─ 👤 Team                   │ ← NEW\n│ ├─ 📈 Analytics              │ ← NEW\n├──────────────────────────────┤\n│ INTELLIGENCE                 │\n│ ├─ 🎯 Risks                  │ ← NEW\n│ ├─ 🚀 Expansion              │ ← NEW\n│ ├─ 💡 Insights               │\n├──────────────────────────────┤\n│ ⚙️ Settings                  │\n└──────────────────────────────┘\n\nCollapsed State (64px width):\n- Icons only\n- Tooltip on hover\n```\n\n---\n\n## 3. L2: Cognitive Components\n\n### L2SignalBar (Enhanced)\n\n```\nCurrent: Bottom bar with rotating signals\n\nEnhanced:\n┌──────────────────────────────────────────────────────────┐\n│ 🧠 L2: Cognitive Layer                            [^]   │\n├──────────────────────────────────────────────────────────┤\n│ [Signal 1] [Signal 2] [Signal 3] [+3 more]               │\n├──────────────────────────────────────────────────────────┤\n│ 🔴 CRITICAL: Carter Group — $61K overdue                │\n│    \"Usually pays Day 3, now Day 7. 3rd delay.\"           │\n│    [Why?] [Send Reminder] [Dismiss]                     │\n│                                                          │\n│ 📋 Evidence:                                            │\n│    • Invoice sent: Jan 15                              │\n│    • Slack: \"Will pay tomorrow\" (3x)                  │\n│    • Historical: Always pays by Day 3                 │\n└──────────────────────────────────────────────────────────┘\n\nNew: \"Why?\" button opens EvidencePanel\n     Evidence trail shows data sources\n```\n\n### EvidencePanel (New Component)\n\n```\nSide Drawer (400px width):\n\n┌──────────────────────────────────┐\n│ Evidence                    [×] │\n├──────────────────────────────────┤\n│                                  │\n│ 📊 Signal: Revenue Alert        │\n│ Confidence: 94%                 │\n│                                  │\n│ 📋 Data Sources:                │\n│ ┌────────────────────────────┐  │\n│ │ QuickBooks                 │  │\n│ │ • Invoice #2024-0891      │  │\n│ │ • Amount: $61,000         │  │\n│ │ • Due: Jan 15             │  │\n│ └────────────────────────────┘  │\n│ ┌────────────────────────────┐  │\n│ │ Slack                      │  │\n│ │ \"Will send tomorrow\"      │  │\n│ │ Sender: finance@carter... │  │\n│ │ Date: Jan 16, 18, 20     │  │\n│ └────────────────────────────┘  │\n│ ┌────────────────────────────┐  │\n│ │ Historical Pattern         │  │\n│ │ • Avg payment time: 3 days│  │\n│ │ • Previous delays: 0      │  │\n│ │ • Risk score: HIGH        │  │\n│ └────────────────────────────┘  │\n│                                  │\n│ 🧠 AI Reasoning:                │\n│ \"Deviation from historical     │\n│  pattern + repeated promises   │\n│  without action = escalation   │\n│  recommended\"                  │\n│                                  │\n└──────────────────────────────────┘\n```\n\n### SpineUI (New Component)\n\n```\nFull-width data browser:\n\n┌─────────────────────────────────────────────────────────────────────┐\n│ Spine: Canonical Data Browser                         [View: Table] │\n├─────────────────────────────────────────────────────────────────────┤\n│                                                                     │\n│ Filters: [Type: All ▼] [Status: All ▼] [Health: All ▼] [Search...] │\n│                                                                     │\n│ ┌─────────────────────────────────────────────────────────────────┐│\n│ │ Entity          │ Type    │ Health │ Status    │ Updated       ││\n│ ├─────────────────────────────────────────────────────────────────┤│\n│ │ Acme Corp       │ Account │ 92%    │ Active    │ 2 min ago     ││\n│ │ Bright Co       │ Account │ 67%    │ At Risk   │ 1 hour ago    ││\n│ │ Carter Group    │ Account │ 45%    │ Critical  │ 5 min ago     ││\n│ │ Deal #4421      │ Deal    │ 78%    │ Proposal  │ 3 hours ago   ││\n│ │ Task: Review    │ Task    │ 100%   │ Complete  │ 1 day ago     ││\n│ └─────────────────────────────────────────────────────────────────┘│\n│                                                                     │\n│ [◀ Previous] Page 1 of 12 [Next ▶]            Showing 1-5 of 1,247 │\n│                                                                     │\n│ Actions: [Export] [Bulk Edit] [Archive]                            │\n└─────────────────────────────────────────────────────────────────────┘\n\nClick row → Open entity 360° view\n```\n\n### KnowledgeUI (New Component)\n\n```\nKnowledge Graph Visualization:\n\n┌─────────────────────────────────────────────────────────────────────┐\n│ Knowledge Graph                                             [3D ▼] │\n├─────────────────────────────────────────────────────────────────────┤\n│                                                                     │\n│    ┌─────────┐         ┌─────────┐         ┌─────────┐             │\n│    │ Acme    │◄───────►│ Q4 Deal │◄───────►│ Sarah   │             │\n│    │ Corp    │         │ $250K   │         │ (VP)    │             │\n│    └────┬────┘         └────┬────┘         └─────────┘             │\n│         │                   │                                       │\n│         ▼                   ▼                                       │\n│    ┌─────────┐         ┌─────────┐                                 │\n│    │ Contract│         │ Meeting │                                 │\n│    │ (PDF)   │         │ Notes   │                                 │\n│    └─────────┘         └─────────┘                                 │\n│                                                                     │\n│ Legend: [● Entity] [● Document] [● Person] [● Insight]             │\n│ Filters: [All] [Accounts] [Deals] [Docs] [People]                   │\n│                                                                     │\n│ Selected: Q4 Deal $250K                                            │\n│ ┌─────────────────────────────────────────────────────────────┐    │\n│ │ Related: 5 entities | 3 documents | 2 people                 │    │\n│ │ Confidence: 87%                                             │    │\n│ └─────────────────────────────────────────────────────────────┘    │\n└─────────────────────────────────────────────────────────────────────┘\n\nInteractive: Drag nodes, zoom, click for details\n```\n\n### DigitalTwin (New Component)\n\n```\nFull-screen simulation:\n\n┌─────────────────────────────────────────────────────────────────────┐\n│ 🧪 Digital Twin: Safe Simulation Environment              [Exit ▶] │\n├─────────────────────────────────────────────────────────────────────┤\n│                                                                     │\n│ ┌─────────────────────────────────────────────────────────────────┐│\n│ │ SIMULATION SCENARIO                                             ││\n│ │                                                                 ││\n│ │ \"What if we increase outreach to at-risk accounts?\"            ││\n│ │                                                                 ││\n│ │ Variables:                                                      ││\n│ │ • Outreach frequency: [Weekly ▼]                               ││\n│ │ • Account tier: [Enterprise ▼]                                 ││\n│ │ • Message type: [Personalized ▼]                               ││\n│ │                                                                 ││\n│ │ [Run Simulation]                                               ││\n│ └─────────────────────────────────────────────────────────────────┘│\n│                                                                     │\n│ RESULTS (simulated):                                               │\n│ ┌─────────────────────────────────────────────────────────────────┐│\n│ │ Projected Impact (90 days):                                     ││\n│ │ • Churn reduction: 15% → 8%                                    ││\n│ │ • Revenue saved: $450K                                         ││\n│ │ • Team workload: +12 hours/week                                ││\n│ │ • Confidence: 78%                                              ││\n│ │                                                                 ││\n│ │ [Apply to Production] [Save Scenario] [Run Another]            ││\n│ └─────────────────────────────────────────────────────────────────┘│\n│                                                                     │\n│ ⚠️  This is a simulation. No real changes made.                  │\n└─────────────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## 4. Component Specifications\n\n### Color Palette (Architecture-Aligned)\n\n```\nPrimary:     slate-900 (L3 - Backend/Trust)\nSecondary:   slate-700 (L2 - Intelligence)\nAccent:      blue-600  (L1 - Action)\nSuccess:     green-500 (Positive signals)\nWarning:     amber-500 (Attention needed)\nCritical:    red-500   (Urgent signals)\nInfo:        blue-400  (Information)\nBackground:  slate-50  (Canvas)\nSurface:     white     (Cards)\n```\n\n### Typography Scale\n\n```\nHero:        48px/1.1 (Onboarding headlines)\nH1:          32px/1.2 (Page titles)\nH2:          24px/1.3 (Section headers)\nH3:          18px/1.4 (Card titles)\nBody:        14px/1.5 (Content)\nCaption:     12px/1.5 (Metadata)\nSignal:      13px/1.4 (L2 cognitive text)\n```\n\n### Spacing System\n\n```\nxs:  4px   (Tight padding)\nsm:  8px   (Component internal)\nmd:  16px  (Component spacing)\nlg:  24px  (Section spacing)\nxl:  32px  (Page sections)\n2xl: 48px  (Major sections)\n3xl: 64px  (Page breaks)\n```\n\n### Animation Standards\n\n```\nMicro-interactions: 150ms ease-out\nPanel transitions:  300ms ease-in-out\nPage transitions:   400ms cubic-bezier(0.4, 0, 0.2, 1)\nSignal cycling:     5000ms per signal\nLoading states:     800ms pulse animation\n```\n\n---\n\n## 5. Responsive Breakpoints\n\n```\nMobile:    < 640px   (Sidebar hidden, stack layout)\nTablet:    640-1024px (Collapsible sidebar)\nDesktop:   > 1024px   (Full sidebar, 2-3 column layouts)\nWide:      > 1440px   (Maximized workspace, side panels)\n```\n\n---\n\n## Summary: What to Build in Figma\n\n### Priority 1: Onboarding (L0)\n\n1. Welcome screen with AI insights\n2. Demo screen with live preview\n3. Context selection cards\n4. Tool connection wizard\n\n### Priority 2: Navigation (L1)\n\n1. Full sidebar with 15 modules\n2. Collapsed sidebar state\n3. Mobile navigation drawer\n\n### Priority 3: L2 Components\n\n1. Enhanced SignalBar with evidence\n2. EvidencePanel side drawer\n3. SpineUI data browser\n4. KnowledgeUI graph\n5. DigitalTwin simulation\n\n### Priority 4: Page Templates\n\n1. Home dashboard (12 domain toggles)\n2. Entity list pages (Accounts, Contacts, etc.)\n3. Detail pages (360° view)\n4. Settings with tabs\n\n---\n\n**All designs must align with AGENTS.md L0-L3 architecture.**\n"}