Build a demo app called "Candid.ai" — an AI-powered qualitative research interview platform that conducts real consumer interviews at scale. Companies define their target customer profile and research objective, Candid recruits matched participants from a vetted panel of 100,000+ consumers, then an AI interviewer conducts natural one-on-one voice conversations — probing deeper on interesting answers, skipping irrelevant questions, reading emotional cues, and capturing nuance that surveys never could. Findings are automatically synthesised into structured insight reports with sentiment analysis, theme clustering, and direct quote evidence — delivered in 48 hours, not 6 weeks. It costs a fraction of traditional qual research.

WHO: Product managers, UX researchers, brand strategists, and insight leads at consumer brands who need qualitative customer understanding but can't afford the time or cost of traditional research. WHAT: An AI qualitative research platform that recruits participants, conducts adaptive voice interviews, and synthesises findings into boardroom-ready reports. WHY: Traditional qual research takes 6-8 weeks and costs $30-80K per study. Candid delivers the same depth in 48 hours for under $5K. Most companies skip qual entirely because of cost — Candid makes it accessible to every product decision.

This is a DEMO app. Use hardcoded dummy data throughout. No real authentication — clicking "Try the Demo" or "Explore Dashboard" on the landing page navigates directly into the app dashboard. No login screen, no signup forms that actually validate. The simulated brand inside the dashboard is a direct-to-consumer meal kit delivery company called "Kindred" — they use Candid.ai to run qualitative research studies on their customers.

VISUAL STYLE:

Apply a dark mode SaaS dashboard aesthetic throughout — inspired by Linear, Notion, and Dovetail. Background: near-black (#09090F). Card surfaces: dark charcoal (#13131A) with subtle 1px borders (#1C1C28). Primary accent color: indigo/violet (#7C5CFC). Secondary accent: teal (#14B8A6) for positive sentiment and success states. Tertiary accent: soft amber (#F59E0B) for mixed/neutral sentiment. Quaternary accent: rose (#F43F5E) for negative sentiment. Text: white (#F5F5F7) for headings, light gray (#A1A1AA) for secondary text. Use the Inter font family throughout. Cards should use subtle glassmorphism — very slight background blur (backdrop-filter: blur(12px)) and transparency (rgba(19,19,26,0.8)). Rounded corners (14px) on all cards and containers. Generous spacing — 24px padding inside cards, 20px gap between grid items. Status badges use semantic colors: teal (#14B8A6) for completed/positive, amber (#F59E0B) for in-progress/neutral, rose (#F43F5E) for issues/negative, indigo (#7C5CFC) for active/primary, blue (#3B82F6) for info. Use subtle indigo-to-purple gradient accents (#7C5CFC to #A78BFA) on hero sections, key CTAs, and primary action buttons. Hover effects on cards should slightly brighten borders. Buttons have a slight scale(1.02) on hover.

LOGO: The Candid.ai logo should be the text "candid" in lowercase, bold Inter font, white — followed by ".ai" in the indigo accent color (#7C5CFC). Use this in the nav, sidebar, and footer.

PAGES AND ROUTES:

Route Page
/ Landing Page (marketing)
/app/dashboard Dashboard
/app/projects Research Projects
/app/study Study Detail View
/app/participants Participant Panel
/app/live Live Interviews

The landing page (/) has its own layout — no sidebar, just a transparent nav bar.

All /app/* pages share an app layout with a fixed left sidebar (hidden on mobile, becomes a slide-in overlay).

PAGE 1: LANDING PAGE (route: "/")

Fixed Navigation Bar:

Hero Section:

How It Works Section (id="how-it-works"):

Features Section (id="features"):

Testimonials Section (id="testimonials"):

CTA Section:

Footer:

APP LAYOUT (shared by all /app/* pages):

Sidebar (Desktop):

Sidebar (Mobile):

Main Content Area:

PAGE 2: DASHBOARD (route: "/app/dashboard")

Header:

4 Key Metric Cards (responsive grid: 1→2→4 columns): Each card is a glass card with:

Cards:

  1. "Active Studies" — "4" — FolderKanban icon (indigo bg) — "2 completed, 1 in field, 1 recruiting"
  2. "Interviews Completed" — "312" — Mic icon (teal bg) — "↑ 84 this week"
  3. "Avg. Turnaround" — "41 hrs" — Clock icon (amber bg) — "↓ 7 hrs vs last month"
  4. "Participants Recruited" — "347" — Users icon (blue bg) — "98.3% show-up rate"

Performance Snapshot Card (full width glass card):

Main Content Grid (3/5 + 2/5 on desktop):

Left: Recent Activity Feed (glass card):

Right: Quick Actions (glass card):

PAGE 3: RESEARCH PROJECTS (route: "/app/projects")

Header:

Filter bar: 2 dropdowns:

Project Cards (list of glass cards):

Project 1:

Project 2:

Project 3:

Project 4:

PAGE 4: STUDY DETAIL VIEW (route: "/app/study")

This page shows the completed study "Why Customers Cancel After Month 3" in detail. This is the most important page — it demonstrates the core value of the platform.

Header:

Tab bar: "Executive Summary" (default active) | "Key Themes" | "Quotes & Evidence" | "Sentiment Analysis"

EXECUTIVE SUMMARY TAB:

Executive Summary Card (full width glass card):

Key Findings Cards (3 glass cards in a row):

Actionable Recommendations Card (glass card):

KEY THEMES TAB:

Theme cards (list of glass cards, each with a colour-coded sentiment bar on the left):

Theme 1:

Theme 2:

Theme 3:

Theme 4:

Theme 5:

QUOTES & EVIDENCE TAB:

A searchable list of direct participant quotes, each as a glass card:

Quote 1:

Quote 2:

Quote 3:

Quote 4:

Quote 5:

Quote 6:

SENTIMENT ANALYSIS TAB:

Overall Sentiment Card (glass card):

Sentiment by Theme Card (glass card, horizontal bars):

Emotional Intensity Card (glass card):

Sentiment Over Interview Timeline Card (glass card):

PAGE 5: PARTICIPANT PANEL (route: "/app/participants")

Header:

Summary Stats Row (4 small glass cards):

Filter bar: 3 dropdowns:

Participant Cards (list of glass cards):

Participant 1:

Participant 2:

Participant 3:

Participant 4:

Participant 5:

Participant 6:

PAGE 6: LIVE INTERVIEWS (route: "/app/live")

Header:

Live Status Bar (full width glass card, indigo gradient border):

Live Interview Cards (glass cards with subtle indigo glow/border to indicate 'live'):

Interview 1 (Active):

Interview 2 (Active):

Interview 3 (Active):

Upcoming Interviews Card (glass card below):

Interview Quality Metrics Card (glass card):

NAVIGATION BEHAVIOR:

DATA BEHAVIOR:

IMPORTANT NOTES:


---

## Refinement Prompts

Use these one at a time after the initial app generates. Paste each into Base44's chat.

### Prompt R1 — Design Polish

Refine the visual design across all pages. Make card borders more subtle (reduce opacity). Add a subtle indigo/violet radial glow behind the hero section headline on the landing page. Ensure all status badges are pill-shaped with rounded corners and consistent padding. Add hover effects on all clickable cards that slightly brighten the border color and add a subtle translateY(-2px) lift. Make sure the sidebar has a subtle separator line between the nav items and the organisation profile at the bottom. Ensure the active sidebar item has an indigo left border accent (3px) and slightly brighter background. Sentiment colour coding should be consistent everywhere: teal for positive, amber for mixed/neutral, rose for negative, indigo for significant/noteworthy.


### Prompt R2 — Charts and Visualizations

Add proper chart visualizations. Use Recharts for: On the Study Detail page Sentiment Analysis tab — a donut chart for overall sentiment (52% negative in rose, 31% neutral in amber, 17% positive in teal), horizontal bar charts for sentiment by theme (stacked bars showing negative/neutral/positive proportions). On the Dashboard page, add small sparkline trend indicators inside each of the 4 metric cards showing a positive trend. On the Study Detail Sentiment Analysis tab, add a simple area chart for "Sentiment Over Interview Timeline" showing the emotional arc from neutral → positive → sharp negative → cautiously positive. On the Projects page, add a progress bar on the "in field" study showing 64% completion with an indigo fill.


### Prompt R3 — Landing Page Animations

Add subtle scroll-triggered fade-in animations to the landing page. The hero headline should have a slight fade-up animation on page load (opacity 0 to 1, translateY 20px to 0, over 0.6 seconds). The "How It Works" step cards should stagger in as the user scrolls (each card 150ms after the previous). The feature cards should fade in with a slight scale effect. The floating stats card in the hero should have a count-up number animation when they scroll into view. The testimonial cards should slide in from below. The live interview cards on /app/live should have a subtle indigo pulse glow animation on the border to indicate they are live.


### Prompt R4 — Responsive Layout and Mobile

Ensure full mobile responsiveness. The landing page navigation should collapse to a hamburger menu on screens under 768px. The sidebar on app pages should collapse to a hamburger menu or slide-in overlay on mobile. All card grids (metrics, features, projects) should stack to single column on phone screens. The live transcript excerpts on the Live Interviews page should be horizontally scrollable on mobile. The quote cards on the Study Detail page should stack cleanly with all information visible. Font sizes should scale down gracefully. Touch targets on mobile should be at least 44px. The tab bar on the Study Detail page should be horizontally scrollable on mobile.


### Prompt R5 — Activity Feed and Live Interview Polish

Add small coloured icons next to each activity feed item on the Dashboard — a teal file icon for reports delivered, an indigo mic icon for completed interviews, a blue users icon for recruitment activity, an amber alert icon for emerging themes, and a rose radio icon for live interviews. On the Live Interviews page, add a subtle incrementing timer next to each active interview duration. Add a pulsing indigo dot animation next to the "LIVE" badge on each active interview card. In the Participant Panel, add a small avatar circle with the participant's initials using the appropriate sentiment border colour. The live transcript text on /app/live should use a slightly different background (darker) to look like a terminal/console output.


---

## Final Touch Prompts

### Prompt F1 — Demo Mode Indicator

Add a subtle "Demo Mode" indicator badge in the top-right corner of every app page (not the landing page). It should be a small pill badge with an indigo outline and the text "Demo Mode" in light gray. It should be fixed-position so it stays visible while scrolling.


### Prompt F2 — Toast Notifications

When any non-functional button is clicked (like "View Campaign", "Export Report", filter dropdowns that don't work, etc.), show a small toast notification that slides in from the bottom-right corner saying "This feature is available in the full version." The toast should auto-dismiss after 3 seconds and have a dark background with white text and a subtle indigo left border.


### Prompt F3 — Interview Audio Waveform

On the Live Interviews page, add a small animated audio waveform visualisation next to each active interview — simple CSS bars that animate up and down to suggest audio activity. Use indigo colour for the bars. This should be purely decorative (not real audio) but adds to the sense that real interviews are happening.


---

## Dummy Data Summary

### Demo Brand
- **Company**: Kindred — a direct-to-consumer meal kit delivery company
- **Plan**: Growth Plan
- **Logo initial**: "K" in an indigo circle

### Research Studies
| Study | Status | Interviews | Type |
|-------|--------|------------|------|
| Why Customers Cancel After Month 3 | Completed | 80/80 | Exploratory |
| Competitor Switching Motivations | Completed | 80/80 | Strategic |
| Premium Tier Willingness to Pay | In Field | 48/75 | Evaluative |
| Eco Packaging Perception Study | Recruiting | 32/60 | Evaluative |

### Participants (20 total)
| Name | Age | Location | Study |
|------|-----|----------|-------|
| Sophie A. | 34 | Bristol | Churn Drivers |
| James T. | 44 | Manchester | Churn Drivers |
| Rachel H. | 29 | London | Churn Drivers |
| Olivia M. | 31 | Glasgow | Churn Drivers |
| Grace W. | 33 | Brighton | Churn Drivers |
| David L. | 41 | Edinburgh | Churn Drivers |
| Tom O. | 36 | Leeds | Churn Drivers |
| Noah K. | 27 | Cardiff | Churn Drivers |
| Daniel F. | 39 | Newcastle | Churn Drivers |
| Priya S. | 38 | Birmingham | Churn Drivers |
| Hannah B. | 32 | Dublin | Churn Drivers |
| Marcus O. | 28 | London | Eco Packaging |
| Kenji N. | 52 | Bath | Premium Tier |
| Maya W. | 37 | Edinburgh | Premium Tier |
| Aisha K. | 29 | London | Premium Tier |
| Ryan M. | 36 | Dublin | Eco Packaging |
| Lauren B. | 31 | Cardiff | Eco Packaging |
| Oliver R. | 42 | Liverpool | Premium Tier |
| Freya C. | 26 | Bristol | Eco Packaging |
| Nadia P. | 33 | Birmingham | Eco Packaging |

### Colour Palette
| Purpose | Colour | Hex |
|---------|--------|-----|
| Background | Near-black | #09090F |
| Card surface | Dark charcoal | #13131A |
| Card border | Subtle dark | #1C1C28 |
| Primary accent | Indigo/Violet | #7C5CFC |
| Primary gradient end | Light violet | #A78BFA |
| Positive / Success | Teal | #14B8A6 |
| Mixed / Neutral | Amber | #F59E0B |
| Negative / Warning | Rose | #F43F5E |
| Info | Blue | #3B82F6 |
| Heading text | White | #F5F5F7 |
| Secondary text | Light gray | #A1A1AA |