Light interfaceMeasured www.pipedrive.com

Pipedrive

Friendly and energetic, built around a bold purple button and a cheerful green accent.

This page is styled with Pipedrive’s own measured values. It is a private reference for AltLeads; their logo, brand and company-only fonts belong to them.

Colours

Each role is a value read from their live website, checked against their screenshots.

Background#FFFFFF
Page behind everything

Surface#F4F5F6
Cards, panels, menus

Text#192435
Headings and body

Muted text#192435
Secondary info

Line#D7F9D3
Dividers and outlines

Accent#6861F2
Main button, links, selection

On accent#FFFFFF
Text on the accent

Contrast

Text on background 15.6:1Muted on background 15.6:1Text on accent 4.6:1

Every colour found on their site

#192435#0000EE#FFFFFF#000000#017737#D7F9D3#6861F2#413D99#F4F5F6#E1E1FF

Typography

Headings use Haffer (company-only; shown here with the free look-alike Inter Tight). Body text uses Inter (free).

h1	Haffer · 52px · 700	The easy and effective CRM for closing deals
h2	Inter · 36px · 700	Chat with Nora, our AI Sales Advisor
h3	Inter · 30px · 700	Save hours with automated lead nurturing
p	Inter · 14px · 400	Meet Pipedrive Nova: Our new built-in meeting intelligence t
li	Inter · 16px · 600	Features

Corners & shadows

Corner sizes used

4px

24px

pill

50px

8px

Shadows

Shadow 1

Shadow 2

Shadow 3

Components, rebuilt from their values

Live and clickable. Built by us from the numbers above, not copied from their code. Sample CRM data.

Buttons

Navigation

WorkspaceCompanies Contacts Meetings

Disposition

InterestedCallbackBengaluru

Hide do-not-call

Next call

Licious · Admin head

Wants a proposal before the cafeteria contract renews in March.

Tabs

Table

Company	Owner	Status	Last touch
Zomato Food tech · Gurugram	PR	Callback	18 days ago
Licious Food tech · Bengaluru	RM	Interested	Today
Delhivery Logistics · Gurugram	AS	No answer	35 days ago

Toast

Call logged · callback on Friday

Real components from their site

Cropped from Pipedrive’s live website. Click to enlarge.

Buttons · 2

Pipedrive button: Try it free — #6861F2 · corners 4px · 42px

Pipedrive button: Contact sales — #E1E1FF · corners 4px · 56px

Navigation bar · 1

Pipedrive Navigation bar: Meet Pipedrive Nova: Our new built-in me — fill #FFFFFF · square · Inter 16px

Buttons · 6

Pipedrive Buttons: Try it free — fill #6861F2 · corners 4px · Inter 18px

Pipedrive Buttons: Contact sales — fill #E1E1FF · corners 4px · Inter 22px

Pipedrive Buttons: See all features — fill #E1E1FF · corners 4px · Inter 18px

Pipedrive Buttons: Find out more — fill #E1E1FF · corners 40px · Inter 22px

Tags and badges · 1

Pipedrive Tags and badges: NEW — fill #0070D6 · corners 12px · Inter 14px

Lists and tables · 1

Pipedrive Lists and tables: Get instant answers — no fill · square · Inter 16px

Icons

14 icons copied exactly from their site’s code.

Product screens

10 real screens from web image search, each linked to where it was found.

Pipedrive product screen: 2560 × 1904 — 2560 × 1904

Pipedrive product screen: 1440 × 684 — 1440 × 684

Pipedrive product screen: 1262 × 606 — 1262 × 606

Pipedrive product screen: 2400 × 1256 — 2400 × 1256

Pipedrive product screen: 1999 × 682 — 1999 × 682

Pipedrive product screen: 5988 × 3612 — 5988 × 3612

Pipedrive product screen: 1889 × 854 — 1889 × 854

Pipedrive product screen: 1024 × 544 — 1024 × 544

Pipedrive product screen: 624 × 348 — 624 × 348

Pipedrive product screen: 2610 × 1456 — 2610 × 1456

Do & don’t

What makes it Pipedrive

Punchy purple primary buttons with soft green backdrops
Pipeline boards made of simple rounded cards
Bold, friendly headline type in deep green

Use one strong purple for the main call-to-action
Pair it with light green or lavender backgrounds
Keep corners nicely rounded (4-24px)

Don’t

Don't mix in extra accent colours
Don't use sharp, square corners
Don't make the UI feel corporate or cold

For AltLeads: Borrow the bold single-colour action button so reps always know the one next step to take.

Copy the tokens

Paste into any project to try this look.

/* Pipedrive · values measured from https://www.pipedrive.com/ · reference only, their brand belongs to them */
:root {
  --bg: #FFFFFF;
  --surface: #F4F5F6;
  --text: #192435;
  --muted: #192435;
  --line: #D7F9D3;
  --accent: #6861F2;
  --on-accent: #FFFFFF;
  --radius-button: 4px;
  --radius-card: 8px;
  --radius-small: 4px;
  --button-height: 42px;
  --font-heading: "Haffer", "Inter Tight", system-ui, sans-serif;
  --font-body: "Inter", "Inter", system-ui, sans-serif;
  --shadow: rgba(0, 0, 0, 0.08) 0px 3px 5px 0px, rgba(0, 0, 0, 0.12) 0px 0px 4px 0px;
}