Chatbase

Overview

Chatbase is an enterprise AI customer experience platform that transforms complex support workflows into conversational, omnichannel interactions. The design system embodies 'Technical Clarity'—a philosophy that marries sophisticated AI capabilities with intuitive, accessible interfaces. The brand serves enterprises and mid-market businesses seeking to automate customer support at scale while maintaining human-like conversation quality. The visual language is clean, purposeful, and data-driven: a bright cobalt primary (#2563eb) signals actionable intelligence and trust, while a neutral light canvas (white, #ffffff, with grays ranging from #f4f4f5 to #09090b) ensures content clarity and reduces cognitive load during complex agent configuration tasks.

The tone is confident yet approachable, technical but never jargon-heavy. Chatbase speaks to practitioners—support leaders, product managers, developers—with precision and respect for their time. Voice example: 'Your agent resolved 847 tickets this week, reducing response time by 62%. Here's what worked.' The brand avoids breathless marketing language; instead, it grounds claims in measurable outcomes and transparent workflows.

Colors

The color system prioritizes clarity and trust through a structured hierarchy. Primary (#2563eb) is the signature cobalt accent used exclusively for interactive elements—primary CTAs ('Try for Free'), focus states, active navigation, and key data highlights. It appears sparingly but decisively, ensuring every use carries weight. On-primary is pure white (#ffffff) for maximum contrast (WCAG AAA compliant at 16:1 ratio). Primary-container (#eff6ff) provides a soft background for secondary information and disabled states, while on-primary-container (#1e40af) ensures readability over that background.

Secondary (#2c41b3) is a deeper navy used for supporting accents, secondary CTAs, and brand reinforcement in hero sections. Tertiary (#d97706) is a warm amber reserved for status indicators, warn

Typography

The type system uses two distinct font families to create visual hierarchy and emotional resonance. Geist (fontFamily: 'Geist, ui-sans-serif') is reserved for display, headlines, and labels—its geometric precision and slight weight variation (500 weight) convey technical sophistication and forward momentum. Inter (fontFamily: 'Inter, ui-sans-serif') handles body text, supporting copy, and data-dense content, where its neutral letterforms and optical adjustments ensure legibility at 16px (body-md) and 18px (body-lg) across all screen sizes. Display (64px, 500 weight, -0.02em tracking) anchors hero sections with commanding presence; headline-lg (40px, 500 weight) breaks major content sections; headline-md (28px, 500 weight) introduces subsections; title-lg (20px, 600 weight) emphasizes card

Layout

The layout system uses a 12-column fluid grid with a max-width of 1280px, ensuring responsive scaling from mobile (320px) to ultra-wide displays (1920px+). The gutter is consistently 24px (md spacing), creating predictable rhythm across sections. Hero sections span full-width with a 40px (lg spacing) vertical rhythm between major content blocks, while card-based layouts use 24px gaps to create visual breathing room. Container max-width is enforced at 1280px to prevent text lines from exceeding 75 characters, maintaining optimal readability. White-space is treated as a first-class design element: sections are separated by lg spacing (40px), subsections by md spacing (24px), and inline elements by sm spacing (12px). The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is deriv

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids visual heaviness while maintaining clear layer separation. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle card borders and light hover states, md (0 4px 12px rgba(0, 0, 0, 0.08)) for elevated cards, modals, and interactive hover states, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for floating elements like dropdowns and tooltips. Cards at rest use a 1px solid border in outline-variant (#d4d4d8) with sm shadow; on hover, they transition to md shadow and outline (#a1a1aa) over 200ms, creating a su

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used strategically to soften the precision of data-driven interfaces without sacrificing clarity. Buttons and primary interactive elements use lg radius (1rem / 16px), creating a friendly, approachable feel that encourages interaction. Cards and containers use xl radius (1.5rem / 24px) for a more generous, breathing quality that reduces visual tension in dense layouts. Input fields and form elements use DEFAULT radius (0.5rem / 8px), a middle ground that balances friendliness with functional clarity. Badges and small UI elements use

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses primary (#2563eb) background with on-primary (#ffffff) text, 12px vertical / 20px horizontal padding, 44px height, and lg radius (16px). On hover, the background transitions to #1d4ed8 (a darker blue) with md shadow (0 4px 12px rgba(0, 0, 0, 0.08)) over 200ms ease. On active/pressed, the background darkens further to #1e40af with an inset shadow (inset 0 2px 4px rgba(0, 0, 0, 0.1)) to convey tactile feedback. Button-secondary uses surface-container-low (#f4f4f5) background with a 1px outline-variant (#d4d4d8) border, on-surface (#09090b) text, and identical padding/height/radius. On hover, the background shifts to surface-container (#efefef) and the border to outline (#a1a1aa). Button-ghost has a transpare

Do's and Don'ts

**Do**

• Do use primary (#2563eb) exclusively for high-priority CTAs and interactive states—every use should signal importance and invite action.
• Do maintain consistent 24px (md) spacing between major sections and 12px (sm) spacing between related elements to create visual rhythm and reduce cognitive load.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to all text overlaid on busy backgrounds or illustrations to ensure WCAG AAA contrast compliance.
• Do use Geist (500 weight) for headlines and labels to convey technical precision; reserve Inter (400 weight) for body text to maximize readability.
• Do transition all interactive properties (background-color, border-color, box-shadow) over 200ms ease to feel responsive without appearing jarring.

**Don't**

• Don't use secondary (#2c41b3) or tertiary (#d97706) as primary CTAs—they dilute the visual hierarchy and confuse users about action priority.
• Don't apply shadows darker than md (0 4px 12px rgba(0, 0, 0, 0.08)) on light backgrounds; excessive shadow depth creates visual heaviness and reduces clarity.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full)—inconsistent radii fragment the visual language and reduce recognizability.
• Don't set line-height below 1.5x font size for body text; tight line-height reduces readability and increases cognitive load in support documentation.
• Don't mix Geist and Inter within a single headline or label; font mixing should occur only at the section level (headline in Geist, body in Inter) to maintain visual coherence.