Convin AI

Overview

Convin AI is an intelligent contact center platform purpose-built for US home service businesses—HVAC, plumbing, electrical, and similar trades. The design system embodies 'Precision Minimalism': a clean, light-dominant interface with strategic use of electric blue (#1a62f2) as the primary accent, paired with a dark hero section (#060e1f) that establishes authority and technical sophistication. The visual language prioritizes clarity and speed, reflecting the brand's core promise: never miss a lead, qualify instantly, book automatically. The UI evokes trust through generous whitespace (24px gutters, 40px section separation), crisp typography (Satoshi for headlines, Inter for body), and a restrained color palette that lets data and CTAs command attention.

The brand voice is direct, action-oriented, and conversational—never jargon-heavy. Convin speaks to busy business owners in their language: 'Answer every call 24/7. Qualify requests instantly. Book jobs automatically.' The tone is confident but approachable, emphasizing outcomes over features. Example: 'Home Service Businesses Don't Lose Jobs Due to Demand. They Lose Them Due to Delay.' This reflects a problem-first, solution-second philosophy that resonates with the target audience's pain points.

Colors

The color system is anchored by a vibrant electric blue primary (#1a62f2), used exclusively for interactive elements—CTAs, links, focus states, and data highlights. This color appears 84 times across the site, establishing it as the unmistakable brand accent. The secondary accent, a vivid magenta (#dd23bb), provides a supporting highlight for tertiary actions and status indicators, while a soft green (#10b981) signals success states and positive outcomes. The neutral foundation consists of a pure white surface (#ffffff) for main content areas, paired with a sophisticated dark navy (#0d1b2a) reserved for the hero section and high-contrast overlays. The surface stack uses carefully calibrated grays: #f1f5f9 (surface-container-lowest) for subtle backgrounds, #e2e8f0 (surface-container-low) fo

Typography

The type system pairs Satoshi (a geometric, warm sans-serif) for display and headlines with Inter (a neutral, highly legible humanist sans-serif) for body, labels, and UI text. This pairing creates visual hierarchy through personality rather than weight alone: Satoshi's rounded letterforms convey approachability in headlines ('Never Miss a Call, Text, or Request' at 56px, 700 weight, -0.04em tracking), while Inter's precision ensures readability in dense data contexts (body-md at 16px, 400 weight, 24px line-height). Headlines use aggressive negative letter-spacing (-0.02em to -0.04em) to create visual impact and compact the text, while body copy maintains neutral tracking (0em) for optimal legibility. Labels employ 0.01em to 0.08em positive tracking to add visual separation and emphasis. A

Layout

The layout system uses a 12-column grid with a max-width of 1200px, centered with margin: 0 auto. The hero section spans full-width with a dark background (#060e1f) and subtle grid pattern (48px × 48px), establishing visual authority. Content sections below use a 24px gutter (padding: 0 24px on container) and 40px vertical separation (margin: 40px 0) between major sections. The grid adapts responsively: at 991px and below, the layout shifts to single-column or 2-column layouts, with the hero section maintaining its full-width treatment. Cards and content blocks use 24px internal padding ({spacing.md}) with 12px gaps between nested elements. The problem-grid component demonstrates the spacing philosophy: a 4-column grid at desktop (gap: 1px for visual separation), collapsing to 2 columns at

Elevation & Depth

Depth is conveyed through a restrained shadow system and strategic use of background color shifts rather than heavy drop shadows. Level 1 (Base): flat white surface (#ffffff) with no shadow; used for primary content areas and cards in neutral contexts. Level 2 (Elevated): 0 1px 4px rgba(0, 0, 0, 0.1) applied to input fields, secondary cards, and interactive elements at rest; this subtle shadow creates just enough separation to signal interactivity. Level 3 (Hover/Active): 0 3px 8px rgba(0, 0, 0, 0.15) applied on button-hover, card-hover, and modal overlays; the increased blur radius (8px vs 4p

Shapes

The shape philosophy is 'Technical Warmth'—combining sharp, geometric precision with subtle softness to balance authority and approachability. Buttons use 0.5rem (8px) border-radius, creating a slightly rounded square that feels modern without being overly playful. Cards and containers use 1rem (16px) border-radius, providing a softer, more inviting appearance for content blocks. Input fields use 0.75rem (12px) border-radius, sitting between buttons and cards to signal their intermediate role in the hierarchy. The hero section and large content blocks use 1.5rem (24px) border-radius, creating

Components

Action Elements Primary buttons use backgroundColor: {colors.primary} (#1a62f2), textColor: {colors.on-primary} (#ffffff), padding: 10px 24px, height: 44px, and border-radius: 8px. On hover, shift to backgroundColor: #1e40af (a darker blue) and apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to signal elevation. Secondary buttons maintain a transparent background with a 1px border in {colors.primary} and textColor: {colors.on-primary}, creating a ghost-style appearance. On hover, fill the background with {colors.primary-container} (#bfdbfe) and shift textColor to {colors.on-primary-container} (#0d1b2a). All buttons use typography: {typography.label-md} (14px, 600 weight, 0.01em tracking) and transition: all 0.18s for smooth state changes.

Containers & Surfaces Cards use background

Do's and Don'ts

**Do**

• Do use {colors.primary} (#1a62f2) exclusively for primary CTAs, focus states, and active indicators—it's the most recognizable brand element and should never be diluted.
• Do maintain 24px gutters and 40px section separation to ensure content remains scannable and the interface feels spacious, not cramped.
• Do apply transition: all 0.18s to all interactive elements (buttons, cards, inputs) for smooth, predictable state changes that feel responsive.
• Do use the full rounded scale (8px for buttons, 16px for cards, 24px for hero sections) to create visual hierarchy through shape language.
• Do pair Satoshi headlines with Inter body text to establish clear typographic hierarchy—never reverse this pairing.

**Don't**

• Don't use secondary (#dd23bb) or tertiary (#10b981) colors as primary CTAs—they dilute the brand's visual focus and confuse user intent.
• Don't apply box-shadow values larger than 0 3px 8px rgba(0, 0, 0, 0.15)—the design system prioritizes subtle elevation, not dramatic depth.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full)—inconsistent rounding breaks the technical aesthetic.
• Don't set line-height below 1.4 for body text or below 1.2 for headlines—readability and accessibility require adequate vertical space.