Blits.ai Design System
Complete visual and interaction guidelines for building consistent, scalable web applications and tools
Color System
Core color palette defining our brand identity and user interface
Primary Colors
Primary Purple
#8743ff
Primary brand color
Secondary Blue
#061551
Dark accent color
Tertiary Light Blue
#f2f7ff
Section backgrounds
Quaternary Purple
#5933AA
Secondary purple
Semantic Colors
Success
#00a63e
Warning
#ea580c
Error
#dc2626
Info
#2563eb
Gray
#767676
Extended Palette
#f9fafb
Gray 50
#f3f4f6
Gray 100
#e5e7eb
Gray 200
#d1d5db
Gray 300
#9ca3af
Gray 400
#4b5563
Gray 600
Gradient System
Primary gradients used throughout the design system
Important Usage Rule:
Only use bg-gradient for hero sections and full-width backgrounds. For all other elements (buttons, cards, icons, pills), always use bg-gradient-small.
Primary Gradient (bg-gradient)
linear-gradient(283deg, #8743ff, #5516c6)
Full-width backgrounds only - Hero sections, large backgrounds
Small Gradient (bg-gradient-small)
Same gradient variant for smaller elements
Components & cards - Buttons, cards, icons, highlights
Text Gradient (text-gradient)
from-purple-900 via-purple-500 to-quaternary bg-clip-text
Typography decorations - Hero headings, decorative text
Gradient Usage Guidelines
Use bg-gradient for:
- Hero section backgrounds
- Full-width page backgrounds
- Large container backgrounds
- CTA sections with full width
Use bg-gradient-small for:
- Button backgrounds
- Card backgrounds
- Icon containers
- Small highlights and accents
Use text-gradient for:
- Hero headings
- Section headings
- Decorative text elements
- Brand name displays
Typography
Font families, sizes, and text styles
Font Families
Raleway
Primary font for headings and body text
Rubik
Numbers and metrics font
JetBrains Mono / Fira Code
Monospace font for code
// API Configuration
const config = {
apiUrl: 'https://api.blits.ai',
timeout: 5000,
retries: 3
};Text Styles
text-5xl md:text-6xl font-bold
text-4xl md:text-5xl font-bold
text-3xl font-bold
text-2xl font-bold
text-gray leading-relaxed
Typography Guidelines
Headings Rules
- ×Avoid uppercase headings
Use sentence case or title case instead of ALL CAPS - ✓Use proper hierarchy
H1 for main page titles, H2 for sections, etc. - ✓Maintain consistency
Use same heading styles across similar sections
Text Formatting Guidelines
- !Examples of good headings:
• "AI powered solutions"
• "Customer Experience Platform"
• "Ready to get started?" - ×Avoid these patterns:
• "GET STARTED TODAY"
• "OUR SOLUTIONS"
• "WHY CHOOSE US"
Image Elements
Image layouts, galleries, and visual components for product showcases and content
Image Card Layout
Dashboard Interface
Intuitive dashboard design showcasing real-time analytics and AI performance metrics for enterprise users.
AI Chat Interface
Modern conversation interface with natural language processing capabilities and real-time responses.
Hero Image Layout
Visualize Your Success
Discover how leading companies use Blits.ai to revolutionize customer interactions and drive measurable business growth.
Image with Text Overlay
Enterprise Architecture
Scalable cloud infrastructure designed to handle millions of conversations with enterprise-grade security and reliability.
Image Usage Guidelines
Best Practices
- High Quality: Use images with appropriate resolution (minimum 1920x1080 for hero images)
- Optimization: Compress images for web to maintain fast loading speeds
- Accessibility: Always include alt text for screen readers and accessibility
- Brand Consistency: Maintain inconsistent styling and color schemes
Technical Specs
Icons
Icon system and usage guidelines
Icon Guidelines
Size Guidelines
Icon Selection Rule:
Don't limit yourself to the icons shown below. Use any icon from Heroicons, Lucide, or other icon libraries that better communicate your specific message.
Common Icons
AI & Machine Learning Icons
Security & Privacy Icons
Bot & Automation Icons
3D Avatar & Media Icons
Accordion Components
Expandable content sections for FAQs, features, and detailed information
Standard Accordion
Security Features Accordion
Compliance & Trust Accordion
Accordion Usage Guidelines
When to Use
- FAQ sections and help content
- Feature explanations
- Detailed product specifications
- Compliance and security information
Implementation Notes
- Use clear, actionable questions as headers
- Keep answers concise but informative
- Allow multiple items to be open
- Use icons to enhance visual hierarchy
Hero Section Variants
Different hero layouts and compositions for landing pages and key sections
Trust & Industry Recognition Hero
Trusted by Leading Organizations
Our commitment to security and compliance has earned the trust of Fortune 500 companies, government agencies, and regulated industries worldwide.
Implementation Details
Layout Structure
- Two-column grid layout (md:grid-cols-2)
- Gradient background: from-primary to-secondary
- Industry pills with backdrop-blur effect
Key Features
- Statistics with Rubik font for numbers
- Flexible pill system for industries
- High contrast white text on gradient
Spacing & Layout
Consistent spacing system and responsive layout guidelines
Spacing Scale
Layout Guidelines
Container Max Width
All main content should be contained within this width for optimal readability and layout consistency.
Section Padding
Standard vertical padding for main sections to provide breathing room between content blocks.
Components
Reusable UI components and their variations
Card Variations
Basic Cards (No Images)
Enterprise-grade reliability
Cards with Visual Elements
AI Dashboard
Visual analytics and performance metrics in real-time.
Enterprise Security
SOC2 certified with end-to-end encryption
Pricing Cards
Basic
Perfect for getting started
- Up to 5 active bots
- 10K monthly conversations
- Email support
- Basic analytics
Pro
Ideal for growing businesses
- Up to 25 active bots
- 100K monthly conversations
- Priority support
- Advanced analytics & API
- Custom integrations
Business
For scaling organizations
- Unlimited active bots
- 500K monthly conversations
- 24/7 dedicated support
- White-label solution
- SSO & enterprise security
Enterprise
Custom enterprise solutions
Contact us for pricing
- Everything in Business
- On-premise deployment
- Custom development
- SLA guarantees
Form Elements
Input Fields
Validation States
✓ Valid Input
Email format is valid
✗ Error Input
Please enter a valid email address
⚠ Warning Input
Password must be at least 8 characters
KPI & Stats Elements
Light Background
Customer satisfaction scores increased
Lower cost per interaction
Accelerated time-to-market
Higher lead-to-customer conversion
Dark Background (On Dark Sections)
Reliability guarantee
Security monitoring
Companies using platform
Built-in protections
Testimonial Elements
"Blits secret sauce is the ability to reuse bots for our brand launches in every country we imagine"
Multinational FMCG
"This really helps us to stay in control, while scaling our use-cases across all our business units"
Retail
"I wish we came across Blits years ago. We spent over 5 million developing less than half the functionality"
Multinational Bank
"This really helps us to stay in control, while scaling our use-cases across all our business units"
Leading Outsourcing Company
Feature Section Examples
Our Promise Section
OUR PROMISE
Building the future of conversational AI with enterprise-grade solutions
Any type of use-case
No more switching between platforms when needs broaden. From Marketing to Legal, Finance to IT - we've got you covered.
Future proof
Keep up with multiple Conversational and Generative AI vendors in each of your bots. Stay ahead with the latest :
Generative AI under Control
Use the latest Generative AI whilst keeping control of the end user experience. Enterprise-grade security and compliance.
Supported Channels Section
SUPPORTED CHANNELS
We integrate with all aspects of your digital ecosystem to create a seamless interaction experience across every touchpoint.
Web & Chat
Website, Facebook, Teams, Slack
Voice
Google Assistant, Alexa, Call Centers
Mobile
WhatsApp, SMS, Text
Automated AI Email Responses
Digital Humans
AI-powered avatars with voice & video
AI Agents & LLMs
OpenAI, Google, Azure, Custom Models
Need more?
Use our extended API to connect your custom channel.
Integrate with Any System Section
INTEGRATE WITH ANY SYSTEM
Connect to any system, platform, or custom solution via our comprehensive REST and WebSocket APIs
Flexible Integration Options
REST API
Standard HTTP endpoints for easy integration with any system or platform
WebSocket API
Real-time bidirectional communication for instant responses and live updates
Custom Connectors
Pre-built connectors for popular platforms like SAP, Salesforce, and ServiceNow
Integration Examples
Deployment Options Section
DEPLOYMENT OPTIONS
Choose the deployment model that best fits your security, compliance, and operational requirements
Managed Service
We handle everything for you. From infrastructure to maintenance, updates to monitoring - you focus on your business while we manage the technology.
- Fully managed infrastructure
- 24/7 monitoring & support
- Automatic updates & scaling
- SLA guarantees
Run on Your Cloud
Deploy on your preferred cloud provider (AWS, Azure, GCP) with full control over your infrastructure while leveraging our platform capabilities.
- Deploy on AWS, Azure, GCP
- Full infrastructure control
- Custom networking & security
- Hybrid cloud support
Run On-Premise
Complete data sovereignty with on-premise deployment. Perfect for highly regulated industries requiring maximum control and compliance.
- Complete data sovereignty
- Air-gapped deployment
- Custom security policies
- Regulatory compliance
Logo Carousel
JavaScript-powered smooth scrolling with real company logos
Clean design without backgrounds, using SVGs and PNGs for crisp logos. Smooth continuous animation with pause on hover.
CTA Hero Elements
Ready to Transform Your Customer Experience?
Join 500+ enterprise companies already using Blits.ai to build, deploy, and scale AI-powered conversational experiences.
Pills & Badges Usage
Technology Pills
Use for technology tags. Light gray background, normal case text.
Industry Pills
Use for industry categories. Larger padding with backdrop blur effect.
LLM Content Guidelines
Specific instructions for AI assistants writing content for Blits.ai
Content Rules
Text Guidelines
Instead of "AI powered" use "AI powered" or "powered by AI"
Instead of "✅ Yes" use "Yes" or "Correct"
Use clean text lists or numbered lists instead
Style Guidelines
Professional tone without unnecessary jargon
Use uniform terminology across all content
Highlight what users achieve, not just what features do