Pipedrive DESIGN.md

Design System Inspiration of Pipedrive

Overview

Visual Theme & Atmosphere

Pipedrive is a sales CRM for small and medium-sized businesses. It began with salespeople in Estonia in 2010 and centres its product on visualising a sales process, managing leads and automating sales work. Its own company page identifies New York as its headquarters. Company

The identity developed with Studio Dumbar in 2022 brought green back as the main brand colour, paired it with purple and yellow, simplified the logo, and added natural workplace photography to the illustration language. The captured homepage makes that combination concrete: a pale green hero, dark green headline, purple actions, product-interface imagery and illustrated resource cards. 2022 brand announcement

The current product direction combines continued investment in the core CRM with an AI-native sales system, beginning with Nova, according to the CEO's October 29, 2026 message. Company update

The measured homepage is the Estonian edition (pipedrive.com/et, HTML lang="et"), rendered at 1440×1000; these measurements describe the public website.

Brand Narrative

The brand announcement connects growth to real customers, workplace photography and upward-moving shapes. This supports an implementation that puts human imagery beside product demonstrations. The current Nova section sits within that public website, while the 2026 company update describes a renewed focus on salespeople and sales teams. Brand announcement, company update

Principles

Implementation principles drawn from the capture: use colour to distinguish brand setting from action hierarchy; retain strong type contrast between the display headline and action labels; and make linked resources respond through both text decoration and imagery. These are reference-building conclusions, not a published list of Pipedrive design principles.

Personas

No persona research was verified; the company's stated product audience is small and medium-sized businesses. Company

Colors

The census contains 1,177 computed root properties, all under --pd-*; 223 have the website-specific --pd-puco-* prefix. One separately captured --ot-* declaration belongs to OneTrust and is excluded. Six cross-origin stylesheet walks were unreadable, so the declaration inventory is incomplete.

Use green for the broad brand setting and purple for the measured primary action. The Nova section supplies a separate yellow action treatment.

Typography

The Estonian homepage HTML preloads WOFF2 files named Inter-Regular, Inter-SemiBold, Inter-Bold and Haffer-Bold from Pipedrive's cdn.syd-1.pipedriveassets.com/www-main-renderer/_next/static/media/ path. This corroborates the serving location; no font binary was downloaded. Substitute: none chosen.

Layout

The desktop capture uses an 88px sticky header. The hero places text and a trial button beside a product-interface composition. The first hero action begins at x48; resource cards also begin at x48. The three resource links have widths of 416.3px and x positions 48, 504 and 961 in the survey.

The website spacing variables are 0, 5, 10, 20, 40 and 80px (--pd-puco-spacing-none/xs/s/m/l/xl). The root max-container-width token is 1600px; the 1440px capture does not demonstrate its behaviour at that maximum. Alternating media/text sections, testimonials, integrations, resource cards and FAQs are visible in the full-page capture.

Responsive Behavior

No mobile viewport was measured. Root website tokens declare mobile h1 32px/700 with 42px line height, h2 30px/38px and h3 28px/36px; these are declared values, not observed breakpoint behaviour. Header tokens distinguish desktop 88px and mobile 72px. The captured card sources name media conditions (max-width: 415px), (max-width: 712px) and (max-width: 1103px); these establish image-source conditions only.

Elevation & Depth

The measured action controls, navigation anchor, search input and card wrapper have box-shadow: none at rest. Product screenshots and photography supply visual layering in the page composition.

The root website variable --pd-puco-elevation-raised-hover is 0px 3px 5px rgba(0,0,0,.08),0px 0px 4px rgba(0,0,0,.12). It was not observed on the selected controls and is not assigned to them.

Motion & Easing

The primary, secondary and Nova actions share the raw computed transition background-color 0.18s ease-in-out 0s. The search declares all 0.32s ease 0s, although this pass observed no authored hover or focus transition there. The navigation anchor and card wrapper report all 0s ease 0s; that does not describe transitions on their ancestors or descendants. No image-transition duration or brand-wide easing curve is inferred from the probe's longest-transition timing.

Components

All six selected controls were found. The state pass closed the consent banner through its “Sulge” button; no overlay-hiding option was used. Pointer measurements count only matched states; focus used a real Tab walk. All six controls had no drawn border and no box shadow at rest.

The card anchor's own computed foreground is #000000, while its visible title and paragraph are #192435; the component token uses the visible ink. The 24px wrapper radius does not establish every descendant's radius.

The search input, labelled “Otsi Pipedrive'ist”, is 44×44px at rest with a computed 100px radius, padding 0px 0px 0px 44px, and #f4f5f6 / #192435. Hover produced no change in the compared scope; pressed was UNMEASURED and keyboard focus added only the browser's auto outline. It is retained here without a component token.

States

Keyboard focus changes the primary, secondary and Nova fills to their respective measured hover colours, with :hover false during the Tab readings; each fill returns after blur. Every selected control also displays an outline-style: auto browser ring. No authored outline token is claimed, and no focus token is emitted for that ring.

For the resource card, image and picture dimensions changed from 0x0 to 416x234 during the focus walk and remained changed after blur. Those changes are excluded from focus styling. The remaining card focus indication is the browser ring. Navigation likewise has only a browser focus ring. Search hover has no change within self, pseudos and three ancestor levels; its unmeasured press is not “no change”.

The compared scope includes self and ::before/::after, descendants and their pseudos, and three ancestor levels with their pseudos. The card comparison includes 12 descendants, three empty nodes and four image/source nodes; action links each include one text descendant. Canvas/video internals, sibling changes and cross-origin frame contents are outside this evidence.

Do's and Don'ts

• Pair a pale green brand surface with the measured purple primary action.
• Keep the 4px general CTA radius separate from the Nova link's measured 40px pill treatment.
• Use #192435 for paragraph ink and the resource card's visible text.
• Reproduce the navigation highlight on its containing item, where it was measured.
• Keep the card's underline and image-scale feedback together.
• Preserve the logo on solid-colour surfaces with clear space; the official press kit prohibits cropping, stretching and pinching. Logo guidance
• Do not turn the browser's auto focus ring into a brand token or infer a pressed state from hover.

Voice & Tone

The measured Estonian actions use direct task labels: “Proovi tasuta”, “Vaata kõiki funktsioone” and “Hinnad”. As an implementation pattern, keep action copy short and name the destination or task. No broader editorial voice specification was verified.

Agent Prompt Guide

“Build a Pipedrive website-style hero with a #d7f9d3 surface, a green display heading using the live-loaded Haffer family, and Inter for body copy and actions. Use the declared desktop h1 metrics of 52px/700/62px. Make the primary action 56px high with a 4px radius, 12px 20px padding and white 22px/700 text; change its #6861f2 fill to #413d99 on hover and press.”

“For a resource link, use the captured 24px wrapper radius and a 22px/700 title in #192435. Underline the title and scale its image to 1.05 on hover and press. Keep the transparent wrapper on a white page.”

These prompts translate the captured website into implementation guidance; they do not describe an authenticated CRM screen.