Booky AI - Blog Design System & Brand Identity
This document serves as the definitive guide for designing the Booky AI Blog. It bridges the gap between our core product's identity and the content-first requirements of a high-end, SEO-driven publication.
🤖 What is Booky AI?
Booky AI is a high-performance, AI-driven receptionist designed to automate the lead-to-booking lifecycle for service-based businesses (Cleaning, HVAC, Plumbing, Clinics, etc.).
- Instant Response: Responds to phone calls, SMS, and web chats in under 5 seconds.
- Autonomous Intelligence: Qualifies leads based on custom business logic and service checklists.
- Seamless Scheduling: Syncs directly with Google Calendar to manage availability without human intervention.
- Financial Integration: Automates invoicing and payment collection via Stripe and Square.
The Mission: To make "scheduling" an invisible background process, allowing business owners to focus on their craft while the AI handles the growth.
🏛️ How We Designed the Main Product
Our design philosophy is rooted in "Radical Simplicity and Premium Intelligence." We moved away from generic SaaS layouts to create an experience that feels alive and high-end.
1. The "Invisible" Interface
We believe the best UI is the one that stays out of the way. Our dashboard uses Glassmorphism and a "Surface over Depth" approach to keep the most critical data (Bookings, Revenue, AI Conversations) at the forefront, while technical configurations remain accessible but non-intrusive.
2. Industry-Centric Modularity
The product is built as a plugin-based architecture. Whether it's a cleaner needing a "Service Checklist" or a clinic needing "Patient Privacy Form" integration, the design system adapts through Modular Component Patterns.
3. High-Latency vs. Visual Speed
While our Voice Module prides itself on sub-second latency, we match this speed visually with smooth transitions, micro-animations, and a "vibrant dark" aesthetic that reduces eye strain for power users.
🎨 Our Design Language (Core Tokens)
The blog should perfectly mirror the core product to maintain brand trust.
1. Color Palette
| Category | Token | Hex/Value | Description |
|---|---|---|---|
| Brand | primary | #1FAA6F | Supabase-inspired green. Trust & Action. |
| Surface | bg-dark | oklch(18.5% 0 0) | Our signature "Deep Space" background. |
| Elevation | bg-card | oklch(20% 0 0) | Slightly elevated Surfaces. |
| Accent | cleaning-services | #14B8A6 | Teal accent for service-specific sections. |
| Glass | glass-bg | rgba(255,255,255,0.03) | For cards and floating navigation. |
2. Typography
- Primary Font:
Montserrat(Weights: 400, 500, 600) - Aesthetic: Geometric, modern, and highly readable.
- Hierarchy: Large, bold headers with tight line-height to convey authority.
✍️ How to Design the Blog Website
The blog is not just an archive of articles; it's an extension of our Intelligence Engine.
1. Visual Strategy
- Text Gradients: Use
-webkit-background-clip: textwith our brand colors for post titles to make them pop. - Animated Backgrounds: Subtle floating orbs or grid lines in the background to prevent the page from feeling static.
- Premium Cards: Blog cards should use the same
translateY(-5px)hover effect and glass borders as our dashboard widgets.
2. SEO & Experience
- Semantic HTML: Mandatory use of
<article>,<section>, and properh1-h4hierarchy. - Micro-Animations: Use
Framer Motionor native CSS transitions for entry animations. - Responsive Fluidity: Design mobile-first. Text should remain legible and images should be optimized (WebP/AVIF).
3. Components to Include
- Smart CTA: A "Book a Demo" card that mirrors our actual booking widget's style.
- Service Accents: Using industry-specific colors (e.g., orange for Home Services) in post tags.
- Glass Navigation: A sticky header with a
backdrop-filter: blur(8px)effect.
This design system is a living document. Every new component should strive to be more invisible and more intelligent than the last.
