{"slug":"developers/FIGMA_DESIGN_CONTEXT","title":"IntegrateWise — Figma Design Context","section":"developers","sectionLabel":"Developers","status":"unclassified","type":"document","path":"developers/FIGMA_DESIGN_CONTEXT.mdx","bytes":17684,"description":null,"updated":null,"source":"integratewise/Integratewise-docs-wiki","content":"\n> Everything a designer needs to build the IntegrateWise website and product screens.\n> This document is the single source of truth for Figma work.\n\n---\n\n## PART 1: WHAT IS INTEGRATEWISE\n\n### One-liner\n\nA Knowledge Workspace over the Spine, powered by AI.\n\n### What that means in plain English\n\nIntegrateWise connects all the tools a business uses (Salesforce, Zendesk, Stripe, Slack, etc.) into one workspace. It normalizes the data into a single source of truth called the Spine, then uses AI to surface insights — but the AI always shows its evidence and never acts without human approval.\n\n### Who it's for\n\n**Account Success (universal — MuleSoft is a focus vertical):**\n\n- MuleSoft partners and integration account managers (deep domain expertise)\n- Anyone managing accounts, clients, customers, patients, students, tenants\n- CSMs at SaaS companies, CAs managing client portfolios, hotel managers, freelancers\n- Managers who need portfolio visibility across all accounts\n- Executives who need retention forecasting and revenue-at-risk visibility\n\n**Business Ops (universal — any business):**\n\n- Founders who open 12 tabs every morning to understand their business\n- COOs who need cross-functional operational visibility\n- CIOs/CTOs who need integration health and data quality metrics\n- Agency owners, freelancers, retail business owners — anyone running a business\n\n### The core philosophy\n\n\"AI that thinks in context, waits for approvals.\"\n\n- Every insight has evidence\n- Every action requires human approval\n- Every data point traces back to its source\n\n---\n\n## PART 2: BRAND IDENTITY\n\n### Tagline\n\n\"A Knowledge Workspace over the Spine, powered by AI.\"\n\n### Voice\n\n- Confident but not arrogant\n- Technical but accessible\n- Founder-led, not corporate\n- Shows, doesn't tell\n- Numbers over adjectives\n\n### Color System\n\n**Primary palette (from existing codebase):**\n\n- Deep Navy: `#0C1222` (backgrounds, dark mode base)\n- Indigo: `#4154A3` / `#4256AB` (primary actions, links, active states)\n- Slate Blue: `#3F5185` (secondary actions, selected states)\n- Dark Gradient: `linear-gradient(135deg, #1B2544, #2F3D5E)` (auth screens)\n\n**Semantic colors:**\n\n- Emerald/Green: `#10B981` / `#22C55E` (healthy, success, positive)\n- Orange: `#F59E0B` / `#FB923C` (at-risk, warning, medium severity)\n- Red: `#EF4444` / `#DC2626` (critical, error, high severity)\n- Purple: `#8B5CF6` / `#A855F7` (AI signals, Twin insights, cognitive layer)\n- Blue: `#3B82F6` (info, links, neutral actions)\n\n**Health score colors:**\n\n- ≥ 70: Green (`#22C55E`)\n- 40-69: Orange (`#FB923C`)\n- < 40: Red (`#EF4444`)\n\n**Severity colors:**\n\n- Critical: Red background `#FEE2E2`, text `#991B1B`\n- High: Orange background `#FFF7ED`, text `#9A3412`\n- Medium: Yellow background `#FEFCE8`, text `#854D0E`\n- Low: Blue background `#EFF6FF`, text `#1E40AF`\n- Info: Gray background `#F3F4F6`, text `#374151`\n\n### Typography\n\n- Primary: Inter (system font stack fallback)\n- Monospace: JetBrains Mono or system monospace (for code, IDs, technical data)\n- Headings: Inter Semibold/Bold\n- Body: Inter Regular\n- Small/Labels: Inter Medium, 12px\n\n### Spacing & Layout\n\n- Border radius: `8px` (cards), `12px` (panels), `9999px` (pills/badges)\n- Card padding: `16px` (compact), `20px` (standard), `24px` (spacious)\n- Grid: 12-column, max-width `1280px` for content areas\n- Sidebar: `256px` fixed width\n- Top bar: `56px` height\n\n---\n\n## PART 3: WEBSITE PAGES TO DESIGN\n\n### Page 1: Homepage (most important)\n\n**Layout: Single scroll, 7 sections**\n\n**Section 1 — Hero**\n\n- Headline: \"Your tools don't talk to each other. Your AI doesn't show its work. We fix both.\"\n- Subline: \"A Knowledge Workspace over the Spine, powered by AI.\"\n- Email input field with \"Start Free →\" button (inline, not separate page)\n- Below: \"No credit card. Connect your first tool in 2 minutes.\"\n- Below that: \"Watch a 90-second demo ↓\" (scrolls to Section 3)\n- Background: Dark (`#0C1222`) or white. No animation.\n- Nav: Logo (left). Pricing. Docs. [Start Free] button (right).\n\n**Section 2 — Pain Cards (3 columns)**\n\n- Card 1: \"I check 8 tools every morning to understand one account.\" — Every CSM, every CA, every account manager\n- Card 2: \"Our AI said Acme was healthy. They churned 30 days later.\" — VP of CS, agency owner, hotel chain manager\n- Card 3: \"By the time I spot a risk, the customer is already gone.\" — Founder, freelancer, retail business owner\n- Style: Quote marks, italic text, attribution below. Cards with subtle border.\n\n**Section 3 — Live Entity 360 Demo**\nThis is the conversion weapon. A styled HTML component showing a demo account.\n\nDesign an Entity 360 card for \"Acme Corporation\" with:\n\n```\nACME CORPORATION                              Health: 48 ▼\n\nTRUTH (Spine)                    SIGNALS (Twin)\nARR: $125,000                    ⚠ Usage dropped 42%\nRenewal: 45 days                 🔴 Renewal risk: high\nCSM: Sarah Chen                  ⚡ 3 support tickets\nLast activity: 18d ago\n\nCONTEXT (Flow B)                 MEMORY (Flow C)\n📧 QBR email (3d ago)            🧠 \"Prefers async\"\n📄 SOW renewal draft             🧠 \"Budget freeze Q2\"\n📅 Exec call (2w ago)            🧠 \"Champion = VP Ops\"\n\nTWIN INSIGHT\n┌─────────────────────────────────────────────────┐\n│ 🔴 Renewal at risk — 45 days, health 48        │\n│                                                 │\n│ What: Usage dropped 42%, 3 open tickets,        │\n│       no activity in 18 days.                   │\n│ Why: Combined signals = disengagement           │\n│      before renewal window.                     │\n│ Do: Schedule exec check-in within 48 hours.     │\n│ Risk: Late engagement = 3x churn probability.   │\n│                                                 │\n│ Evidence: Spine + Signals + Context             │\n│ Confidence: 91%                      [Act →]    │\n└─────────────────────────────────────────────────┘\n```\n\nBelow the demo: \"This is Entity 360. One API call. Six layers. Now imagine this for every account in your book.\"\nCTA: [Start Free — see your own accounts like this]\n\n**Section 4 — How It Works (3 steps)**\n\n```\n1. Connect          →    2. Resolve         →    3. Reason\n   70+ tools.                One record.             Evidence-backed\n   2 minutes.               Per customer.           AI insights.\n   OAuth.                   Automatic.              Governed.\n```\n\nMinimal. Three columns. Icon above each step (plug, merge, brain).\n\n**Section 5 — Numbers**\n\n```\n70+ connectors    150+ entity types    10 AI triggers    8-stage pipeline\n21 services      12 departments       6 Entity 360      Governed by\ndeployed         supported            layers            default\n```\n\nTwo rows, four columns each. Just numbers and labels. No decoration.\n\n**Section 6 — Pricing (inline)**\n\n```\nFree         Starter        Pro             Enterprise\n$0           $299/mo        $999/mo         Let's talk\n\n10 accounts  50 accounts    500 accounts    Unlimited\n1 connector  3 connectors   10 connectors   All 70+\nDaily sync   4h sync        1h sync         15min sync\n3 triggers   5 triggers     All 10          Custom\n\n[Start]      [Start]        [Start]         [Contact]\n```\n\nToggle for Monthly / Annual (save 20%). Highlight \"Pro\" as recommended.\n\n**Section 7 — Founder Close**\n\n```\nI built this because I spent 8 years watching\nteams drown in tabs and distrust their AI.\n\nIntegrateWise is what I wished existed.\nTry it. 2 minutes to connect your first tool.\n\n— Nirmal\n\n[Work email                    Start Free →]\n```\n\nSame email input as hero. Dark background. Personal tone.\n\n### Page 2: Pricing (standalone)\n\nSame pricing table as Section 6 but with:\n\n- Feature comparison matrix (full detail)\n- FAQ section (8 questions)\n- \"Start Free\" CTA at bottom\n\n---\n\n## PART 4: PRODUCT SCREENS TO DESIGN (for website screenshots)\n\nThese are the screens that will appear as product previews on the website once you have real data. Design them now so they're ready.\n\n### Screen 1: Accounts Hub (Universal)\n\nLayout:\n\n- Top: \"My Day\" header with date\n- Row 1: 4 stat cards (Engagements Today, Tasks Due, Open Risks, Renewals/Due Dates)\n- Row 2: 3 KPI cards (Avg Health Score, Total Value, Account Count)\n- Row 3: Health filter pills (All / Healthy / At-Risk / Critical)\n- Main: Account list — each row shows: account name, industry/type, owner, key metric, health score badge\n- Right sidebar or bottom: AI Signals section with purple accent\n- Note: This same layout works for SaaS accounts, CA clients, hotel properties, or freelance projects\n\n### Screen 2: Entity 360 View\n\nLayout:\n\n- Top: Entity name + health badge + entity type pill\n- Left column (60%): Truth data (key fields in a clean table/card layout)\n- Right column (40%): Active signals (severity-colored cards)\n- Below left: Context items (email icon + title + date, document icon + title + date)\n- Below right: Memory items (brain icon + content + confidence badge)\n- Bottom: Twin Insight card (expandable, shows what/why/action/risk + evidence chain + confidence bar)\n\n### Screen 3: Twin Insight Panel (Trust Layer)\n\nThis is the expandable insight card. Design it as a standalone component:\n\n- Header: Severity badge (color-coded) + title + confidence % pill + timestamp\n- Collapsed: Just the \"what happened\" line\n- Expanded:\n  - \"What happened\" section\n  - \"Why it matters\" section\n  - \"Data sources\" — pills showing which Entity 360 layers contributed (Spine, Context, Signals, Memory, Goals)\n  - \"Evidence\" — list of evidence items, each with layer icon + description\n  - \"Confidence\" — horizontal bar (green/yellow/red based on %)\n  - \"Risk if ignored\" — red warning box\n  - \"Recommended action\" — green action box\n  - Buttons: [Take Action] [Dismiss]\n\n### Screen 4: Identity Resolution / Duplicate Review\n\nLayout:\n\n- Top: Stats row (Pending, Merged, Rejected, Deferred counts)\n- Filter bar: Status pills + entity type dropdown\n- Main: List of merge candidates, each showing:\n  - Side-by-side: Entity A (source badge, name, email) | Entity B (source badge, name, email)\n  - Confidence score (large, color-coded)\n  - Matched fields as green pills (email, domain, name)\n  - Action buttons: [Merge] [Keep Separate] [Defer]\n\n### Screen 5: Intelligence Center (Portfolio Manager)\n\nLayout:\n\n- Top: 6 KPI cards in a row\n- Middle left: Health distribution bar (green/orange/red segments with legend)\n- Middle right: Team performance table (owner name, accounts, avg health, value, at-risk count)\n- Bottom: \"Accounts Needing Attention\" list sorted by worst health\n\n### Screen 6: Ops Cockpit (Business Ops)\n\nLayout:\n\n- Top: 6 mini KPI cards (key metrics customized to business type)\n- Middle left: \"What needs your attention\" — AI signals with purple accent\n- Middle right: Active deals/clients/projects sorted by value\n- Bottom: Account/client health sorted by worst first\n\n---\n\n## PART 5: COMPONENT LIBRARY (for Figma)\n\n### Core Components to Create\n\n**1. Stat Card**\n\n- Icon (top-left or left), label (small text), value (large bold), optional trend indicator\n- Variants: default, positive (green accent), warning (orange), critical (red), AI (purple)\n\n**2. Health Badge**\n\n- Circle or pill showing health score number\n- Color: green (≥70), orange (40-69), red (<40)\n- Sizes: small (inline), medium (card), large (hero)\n\n**3. Severity Badge**\n\n- Pill shape with background color + text\n- Variants: critical (red), high (orange), medium (yellow), low (blue), info (gray)\n\n**4. Source Badge**\n\n- Small pill showing connector source name\n- Color-coded by category (blue for CRM, purple for support, green for billing, etc.)\n\n**5. Evidence Item**\n\n- Layer icon (Database, MessageSquare, Zap, Brain, Target) + description text + optional source\n- Used in Twin Insight expanded view\n\n**6. Entity 360 Layer Card**\n\n- Header with layer name + icon\n- Content area with key-value pairs or list items\n- Used in Entity 360 view and website demo\n\n**7. Twin Insight Card**\n\n- Collapsed: severity badge + title + confidence + timestamp\n- Expanded: full what/why/action/risk + evidence + confidence bar + action buttons\n- Border color matches severity\n\n**8. Merge Candidate Card**\n\n- Two entity columns side by side\n- Confidence score between them\n- Matched field pills below\n- Action buttons at bottom\n\n**9. Filter Pills**\n\n- Row of selectable pills\n- Active state: filled primary color\n- Inactive state: muted background\n- Used for: health filter, status filter, entity type filter, domain filter\n\n**10. Email Signup Input**\n\n- Single-line input with inline button\n- Placeholder: \"Work email\"\n- Button: \"Start Free →\"\n- Used in hero and footer of website\n\n---\n\n## PART 6: INFORMATION ARCHITECTURE\n\n### Website Navigation\n\n```\nLogo                                    Pricing  Docs  [Start Free]\n```\n\nThat's it. No dropdowns. No mega-menu. Three links and a CTA.\n\n### App Navigation (for product screenshots)\n\n```\n┌──────────┬──────────────────────────────────────────────┐\n│ Sidebar  │  Top Bar: Domain name + Search + User avatar │\n│          ├──────────────────────────────────────────────┤\n│ Domain   │                                              │\n│ modules  │  Content area (ContentRouter)                │\n│          │                                              │\n│ ─────── │                                              │\n│ Settings │                                              │\n│ Admin    │                                              │\n└──────────┴──────────────────────────────────────────────┘\n```\n\nSidebar modules change based on domain:\n\n- CS: Dashboard, Accounts, Contacts, Health, Meetings, Tasks, Renewals, Risks, Docs\n- BizOps: Dashboard, Ops Center, Strategic Hub, Metrics, CRM, Sales, Clients, Projects\n\n### L2 Cognitive Overlay\n\nThe L2 layer is a slide-out drawer from the right side. It contains:\n\n- Twin insights panel\n- Evidence trail\n- Decision memory\n- Drift detection\n- Simulation panel\n- Context panel\n\n---\n\n## PART 7: KEY VISUAL CONCEPTS\n\n### The Spine Visualization\n\nThe Spine is the central concept. Visually, it should feel like:\n\n- A vertical backbone or column that data flows into\n- Connected nodes representing different entity types\n- Data streams flowing from connector logos into the Spine\n- Clean, minimal, not cluttered — think circuit board, not spaghetti\n\n### Entity 360 Visualization\n\nSix concentric layers around a central entity:\n\n1. Core: Entity name + type + health (center)\n2. Truth: Structured data ring (innermost)\n3. Context: Emails, docs, meetings ring\n4. Signals: Active alerts ring\n5. Memory: AI knowledge ring\n6. Goals: Outcomes ring (outermost)\n\nOr: Six horizontal layers stacked, each with its own icon and content area.\n\n### Trust Visualization\n\n- Confidence bar: horizontal, color-coded (green ≥80%, yellow ≥60%, red <60%)\n- Source badges: small pills with connector logo/name\n- Evidence chain: vertical list with layer icons as timeline markers\n- \"Why this insight\" as an expandable accordion\n\n### Pipeline Visualization (for Platform page)\n\n```\nS1 → S2 → S3 → S4 → S5 → S6 → S7 → S7.5 → S8\nAnalyze  Classify  Filter  Refine  Extract  Validate  Sanity  Identity  Sectorize\n```\n\nHorizontal flow with stage numbers, names, and brief descriptions. Each stage is a node connected by arrows.\n\n---\n\n## PART 8: RESPONSIVE BREAKPOINTS\n\n| Breakpoint | Width       | Layout                                      |\n| ---------- | ----------- | ------------------------------------------- |\n| Mobile     | < 640px     | Single column, stacked cards, hamburger nav |\n| Tablet     | 640-1024px  | Two columns, condensed sidebar              |\n| Desktop    | 1024-1280px | Full layout, sidebar + content              |\n| Wide       | > 1280px    | Max-width container, centered               |\n\nWebsite: Optimize for mobile-first (most traffic will be mobile from social/search).\nProduct screens: Optimize for desktop-first (product is used on desktop).\n\n---\n\n## PART 9: DESIGN PRIORITIES\n\n### Must design first (for website launch)\n\n1. Homepage hero section with email signup\n2. Entity 360 demo component (the conversion weapon)\n3. Twin Insight card (trust layer visualization)\n4. Pain cards section\n5. Pricing table\n\n### Design second (for product screenshots on website)\n\n6. CSM Accounts Hub screen\n7. Intelligence Center screen\n8. Founder Cockpit screen\n\n### Design third (for product polish)\n\n9. Identity Resolution / Duplicate Review screen\n10. Full Entity 360 view\n11. L2 Cognitive Overlay drawer\n\n---\n\n## PART 10: REFERENCE LINKS\n\n- Live app: `http://localhost:3000` (local dev)\n- Gateway health: `http://localhost:8786/health`\n- Entity 360 API: `GET /api/entity360/:id`\n- Twin 360 API: `GET /api/v1/cognitive/twin/360/:id`\n- Existing components: `apps/web/src/components/`\n- Trust panel: `apps/web/src/components/l2/cognitive/panels/trust-insight-panel.tsx`\n- Duplicate UI: `apps/web/src/components/l1/views/duplicate-resolution-view.tsx`\n- Platform features: `docs/PLATFORM_FEATURES_COMPLETE.md`\n- Architecture decisions: `docs/ARCHITECTURE_DECISIONS.md`\n"}