Pipedrive Marketplace

Overview

Pipedrive Marketplace is a B2B SaaS discovery and integration platform designed with a 'Professional Warmth' aesthetic—combining the credibility of enterprise software with the approachability of consumer-grade design. The visual language uses a vibrant purple primary accent (#6861f2) paired with a confident green secondary (#017737), set against clean white surfaces and soft neutral grays. This creates a sense of trust and forward momentum, inviting users to explore integrations without friction. The brand personality is direct, solution-oriented, and human-centered: the UI celebrates productivity gains and business growth through clear language and purposeful interactions. Voice example: 'Connect your favorite apps or easily find new ones—Marketplace offers apps to automate tasks across your entire revenue lifecycle to boost business growth.'

Colors

The color system is built on a neutral foundation (surface: #ffffff, on-surface: #192435) that ensures legibility and professional presentation across all contexts. Primary (#6861f2) is the signature accent used exclusively for call-to-action buttons ('Try it free', 'Try it out'), interactive focus states, and brand-critical links; it conveys action and forward momentum. Secondary (#017737) is a deep forest green reserved for success states, positive indicators, and secondary CTAs like 'Browse apps'—it reinforces growth and trust. Tertiary (#0070d6) is a bright blue used for informational elements, links, and tertiary actions. The surface stack progresses from #f8f8f8 (surface-dim) through #e9e9e9 (surface-container) to #d7d7d8 (surface-container-highest), enabling subtle depth without dar

Typography

The type system uses Inter exclusively across all scales, chosen for its clarity, neutrality, and strong performance at small sizes. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; Headline-lg (40px, 600 weight) is reserved for section titles and prominent cards; Headline-md (28px, 600 weight) structures subsections; Title-lg (20px, 600 weight) labels cards and feature blocks. Body-lg (18px, 400 weight, 28px line-height) is used for hero copy and prominent descriptions; Body-md (16px, 400 weight, 24px line-height) is the default for paragraph text and card descriptions. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text and form labels; Label-sm (12px, 500 weight, 0.05em tracking) is used for badges, helper text, and metadata.

Layout

The layout uses a 12-column grid with a max-width of 1400px, centered on the viewport with symmetric gutters of 24px. The hero section spans full-width with a soft green background (#c9e8d5) and 80px vertical padding (top and bottom), creating a distinct visual anchor. Content sections below use the full container width with 24px horizontal padding on mobile, scaling to 40px on tablet and 64px on desktop. White-space is semantic: lg spacing (40px) separates major sections; md spacing (24px) separates cards and subsections; sm spacing (12px) separates list items and inline elements. Cards use 24px internal padding with 1px borders in outline-variant (#c9cacb) and a subtle shadow (0 3px 8px rgba(0, 0, 0, 0.15)). The search input in the hero is 960px max-width, centered, with 44px left paddin

Elevation & Depth

Depth is achieved through a restrained shadow system and subtle background color shifts, avoiding heavy drop-shadows that would feel dated. Level 1 (Base): flat surfaces at surface (#ffffff) with no shadow. Level 2 (Standard Card): 1px border in outline-variant (#c9cacb) + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), used for cards, modals, and floating elements. Level 3 (Elevated/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), applied on card-hover and modal overlays. Focus states use a 3px inset box-shadow in primary with 10% opacity (0 0 0 3px rgba(104, 97, 242, 0.1)) to indicate keyboard

Shapes

The design system employs 'Accessible Sharpness'—a balanced approach that favors slight rounding for approachability while maintaining geometric clarity. Buttons use 4px border-radius (DEFAULT), creating a modern, slightly softened rectangle that feels contemporary without appearing playful. Cards and containers use 8px (md), providing visual distinction from buttons while remaining professional. Input fields match buttons at 4px for visual cohesion. Badges and pills use 9999px (full) for a classic, friendly appearance. The rationale: 4px is the minimum radius that reads as intentional on scre

Components

Action Elements Buttons are the primary interaction pattern. Button-primary (40px height, 9px 20px padding, 14px 700-weight Inter, 4px radius, #6861f2 background) is used for primary CTAs ('Try it free', 'Try it out'). On hover, the background shifts to #5a52d5 with a 200ms transition. Button-primary-lg (48px height, 12px 24px padding, 18px font-size) is used in hero sections for maximum prominence. Button-secondary uses a transparent background with a 1px primary-colored border, allowing secondary actions to coexist without visual dominance. Button-ghost is a minimal variant with no border or background, used for tertiary actions like 'Log in'. All buttons include a 44px minimum touch target and use :focus-visible for keyboard navigation.

Containers & Surfaces Cards (8px radius,

Do's and Don'ts

**Do**

• Do use primary (#6861f2) exclusively for primary CTAs and focus states—it's the brand's signature accent and should feel rare and valuable.
• Do maintain 24px gutters on desktop and 12px on mobile to ensure consistent breathing room and readability.
• Do apply 200ms cubic-bezier(0.4, 0, 0.2, 1) transitions to all interactive state changes (hover, focus, active) for smooth, predictable feedback.
• Do use Inter at 16px body-md with 24px line-height as the default paragraph text—it ensures legibility and professional tone.
• Do layer secondary (#017737) and tertiary (#0070d6) for success and informational states, reserving primary for actions only.
• Do include a 44px minimum touch target on all interactive elements to meet WCAG accessibility standards.

**Don't**

• Don't use primary (#6861f2) for backgrounds, borders, or non-interactive text—it should feel like an accent, not a dominant color.
• Don't apply shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.12)—the design system is intentionally flat and modern, not skeuomorphic.
• Don't mix typefaces; Inter is the only font family used across the system. Avoid system-ui, -apple-system, or fallback stacks in component definitions.
• Don't use border-radius values outside the defined scale (sm: 2px, DEFAULT: 4px, md: 8px, lg: 12px, xl: 16px, full: 9999px)—consistency is critical for brand recognition.
• Don't apply color transitions longer than 200ms or shorter than 150ms—slower feels sluggish, faster feels jarring on business software.
• Don't use opacity below 60% for text or interactive elements; it reduces legibility and fails WCAG contrast requirements.