Visual Style Brief - Research Tech

Executive Summary

The Research Tech product UI will embody "Institutional-Grade Clarity." By synthesizing the financial trustworthiness of Ramp, the data-centric minimalism of Attio, and the structured AI interactions of Clay, the design will prioritize speed and data density without overwhelming the user. The interface will utilize a "Sheet on Desk" metaphor—stark white content surfaces resting on a pale gray application background—where the UI recedes to let the due diligence data take center stage. The aesthetic is high-key, crisp, and hyper-functional.

Design Direction Recommendation

Primary Foundation: Attio

Attio serves as the base visual layer for Research Tech. This choice is driven by:

1. Tech Stack Alignment — Attio's aesthetic matches shadcn/ui defaults out of the box (Inter font, 1px borders over shadows, Tailwind gray scale, 6-8px button radius). Building with shadcn means working with the library rather than overriding it.

2. Domain Similarity — Attio is a CRM handling Companies, Deals, and automated workflows. Research Tech handles Deals, Reports, and AI analysis workflows. The object model translates directly.

3. Workflow UI — Attio's automation builder (see attio-07-automation-diagram.png) provides a reference for the Make/n8n-style workflow visualization required in the UX brief.

4. "Invisible UI" Philosophy — Attio's principle that "the interface recedes so data becomes the interface" aligns with Research Tech's need to make evidence the hero.

Selective Patterns from Clay

Borrow Clay's AI chat output patterns (see clay-03-sculptor-chat.png) for the "Chat with Diligence" feature:

• Structured blocks instead of chat bubbles
• Mini-cards with headers, bullet points, and scores
• Source citations as clickable chips

Selective Patterns from Ramp

Borrow Ramp's 3-pane document review layout (see ramp-03-bills-ui.png) for the Report Interface:

• Left: Navigation/Table of Contents
• Center: AI-synthesized report
• Right: Source PDF/document viewer

This creates a clear hierarchy: Attio foundation → Clay AI patterns → Ramp document layout.

UX Pattern Inspirations (NotebookLM + n8n)

Beyond visual styling, these platforms inform key interaction patterns for source-grounding and workflow visualization.

NotebookLM Inspiration (Report + Sources + Chat)

NotebookLM is Google's AI notebook that grounds answers in uploaded sources with inline citations — we borrow this evidence-linking pattern.

Key Patterns Observed:

1. Tri-Pane Console Layout:

   • Left (~280px): Source sidebar with document cards and checkboxes for "active" sources
   • Center (fluid, min 600px): Chat/reading focus area
   • Right (~320px): Studio/notes panel for quick actions and output collection

2. Citation Chips:

   • Small pill-shaped inline citations (e.g., [1], [2])
   • ~18px height, light gray background (#F1F3F4), dark gray text
   • Hover expands or highlights the source text
   • Click opens evidence drawer with exact quote

3. Source Counter:

   • Input bar explicitly shows "1 source" or "5 sources"
   • Reinforces grounding: "I am only looking at what you gave me"

4. Typography Strategy:

   • Serif font for document headers (formal report feel)
   • Sans-serif for UI elements (tech feel)
   • High citation density visually reinforces AI isn't hallucinating

Application for Research Tech:

• Interactive Footnotes: Hover citation → popover with text snippet; Click → PDF viewer deep-linked to paragraph
• Evidence Sidebar: List Key Claims (not just files) — "Revenue verified," "Legal risk detected" — clicking jumps to report section
• Source Grounding Indicator: When AI answers, highlight which source is being referenced in sidebar

Make / n8n Inspiration (Workflow Complexity)

Make and n8n are visual workflow automation platforms where users connect nodes on a canvas to build automated processes — we borrow this visual metaphor.

Key Patterns Observed:

1. Infinite Canvas:

   • Dot grid background (#E5E7EB dots on white) implies infinite workspace
   • Workflow centered; controls floating in corners (zoom, execute)

2. Node Cards:

   • Rectangular cards (~200px × 60px)
   • White background with subtle drop shadow
   • 40px icon on left, bold title, status indicator
   • Status colors: Green (complete), Yellow (review needed), Red (error/conflict)

3. Connection Lines:

   • Bezier curves (gray lines) connecting nodes
   • Small + buttons on hover over lines to inject steps (good for "Human in the Loop")

4. Inspector Drawer (Split-Pane):

   • Slide-over panel taking ~50% of screen
   • Split view: "Input" (Left) vs "Output" (Right)
   • Critical for debugging agent logic and resolving conflicts

5. Progressive Disclosure:

   • Click node → opens Inspector with details
   • Show the map first, show data only when asked

Application for Research Tech:

• Agent Graph Canvas: Use dot grid background for "Work in Progress" feel
• Node Design: Icon (Agent Type) + Title ("Legal Check") + Status Badge (Spinner/Checkmark)
• Status Colors: Green (bg-green-100 text-green-700) for verified, Yellow for "Human Review Needed," Red for "Conflict Detected"
• Review Queue Inspector: Split-pane for conflict resolution — Left: "Agent A Findings" vs Right: "Agent B Findings" with central "Resolve" button
• Error Visibility: Red warning icons build trust by admitting failure immediately
• Empty States: Use "Start a Diligence Request" cards suggesting specific workflows ("Quick Sanity Check" vs "Deep Dive")

Trust & Verification UI Patterns

1. Confidence Score Badges:

   • Badge on generated paragraphs: "High Confidence (3 Sources)" in green, "Low Confidence (Single Source)" in orange
   • Borrow NotebookLM's "Beta" badge styling

2. Visual Hierarchy (Attio + Clay Hybrid):

   • Use Clay's subtle gray backgrounds for AI chat bubbles to differentiate from human
   • Use Attio's thin borders (border-gray-200) on cards for premium enterprise feel
   • Prefer borders over heavy drop shadows

Color System

Strict adherence to a light-mode-first architecture to ensure readability of dense text reports.

Primary Surfaces

Action & Brand

Text & Data

Semantic Status (For Tags & Risk Flags)

Typography System

Prioritizing legibility for long-form reading and tabular financial data.

Font Families

• Primary: Inter (or TWK Lausanne). Clean, neo-grotesque, high x-height.
• Data/Code: JetBrains Mono or Roboto Mono. For financial figures and deal IDs.

Type Scale

Rule: All financial data and dates must use font-variant-numeric: tabular-nums for vertical alignment.

Layout & Spacing Guidelines

Based on the "Sheet on Desk" (Attio) and 3-Pane (Ramp) philosophies.

Spacing Scale

• Base Unit: 4px
• Scale: 4, 8, 16, 24, 32px

Structure

Container Model

Border: 1px solid #E5E7EB
Shadow: 0px 1px 2px rgba(0, 0, 0, 0.05)
Radius: 12px

Component Style Guide

Buttons

Tables (Dashboard/Pipeline)

• Headers: 11px Uppercase, Gray 500, Sticky top
• Rows: 40px height, 1px bottom border
• Hover state: #F9FAFB
• No vertical dividers - alignment defines structure

Deal Pipeline Cards

• Minimal Kanban style
• White background, 1px border
• Focus on: Logo, Company Name, Deal Size (Monospace), Stage Tag (Pastel pill)
• No cover images

AI Chat Interface Patterns

"Chat with Diligence" - Moving from chatbots to interactive documents.

Location

• Collapsible Right Drawer (Width: 400px or 33% of screen)
• Allows viewing Report (Center) while questioning it (Right)

Interaction Design

• Input: "Ask a question about this deal..." placeholder
• Output: Do NOT use chat bubbles. Use Structured Blocks
  • AI generates mini-cards with headers, bullet points, and scores
  • Example: Revenue risks appear as a card with "Risk Score" badge
• Citations: Every AI claim has clickable chip [Pg 12] or [Income Statement]
  • Clicking highlights source text in main view

Report Interface Patterns

The 3-Pane Layout (derived from Ramp's document review)

Structure

1. Left (Navigation): Table of Contents
   • Executive Summary, Team, Market, Financials, Tech Stack
2. Center (The Synthesis): AI-generated narrative report
   • Typography: Clean Inter (or optional Serif headers for editorial feel)
   • Inline warnings: Soft Orange #FFEDD5 blocks for "Diligence Red Flags"
3. Right (Source/Context): Contextual sidebar
   • When clicking a chart in Center, shows raw PDF source or Excel row

Onboarding Flow

• Style: Centered modal on blurred background
• Step 1: Upload Deck/Data Room (Drag & Drop, dashed blue border)
• Step 2: "Analyzing..." (Progress bar with steps: "OCR Processing," "Financial Extraction," "Risk Scoring")
• Step 3: Success state (Green check) → Transition to Dashboard

Key Design Principles

1. Invisible UI: The interface (borders, backgrounds) should be barely noticeable. The Deal Data is the hero.

2. Data Lineage is King: Never show an AI insight without a visual link to the source document. Trust is the currency of VC.

3. Structure over Conversation: AI outputs should look like reports (tables, lists, scorecards), not text messages.

4. High Density, High Breathing Room: Use small fonts (13px) for data to fit more on screen, but use generous padding (32px) around containers.

5. Color as Signal: Use color only to indicate action (Blue), status (Green/Red), or AI (Violet). Everything else is grayscale.

Client Inspiration (Verbatim)

Charlie, here are my resources for you regarding the inspiration of great AI SaaS Startup UX.

TOP 3

https://attio.com/ (incredible job. showing demo of product straight on the page – so clients scrolling – learn about product but also get used to the clean design of it!)

https://www.clay.com/ (fresh, similarly to our needs – has to explain workflows and data, not too long, great way to present testimonials and use cases)

https://ramp.com/ (clarity, instant call to action, pricing page has emotional headline "save" and then clear comparison of options)

REST

https://www.heygen.com/ (minimalistic, very clean, CTA repeated multiple times, social proof through numbers and use-cases, top bar has everything we should have as well)

https://www.beehiiv.com/ (easy to understand, clean, great balance between presenting solution in action and moving towards pricing)

https://causalens.com/ (for visual look)

https://cursor.com/pricing (pricing categories)

Others to have a look at

https://www.tella.com/ (I like that it's done with low effort but focuses on solving problems and speaks for itself)

https://www.synthesis.com/tutor

https://supabase.com/

https://www.revolut.com/pl-PL/

Individual Brand Analysis (TOP 3)

Ramp

What it is: Corporate expense management and finance automation platform.

Color System:

• Marketing: Dark blue/black gradient (#0B0F19 to #111827) with electric lime CTAs (#DFFF00)
• Product: White (#FFFFFF) backgrounds, pale gray (#F3F4F6) app backgrounds
• Actions: Royal Blue (#3B82F6)
• Status: Emerald green for success (#10B981), soft orange for warnings (#FFEDD5 bg, #C2410C text)

Typography:

• Geometric sans-serif (TWK Lausanne or customized Inter)
• Large font size for key financial figures (the "bottom line" as visual anchor)
• Monospaced/tabular figures for financial columns

Layout:

• Master-detail split: List (20%) | Details (40%) | Document (40%)
• Bento box grid for marketing features
• Generous whitespace (24-32px padding)
• Fixed narrow sidebar with clear iconography

Key UI Patterns:

• White cards with subtle borders (1px solid #E5E7EB) and soft drop shadows
• Corner radius: 12-16px
• Timeline/activity feeds with vertical line connecting avatars
• Inline contextual warnings (not pop-ups)
• Document preview always visible alongside data extraction

Design Philosophy:

• "Invisible Finance" - making complex accounting feel lightweight
• Consumer-grade B2B aesthetic
• Trust through clarity (large numbers, high contrast)

Application for Research Tech:

• Use 3-pane layout for document review (Data Room list | Analyst notes | PDF viewer)
• Copy inline warning pattern for risk flags
• Implement vertical timeline for diligence process tracking

Clay

What it is: AI-powered data enrichment and sales automation platform.

Color System:

• Marketing: Warm off-white canvas with earthy 3D "Play-Doh" colors (Orange, Magenta, Yellow, Cyan)
• Product: Strict White (#FFFFFF) and Light Gray (#F5F5F5)
• Primary action: Azure Blue (#007AFF)
• "Sparkle" icon in purple/blue gradient for AI actions

Typography:

• Marketing: High-contrast Serif font (Moret or similar) for editorial feel
• Product: Clean sans-serif (Inter or system San Francisco)
• Monospace for data cells and API keys

Layout:

• Split-pane philosophy: Config/Chat (Left) | Live Data Preview (Right)
• High-density spreadsheet-like tables (32-40px row heights)
• Card-on-canvas approach with 8-12px corner radius

AI Chat Patterns ("Sculptor"):

• Chat lives in collapsible side drawer (keeps data table visible)
• AI responses render as structured documents, NOT bubbles
• Uses Markdown: Headers, bullet points, bold text
• Structured outputs: "Overall Status: Good ✓" with metrics
• Large multi-line input area for complex prompts

Key UI Patterns:

• Multi-select tags within input fields with "X" to remove
• Preview columns show what AI would find before committing
• Excel-like familiarity: numbered rows, column icons for data types
• Cell status icons (blue double-chevron = "Enrichment running")

Design Philosophy:

• "Digital craft" aesthetic - data as raw material you shape
• Playful marketing, utilitarian product
• Trust indicators showing data source lineage

Application for Research Tech:

• Use Serif headlines for report headers (editorial feel)
• Implement split-screen: Chat/AI (Left) | Source Document (Right)
• Force AI outputs as scorecards/health summaries, not paragraphs
• Add source indicators: [Source: Crunchbase] next to every data point

Attio

What it is: AI-native CRM platform for GTM teams.

Color System:

• Foundational: Stark White (#FFFFFF) content, Very Light Gray (#F9FAFB) backgrounds
• Borders: Faint gray (#E5E7EB) everywhere
• Text: Jet Black (#111827) for headers, Dark Gray (#6B7280) for secondary
• Actions: Carbon Black (#1F2937) marketing, Royal Blue (#3B82F6) product
• Data visualization pastels: Pink #F472B6, Purple #A78BFA, Blue #60A5FA, Yellow #FBBF24, Green #34D399

Typography:

• Neo-Grotesque (Inter or San Francisco)
• Tight letter spacing on headlines
• 13px data/table text for density
• Monospaced tabular figures for financial columns
• Sentence case preferred over uppercase

Layout:

• "Sheet on Desk" metaphor: Sidebar (gray) = desk, Content (white) = paper
• Fluid layout with fixed 240px sidebar
• Collapsible sidebar sections (Favorites, Records, Lists)
• Extensive breadcrumbs for context

Components:

• Borders over shadows (1px light gray defines most containers)
• Shadows reserved for floating elements only
• Minimal Kanban cards: White box, Title, Avatar, Value
• Marketing buttons: Full pill shape
• Product buttons: Rounded rectangles (6-8px radius)
• Ghost buttons appear as text with border on hover

Data Visualization:

• Bar charts: Rounded corners on tops, soft pastel colors
• Donut charts: Thick rings, center contains summary number
• High contrast tooltips with strong shadow

Workflow/Automation UI:

• Vertical flow (top-down)
• Dotted grid pattern background (blueprint feel)
• Nodes: Rectangular cards with icon left, text right
• Connectors: Thin gray lines with 90-degree elbows
• Status pills attached to connection lines

Design Philosophy:

• "Invisible UI" - interface recedes, data is the interface
• Object-oriented: Everything anchored to People, Companies, Deals
• Playful professionalism: Emojis allowed, pastel colors prevent sterility

Application for Research Tech:

• Treat "Deal" as the hero object (white canvas, clean header)
• Use sidebar for navigation within deal (Financials, Team, Product, Legal)
• Copy table view for data density
• Adapt workflow builder for investment process visualization
• Use "AI is thinking..." pattern for automated risk assessments

Reference Screenshots

All visual references stored in visual-references/:

NotebookLM (6 images):

• notebooklm-01-dashboard.png - Home view with notebook cards and featured content
• notebooklm-02-add-sources-modal.png - Upload modal with drag-drop, Google Drive, and URL options
• notebooklm-03-notebook-view.png - Tri-pane layout: Sources | Chat | Studio panel
• notebooklm-04-chat-with-citations.png - AI response with inline citations and source highlighting
• notebooklm-05-inline-citations-detail.png - Close-up of citation density and formatting
• notebooklm-06-mind-map.png - Visual mind map output with source linking

n8n (7 images):

• n8n-01-template-page.png - Template marketplace with AI agent workflow example
• n8n-02-template-modal.png - Template import modal with cloud/self-host options
• n8n-03-welcome-onboarding.png - Empty state with "Try an AI workflow" cards
• n8n-04-empty-canvas.png - Workflow canvas with dot grid background
• n8n-05-trigger-panel.png - Trigger selection panel (manual, webhook, schedule)
• n8n-06-node-config.png - Node inspector with Input/Parameters/Output split view
• n8n-07-workflow-diagram.png - Connected workflow nodes showing execution flow

Ramp (6 images):

• ramp-01-hero-landing.png - Hero with device mockups, gradient background, yellow CTA
• ramp-02-product-suite-grid.png - "Get to know Ramp" bento grid layout
• ramp-03-bills-ui.png - Bills management with 3-pane document review
• ramp-04-procurement-ui.png - Cart/purchase order with AI questions
• ramp-05-purchase-request.png - Activity feed timeline UI
• ramp-06-feature-cards.png - PO tracking and invoice matching cards

Clay (4 images):

• clay-01-hero-landing.jpg - Hero with 3D sculptures, logo wall, serif headline
• clay-02-workspace-settings.png - AI generation modal with blue action button
• clay-03-sculptor-chat.png - Chat interface with structured AI responses
• clay-04-news-signal.png - Multi-select configuration with preview

Attio (8 images):

• attio-01-landing-with-product.png - Landing page with embedded product UI
• attio-02-companies-table.png - Data table with filters and tags
• attio-03-workflow-runs.png - Automation builder with run history
• attio-04-business-metrics.png - Dashboard with bar and donut charts
• attio-05-deals-pipeline.png - Kanban view with colored stage tags
• attio-06-testimonial.png - Minimal quote design with accent color
• attio-07-automation-diagram.png - Workflow flowchart with node styling
• attio-08-data-model.png - Entity relationship visualization

Generated: January 2026