Drift DESIGN.md

Conversational marketing design with bold teal identity, chat-first surfaces, real-time engagement UX, and pipeline-focused messaging.

1. Visual Theme & Atmosphere

Drift should feel immediate, personal, and revenue-focused. The design language communicates live chat, AI chatbots, meeting booking, and pipeline acceleration through real-time buyer conversations.

• Mood: immediate, conversational, energetic, revenue-driven
• Density: medium, with conversation views, bot builders, and pipeline dashboards
• Character: bold teal brand, dark widget surfaces, clean messenger panels, pipeline green accents

2. Color Palette & Roles

Teal is the signature identity element — use it for the chat widget and primary CTAs. Never dilute by using in secondary contexts.

3. Typography Rules

css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: "SF Mono", Menlo, monospace;

4. Component Stylings

css.button-primary {
  min-height: 40px;
  padding: 0 18px;
  border: none;
  border-radius: 8px;
  background: #00C4CC;
  color: #0B1B2B;
  font: 700 14px/1 Inter, sans-serif;
}

.chat-bubble-bot {
  border-radius: 18px 18px 18px 4px;
  background: #1A2D40;
  color: #FFFFFF;
  padding: 12px 16px;
  max-width: 280px;
}

.chat-bubble-user {
  border-radius: 18px 18px 4px 18px;
  background: #00C4CC;
  color: #0B1B2B;
  padding: 12px 16px;
  max-width: 280px;
}

.conversation-row {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #E2E8F0;
  cursor: pointer;
}

5. Layout Principles

The chat widget is always bottom-right anchored. Conversation list on the left, active conversation in the center, contact context on the right.

6. Depth & Elevation

css.shadow-widget  { box-shadow: 0 8px 32px rgba(0, 196, 204, 0.20), 0 2px 8px rgba(11, 27, 43, 0.16); }
.shadow-card    { box-shadow: 0 1px 4px rgba(26, 32, 44, 0.06); }
.shadow-modal   { box-shadow: 0 20px 50px rgba(26, 32, 44, 0.16); }

The chat widget deserves a prominent shadow with a teal-tinted glow — it must feel like it's floating above the page.

7. Do's and Don'ts

Do make the chat widget immediately recognizable by its teal identity. Do show online/offline status clearly in conversation headers. Do surface pipeline impact (meetings booked, revenue influenced) on the dashboard. Do not use teal for both the brand and generic success states. Do not bury meeting booking behind multiple steps.

8. Responsive Behavior

The chat widget itself must work flawlessly at every screen size.

9. Agent Prompt Guide

Design like Drift: bold teal chat widget, dark conversation surfaces, pipeline-focused dashboards, floating widget shadow, bot-builder simplicity, and real-time conversational hierarchy.