Pondering...

Design System Showcase

A comprehensive visual guide to all design tokens, components, and patterns.

Write Learn Code Research
Ask me anything...
macOS
brew install espo-ai |
Foundation

Color Palette

Core color tokens using CSS variables.

Background Colors

Dark --bg-dark #1a1a1a
Dark Alt --bg-dark-alt #121212
Elevated --bg-dark-elevated #242424
White --text-primary #FFFFFF

Accent Colors

Blue --accent-blue #6B9AE8
Blue Deep --accent-blue-deep #4A6BBF
Text Secondary --text-secondary rgba(255,255,255,0.7)
Gradient Stripe .gradient-stripe
Foundation

Typography

Playfair Display for headlines, Inter for body text.

Hero Headline

.text-hero — 64-80px, Playfair Display

Section Headline

.text-section — 40-48px, Playfair Display

Elegant Italic Headline

.headline-elegant — Italic variant

Staggered Headline Style

.headline-staggered — Offset second line

Card Title Heading

.text-card — 24-28px, Inter, weight 500

Body Large text for important paragraphs and descriptions.

.text-body-lg — 18-20px, Inter

Body text for regular content and paragraphs throughout the site.

.text-body — 16px, Inter

Caption text for labels and metadata.

.text-caption — 14px, Inter

const example = "code";

.text-code — 14px, JetBrains Mono

Foundation

Spacing Scale

Consistent spacing based on 4px increments.

--space-xs (4px)
--space-sm (8px)
--space-md (16px)
--space-lg (24px)
--space-xl (32px)
--space-2xl (48px)
--space-3xl (64px)
--space-4xl (96px)
--space-5xl (128px)
Components

Cards

Card components for various content types.

Pricing

Individual Team & Enterprise API

Individual

The Living Website

$97

Per month after one-time setup

Get Started
  • Single-page Bento Grid style website
  • AI-powered weekly content updates
  • Clean code hosted on Cloudflare
  • LinkedIn and industry news scanning
  • You own your website and data
  • Perfect for solopreneurs and agents

Team

Marketing Department in a Box

$2,500

Per month plus 15% ad management fee. One-time setup starting at $5,000.

Schedule Call

Everything in Individual, plus:

  • Full custom multi-page website
  • GoHighLevel CRM integration
  • Espo Dashboard with AI chat interface
  • Professional video editing included
  • Transparent ad management
  • Lead nurture automation agents
  • Team collaboration portal
  • Month-to-month, cancel anytime
  • Perfect for teams of 3-15 agents

Franchise

The Master Node

Custom

Enterprise pricing with per-location licensing

Contact Sales

Everything in Team, plus:

  • Master branch system for HQ control
  • Fork-and-deploy for new locations
  • Centralized brand management
  • Multi-location analytics dashboard
  • Perfect for gyms, wellness, and multi-location brands

Setup fees vary by scope. All plans include ownership of your assets.

Resource Cards

Getting Started Guide

Learn the fundamentals and get up and running quickly with our comprehensive introduction.

Documentation

Build your first AI agent

Step-by-step walkthrough to create an intelligent agent from scratch.

Tutorial

API Reference

Complete API documentation with endpoints, parameters, and examples.

API Docs

Feature Cards

Extended Thinking

Deep reasoning for complex problems.

Learn more

Code Generation

Generate and refactor code.

Learn more

Multi-modal

Process images and documents.

Learn more
Components

FAQ Accordion

Expandable FAQ items (shown in open/closed states).

What is Espo.ai? +
How does extended thinking work? +

Extended thinking gives additional time to reason through complex problems before responding.

Is my data secure? +
Components

Testimonials

Customer quotes in two-column layout.

This has transformed how our team approaches complex problems.

Sarah Chen, VP of Engineering

40% reduction in time spent on documentation and code review.

Marcus Rodriguez, CTO

Components

Logo Grid

Trust badges and partner logos.

Components

Feature Demo

Feature showcase section with tabbed terminal demo and feature highlights.

What could you do with
Espo.ai?

Get Started
Schedule a demo espo.ai/demo | today

Or explore case studies

Site Audit Content Lead Nurture
>Analyze my current website and tell me what's wrong.
● I'll scan your website and provide a comprehensive audit report.
● Analyze(url: "luxuryrealty.com", focus: "performance, SEO, AI-readiness, code quality, mobile experience")

Your WordPress/Elementor site has significant "bloat" that's hurting performance and confusing AI agents. Here's what I found:

## Critical Issues
Page load time: 6.2s (should be under 2s)
Mobile score: 34/100 (losing leads)
23 unused plugins adding overhead
No structured data for property listings
## Recommendations

Migration to clean code architecture would provide:

1. Performance Gains
Sub-1-second load times on Cloudflare
AI-readable structure for better search visibility
Living content that updates automatically

Site Analysis

Our "Roast Master" agent scans your current website in seconds, analyzing code quality, performance, and AI-readiness. Get a brutally honest report that shows exactly where you're losing leads.

Content Automation

Stop creating content manually. Espo agents scan your LinkedIn, industry news, and market data weekly, then propose fresh updates via your Espo Dashboard—keeping your site alive and relevant.

Lead Conversion

Our "Gatekeeper" agent qualifies visitors through conversation, routes high-value leads to your calendar, and auto-sells entry-level services—all while you focus on closing deals.

Components

CTA + Newsletter

Two-column layout with call-to-action and newsletter signup.

Focus on clients.
We handle the marketing.

Transform your business with intelligent automation

Schedule Demo
Book a call espo.ai/schedule

Or explore our case studies

New Containers

Hero Two-Column

Two-column hero with text content on left, visual/illustration on right.

Meet your
AI marketing team

Transform your business with systems that work around the clock.

See the Listing Launchpad in action

New Containers

Problem Solvers Section

Centered header with download buttons and two-column feature/visualization layout.

The AI for service businesses

Real Estate Home Services Franchises

Automate your marketing

Espo builds campaigns, manages ads, and nurtures leads while you focus on closing deals and serving clients.

Scale your operations

From listing videos to lead follow-up, your AI team handles the heavy lifting—24/7, without burnout or vacation time.

Own everything

Unlike other agencies, you own your website, data, and ad accounts. No lock-in, no hostage situations—just results.

Your Business
Living Website SEO AI Content Performance Lead Nurture CRM Follow-up Video Production Listings Ad Management Meta Ads Analytics Reports
New Containers

Use Case Tabs Section

Tabbed interface with colored content panels showing prompts and artifacts.

How Espo.ai works for you

Prompt

Design a comprehensive study guide with summaries, practice questions, and memory aids from my course materials.

Attachments

Study notes 4 MB DOC
Psych 101 Syllabus 1.2 PDF

Psychology 101 comprehensive study guide

Table of contents

  • Course overview
  • Lecture 1: What is psychology?
  • Lecture 2: Research methods
  • Practice questions
  • Study strategies

Course overview

Meeting times: MWF 10:10-11:00 AM, Lab Tuesdays 2:00-4:50 PM

Office hours: Tuesdays 1-3 PM, Thursdays 11 AM-1 PM

Key dates to remember

  • February 21: Midterm exam 1
  • March 7: Article critique due
  • April 4: Midterm exam 2

Prompt

Help me refactor this authentication module to use JWT tokens and add proper error handling.

Attachments

auth.js 12 KB JS

Refactored Authentication Module

Key Changes

  • Added JWT token generation and verification
  • Implemented proper error handling with custom error classes
  • Added token refresh mechanism
  • Improved security with httpOnly cookies

Implementation

The new authentication flow uses access tokens (15 min expiry) and refresh tokens (7 day expiry) for improved security.

Prompt

Research the latest developments in renewable energy storage and summarize the key findings.

Renewable Energy Storage: 2024 Overview

Key Technologies

  • Solid-state batteries showing 40% improvement in energy density
  • Flow batteries gaining traction for grid-scale storage
  • Green hydrogen production costs down 30%

Market Trends

Global energy storage deployments expected to reach 500 GWh annually by 2030.

Prompt

Create an interactive Gantt chart showing a complex business initiative rollout across different enterprise departments.

Attachments

QBI Timeline 727 KB XLSX
Department Project Phases 55 LINES CSV

Project Timeline Visualization

Departments Overview

  • Data Analysis: Weeks 1-4
  • Product Management: Weeks 2-6
  • HR: Weeks 3-7
  • Sales: Weeks 4-10

Interactive chart would display here with hover states and clickable elements.

NOTE

Interact with the data—hover and toggle views to uncover patterns

Prompt

Write a compelling product announcement blog post for our new AI-powered feature.

Introducing Smart Insights: AI That Works For You

We're excited to announce the launch of Smart Insights, our most advanced AI feature yet. This groundbreaking technology transforms how you interact with your data.

Key Benefits

  • Real-time analysis of complex datasets
  • Natural language queries for instant answers
  • Automated report generation
  • Predictive analytics at your fingertips

Learn

Learn anything through conversation. Upload docs or images for deeper insights or create visual study aids with artifacts. Voice makes complex topics easier to digest, while projects keep your learning organized.

New Containers

Video Section

Video embed with play overlay, tagline row, and CTA bar.

See your AI team in action

Video thumbnail

Your marketing never sleeps

From iPhone photos to professional listings in 24 hours. No agency overhead, no waiting weeks for deliverables.

Ready to transform your marketing?

New Containers

Models Section

Stacked model cards with two-column layout.

Espo.ai products

Listing Launchpad

iPhone photos to professional video in 24 hours—no monthly commitment

AI video production Landing page Meta ads launch
$500 flat fee

Living Website

AI-maintained site that never goes stale—perfect for solopreneurs

Bento Grid design Weekly AI updates You own everything
From $97/mo

Espo Dashboard

Your AI command center—chat with agents that manage your marketing

Team chat interface Lead management Performance analytics
Included with Team
Components

Section Dividers

Multiple variations for creating visual separation between content sections.

Divider Variations

Gray Line
Gray Glow
Gradient Full
Gradient Fade
Gradient Glow
Short Line
Dots

Background Alternation

.section — Default
.section-alt — Lighter
.section-elevated — Card-level
.section-surface — Surface
Components

Alerts & Notices

Contextual feedback messages for user actions and system states.

Alert Variants

Information
This is an informational alert — check it out!
Success
Your changes have been saved successfully.
Warning
Your session is about to expire. Please save your work.
Error
Something went wrong. Please try again later.
Components

Badges & Tags

Small labels for status indicators, categories, and metadata.

Badge Variants

Default Primary Success Warning Error

Solid Badges

Primary Success

Badges with Dot Indicator

Active Online Pending Offline

Interactive Tags

Design Development Marketing Analytics AI/ML Security
Components

Callout Boxes

Highlighted content blocks for tips, notes, warnings, and important information.

Callout Variants

Note

This is a note callout. Use it to highlight important information that users should be aware of.

Pro Tip

Use keyboard shortcuts to speed up your workflow. Press Cmd+K to open the command palette.

Warning

This action cannot be undone. Please make sure you have a backup before proceeding.

Danger

Deleting your account will permanently remove all your data. This action is irreversible.

Featured Callout (Gradient Border)

Featured Announcement

This callout has a gradient border that intensifies on hover. Perfect for highlighting important announcements or premium features.

Components

Blockquotes

Styled quotations for testimonials, citations, and highlighted text.

Basic Blockquote

The best way to predict the future is to invent it.

— Alan Kay, Computer Scientist

Gradient Accent Blockquote

Design is not just what it looks like and feels like. Design is how it works.

— Steve Jobs, Apple Co-founder

Featured Blockquote

Simplicity is the ultimate sophistication.

— Leonardo da Vinci

Testimonial Cards

"This design system has completely transformed how we build products. The consistency and attention to detail is remarkable."
JD
Jane Doe Product Designer at Acme
"The dark theme is stunning. It's easy on the eyes during long coding sessions and the gradient accents add just the right amount of personality."
MS
Mike Smith Senior Developer

Chat Interface

Espo AI Assistant

A floating AI chat widget that connects to your N8N agent via webhook. Features page-aware prompts, session management, HTML response rendering, and beautiful animations.

E
Espo
Online
E
Hi, I'm Espo!
Your AI assistant. How can I help you today?

Conversation Example

The chat supports rich HTML responses including formatted text, lists, code blocks with copy buttons, and links.

E
Espo
Online
What AI solutions do you offer?
E

We offer a comprehensive suite of AI-powered solutions:

  • AI Content Generation - Blog posts, social media, email campaigns
  • Marketing Automation - Intelligent workflows
  • Predictive Analytics - Data-driven insights
  • Custom Chatbots - Like me!

Would you like me to dive deeper into any of these?

Show me a code example
E

Here's an example of our automation:

const campaign = new EspoCampaign({
  trigger: 'cart_abandoned',
  delay: '2 hours',
  personalization: true
});

This type of automation achieves 40% higher conversions.

Thinking State

The thinking indicator shows animated dots and rotating status messages like "Processing...", "Synthesizing insights...", etc.

E
Synthesizing insights...

Integration

Add the chat to any page with custom prompts per section. The widget sends rich context to your N8N agent.

<!-- Add to your page -->
<div id="espo-chat"
     data-webhook-url="YOUR_N8N_WEBHOOK_URL"
     data-chat-section="pricing"
     data-prompts='[
       "Compare your pricing tiers",
       "What is included in Pro?",
       "Do you offer custom pricing?"
     ]'>
</div>

<!-- Include required scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.6/purify.min.js"></script>
<script src="espo-chat.js"></script>