Kaleido Life shenAI MVP — Visual Redesign Briefing

1 Your Input Needed

Eight decisions shape the Assuretrac demo scope and integration roadmap. Each card shows the question, options, and our recommendation. Your responses unlock the next build phase.

D1 Social Auth Provider Priority

Which sign-in methods must be live for the Assuretrac demo?

A: Email first, then Apple + Google (rec.) B: All three simultaneously C: Apple + Google only

Email has the widest compatibility and simplest implementation. Social auth layers on top without blocking the demo timeline.

D2 Eligibility Quiz Screen Fate

The 4-question quiz (life insurance, income, health, cash preference) is not in the mockups. Keep, remove, or fold?

A: Remove entirely B: Keep + restyle to match new theme (rec.) C: Fold into auth/intent flow

Preserves data collection that feeds the Life Liquidity Score while aligning with the new visual direction.

D3 AI Avatar Integration Depth

The mockups show an AI avatar on intent and score screens. How deep should the interaction go?

A: Static tooltips B: Scripted responses personalized by name + intent (rec.) C: Full conversational AI

Scripted responses deliver a personalized feel (using the user's name and selected intent) without the cost and complexity of a backend LLM.

D4 Processing Screen Handling

Current app has a separate 5-step animated processing screen. Mockup shows "LIFE CASH LOADING.." during scan instead.

A: Merge into biometric scan screen (rec.) B: Keep separate + retheme C: Remove entirely

The mockup implies a single scan-to-score experience. Merging eliminates a screen transition and matches the "LIFE CASH LOADING.." vision.

D5 Splash Animation Format

The provided MP4 (4.4 MB) needs conversion for web delivery. Which format?

A: CSS/JS animation (rec.) B: Optimized video (<500KB) C: Lottie JSON

CSS/JS has the smallest footprint, best cross-platform performance, and no video codec dependencies on mobile browsers.

D6 Background Implementation

Replace the WebGL2 kaleidoscope shader with the POC teal background. Which approach?

A: Static image (WebP) + CSS particles (rec.) B: WebGL retexture with teal palette C: CSS-only gradient

Matches the mockup exactly, dramatically lighter than WebGL, and eliminates the SharedArrayBuffer requirement for the background layer.

D7 DNA Behavior Integration Timeline

When should DNA Behavior SDK research and integration begin?

A: After MVP theme + auth B: Begin research now, implement after Assuretrac (rec.) C: Defer until partnership terms finalized

Research is non-blocking. Starting now means we have the integration spec ready when Assuretrac alignment confirms the priority order.

D8 Assuretrac Demo Scope

What needs to be live for the Assuretrac deployment discussion with Akhil & Vivek's team?

A: New theme only B: Theme + auth + intent redesign (rec.) C: Full 5-partner integration

Delivers visual impact and functional auth without waiting for all API partners. Shows both the brand direction and working technology.

Submit Your Decisions →

2 Current State vs Future State

Side-by-side comparison of the working demo versus Craig's mockup direction.

Current State (Live)

"Fountain of Truth" dark purple/gold theme
WebGL2 kaleidoscope shader background
Basic form auth (name, email, age, zip)
Text-based intent selection
Orb animation on "What Happens Next"
11 screens, sequential flow
ShenAI biometric scan (working, 60s)
Purple SVG gauge for score reveal
Single data source (ShenAI only)

Target State (Mockups)

Teal/aqua ethereal theme, premium fintech
Static optimized background + CSS particles
Social auth (Apple, Google, Email)
Visual icon grid with AI avatar tooltip
3-step numbered explainer card
Streamlined flow with splash animation
Enhanced scan UX (live readouts, star rating)
Teal gauge + hexagon logo + avatar bubble
5 data partners feeding aggregation layer

Screen-by-Screen Delta

Screen	Change Type	Current	Target
Splash	New	None	Animated logo reveal (from MP4 concept)
Landing	Major	Purple/gold, basic form, WebGL kaleidoscope	Teal gradient, social auth, clean typography
IntentFraming	Redesign	Text-based intent options	2x2 icon grid, AI avatar tooltip, "More" button
BasicInfo	TBD (D2)	Name/email/age/zip form	May absorb into social auth flow
EligibilityQuiz	TBD (D2)	4 multi-choice questions	Keep + restyle, or fold into flow
FountainOfTruth	Redesign	Orb animation	3-step explainer card + tagline
BiometricScan	Enhance	Camera + SDK overlay	"LIFE CASH LOADING.." + live readouts + star rating
Processing	TBD (D4)	5 animated steps	Likely merges into scan screen
ScoreReveal	Retheme	Purple SVG gauge, gold accents	Teal gauge, hexagon center, AI avatar chat, 3 CTAs
TierOffer	Simplify	Tier-specific messaging	Consolidated into score reveal CTAs
WellnessMatrix	Retheme	6-category grid	Color changes only (teal palette)
FinalCTA	Merge	Multiple tier-based buttons	Absorbed into score reveal CTAs

3 Theme Overhaul (CP-1)

The foundation that unblocks every other change. Purple/gold to teal/aqua, WebGL to optimized static.

Removing

Deep purple gradient (#1A0A2E → #120720)
Gold primary (#C5A572)
Cyan, pink, yellow accents
WebGL2 kaleidoscope shader (4 patterns)
Metallic white bands
Penpot theme CSS (archived)

Introducing

Teal primary (#00C9A7)
Aqua background gradient with bokeh particles
White text, frosted glass card borders
Gold accent for CTAs (#D4A574)
Bold display headlines + clean sans-serif body
Teal hexagon logo throughout

CP-1 Build Timeline

Gantt: Theme Overhaul (~9 working days)

Action Items

Extract design tokens from Craig's mockup assets (palette, spacing, typography)
Rewrite tailwind.config.js color definitions (remove fountain-*, add kl-*)
Replace WebGL2 background with optimized WebP image + CSS particle overlay
Update main.css with new theme system
Archive penpot-theme.css (no longer the target)
Retheme all 11 screen .ts files with new class names
Full visual QA across 3 viewports (mobile, tablet, desktop)

4 Screen Redesign Pipeline

Six current priorities beyond the theme overhaul. Each builds on CP-1 completion.

CP-2 Intent Screen Redesign

Convert text-based intent selection to a visual 2x2 icon grid with AI avatar tooltip.

4 icon cards: Dream Vacation, Pay Off Debt, Down Payment, Get Married
"More →" expansion button for additional use cases
AI avatar tooltip: "This helps me personalize your Life Liquidity Score"
Mobile-responsive (stacks to 1-column on narrow viewports)

CP-3 "What Happens Next" Explainer

Replace FountainOfTruth orb animation with a structured 3-step explainer card.

Step 1: Quick Identity & Health Scan — camera-based biometric
Step 2: Your Life Liquidity Score — AI calculates Life Cash
Step 3: Your Cash Unlock Roadmap — personalized policy + wellness path
Footer tagline: "CASH UP FRONT, COVERAGE FOR LIFE." + dot progress indicators

CP-4 Biometric Scan UX Enhancement

Enhanced scan experience with live data overlays matching Craig's mockup vision.

"LIFE CASH LOADING.." branding text during active scan
Live readout overlays: heart rate (BPM), blood pressure progress bar
Star rating indicator for scan quality
Teal-themed face overlay (replacing current gold overlay)
Performance guard: WASM memory impact monitored for additional DOM updates

CP-5 Score Reveal Retheme

Teal gauge with hexagon logo center, AI avatar chat bubble, and consolidated CTAs.

AI avatar bubble: "Your Life Liquidity Score determines how much cash you can unlock today—and how quickly you can unlock more."
Circular gauge with teal glow rings + hexagon KaleidoLife logo center
3 CTAs: Review my 360° Wellness Matrix / View my offer / Start over
Remove tier-specific CTA variations (simplify to universal 3)

CP-6 Splash Screen Animation

Convert Craig's MP4 concept (4.4 MB) to a lightweight animated web component.

Analyze MP4 keyframes and motion patterns
Implement as CSS/JS animation (pending D5 confirmation)
Fallback: compressed WebM <500 KB with autoplay
2-3 second duration, auto-advance to Landing

CP-7 IR Copilot Redirect Fix Bug

kaleido-life.chem.dev redirects to the shenAI app instead of the IR Copilot. Investor saw dev environment.

Investigate Caddy/proxy routing configuration
Fix: root path → IR Copilot, or maintain separate paths (/ vs /investors)
Verify IR login no longer redirects to root
Priority: Immediate — independent of theme work, no blockers

5 API Integration Roadmap

Five data partners feeding into the Kaleido AI Proprietary Aggregation Layer for a multi-source Life Liquidity Score.

Shen AI Biometric

Health metrics via 60s face scan (WASM SDK)

Integrated

Working in production. Extracts heart rate, HRV, blood pressure, breathing, stress, BMI, age estimate. Camera capped at 640x480 for WASM memory.

DNA Behavior

Behavioral & psychological profiling

Pending

Meeting to be scheduled with DNA tech team for SDK/API flow. #1 in the target API flow diagram. Research can begin now (D7).

Didit KYC

Identity verification

Ready

Comprehensive free basic KYC tier confirmed. API docs available. Integrates into onboarding flow between auth and biometric scan.

Plaid Financial

Lend score & financial data

Ready

Agreement confirmed. Plaid Link SDK for web initialization. Financial data adds lending-risk dimension to the score.

Terra / Rook

Wearable health device data

Awaiting

Waiting for SDK/developer access response. Lowest priority among 5 partners. Non-blocking for MVP.

Current Data Flow (ShenAI Only)

Sequence: How the app works today

Target Data Flow (5 Partners)

Sequence: Target architecture with all integration partners

Decision Flow

Sequence: Craig's decisions unlock the build pipeline

6 Phasing Recommendation

Four phases with clear gate criteria. Each phase delivers standalone value and unlocks the next.

Immediate — For Assuretrac Discussion

Visual MVP

Theme overhaul: purple/gold → teal/aqua (CP-1)
Intent screen redesign with icon grid (CP-2)
"What Happens Next" 3-step explainer (CP-3)
Biometric scan UX enhancement (CP-4)
Score reveal retheme with avatar (CP-5)
Splash animation web component (CP-6)
IR copilot redirect fix (CP-7)

Gate: Craig approves visual direction + D1, D2, D3, D4 resolved + Assuretrac demo delivered

Next — Post Visual Approval

Auth + Flow Optimization

Social authentication (Apple, Google, Email)
Quiz screen resolution (per D2 decision)
AI avatar depth implementation (per D3 decision)
Flow consolidation (merge processing, simplify CTAs)

Gate: Social auth tested + Assuretrac feedback incorporated + DNA Behavior API access secured + data aggregation architecture decided

Post-Assuretrac Alignment

Partner Integrations

DNA Behavior SDK integration (behavioral profiling)
Didit KYC (identity verification layer)
Plaid Financial (lend score data)
Kaleido AI Aggregation Layer (multi-source scoring)

Gate: At least 3 of 5 partners integrated + Life Liquidity Score uses multi-source data + partnership terms for white-label defined

Deferred

Expansion

Terra/Rook wearables integration
White-label "Life Liquidity Score" packaging
Team onboarding (product dev + actuary hires)
E2E test infrastructure buildout

Gate: Business development terms finalized + team capacity expanded