PipelinePro

PipelinePro mockup preview
Click to expand

PipelinePro is a design system engineered for CRM and sales pipeline management tools where deals flow through stages and every interaction counts. The design language is bold and structured — strong indigo anchors convey authority, while cyan and orange accents highlight motion and urgency across kanban boards, tables, and deal cards. Standard density with a compact 4px base keeps layouts tight enough for data-rich views yet readable enough for extended use. Built for sales teams who think in funnels, stages, and close rates.

Primary#4F46E5
Secondary#06B6D4
Tertiary#F97316
Background#FAFAFA
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplayOutfit · 52px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

HeadlineOutfit · 38px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

SubheadOutfit · 26px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body LargeInter · 18px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

BodyInter · 15px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body SmallInter · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CaptionInter · 12px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

OverlineInter · 11px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CodeSource Code Pro · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Corner Radius

0px
4px
8px
12px
20px
9999px

Spacing

Base: 4px
0px
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px

PipelinePro is a design system engineered for CRM and sales pipeline management tools where deals flow through stages and every interaction counts. The design language is bold and structured — strong indigo anchors convey authority, while cyan and orange accents highlight motion and urgency across kanban boards, tables, and deal cards. Standard density with a compact 4px base keeps layouts tight enough for data-rich views yet readable enough for extended use. Built for sales teams who think in funnels, stages, and close rates.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

Filter ChipSelectedHoverWonAt RiskLost

Elevation & Depth

Subtle
Medium
Large
Overlay
Drag

Do's & Don'ts

Do

use pipeline stage colors consistently across kanban boards, tables, and reports
visually distinguish deal card states — use left border color to encode stage at a glance
highlight overdue tasks and stale deals with the tertiary orange, never with red
show deal count and total value in every pipeline stage header

Don't

use more than four pipeline stages visible simultaneously without horizontal scrolling
display monetary values without proper currency formatting and locale awareness
animate deal card transitions longer than 200ms — speed conveys confidence
mix kanban and list views on the same page — let users toggle, not split
Download .md

License MIT
Uploaded yesterday
Version v1
File size 6.2 KB
Downloads 0

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/pipelinepro and implement it in my code

Don't have the MCP? Install it here