Pipedrive DESIGN.md

Sales-driven CRM with a pipeline-first visual language — bold greens, clean data tables, and action-oriented UI.

1. Visual Theme & Atmosphere

Pipedrive projects confidence and momentum. The interface is built around the sales pipeline metaphor: columns, cards, and clear progression. The aesthetic is professional yet approachable, using strong greens to convey growth and forward motion. UI density is moderate — enough data to act on, enough whitespace to breathe.

2. Color Palette & Roles

3. Typography Rules

css--font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
--font-size-xs: 11px;
--font-size-sm: 13px;
--font-size-base: 14px;
--font-size-md: 16px;
--font-size-lg: 20px;
--font-size-xl: 24px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-base: 1.5;

4. Component Stylings

css/* Primary CTA Button */
.button-primary {
  background: #25B85D;
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.button-primary:hover { background: #1D9148; }

/* Pipeline Stage Card */
.deal-card {
  background: #FFFFFF;
  border: 1px solid #E8E8E8;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}
.deal-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }

/* Stage Column Header */
.pipeline-column-header {
  background: #F5F5F5;
  border-radius: 4px 4px 0 0;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #4A4A4A;
  border-bottom: 2px solid #25B85D;
}

/* Badge / Tag */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  background: #E6F9EE;
  color: #1D9148;
}

/* Input */
.input {
  border: 1px solid #D0D0D0;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  color: #1A1A1A;
  transition: border-color 0.15s;
}
.input:focus {
  outline: none;
  border-color: #25B85D;
  box-shadow: 0 0 0 3px rgba(37,184,93,0.15);
}

5. Layout Principles

6. Depth & Elevation

css.shadow-card { box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.shadow-dropdown { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.shadow-modal { box-shadow: 0 8px 32px rgba(0,0,0,0.16); }

7. Do's and Don'ts

Do:

• Use green only for positive pipeline actions and CTAs
• Keep the pipeline view as the primary navigation metaphor
• Show deal value prominently on cards
• Use stage counts and conversion rates in column headers

Don't:

• Don't clutter cards with more than 3–4 data points
• Don't use red for anything other than lost/danger states
• Don't break the left-to-right pipeline flow for anything

8. Responsive Behavior

9. Agent Prompt Guide

You are designing for Pipedrive — a CRM built around the sales pipeline.
Use bold green (#25B85D) for all primary CTAs and active states.
Keep the pipeline board metaphor central: columns represent stages, cards represent deals.
Typography is Inter at 14px base, 600 weight for headers.
Cards are white with subtle borders; hover reveals a soft shadow.
Inputs use green focus rings. Badges are pill-shaped with light green fill.
The tone is confident, data-rich, and action-forward.