Graphite Precision

CRM Mobile App Design for Figma

Pipeline is a sales CRM app design with a graphite-and-teal command-center look, built for founders and designers shipping a deal-tracking product.

Use this template

CRM mobile app dashboard screen with pipeline KPIs and forecast bar

CRM mobile app pipeline screen with deals grouped by stage

CRM mobile app deal detail screen with pipeline bar and activity timeline

Explore the screens

Preview the CRM mobile app design, fully editable in Sleek.

ContactsScreen 4

ActivityScreen 5

TasksScreen 6

About the CRM App

Pipeline is a CRM mobile app design built around a "Graphite Precision" look: warm graphite ink on a paper-white canvas, steel-grey blocks for grouped data, and a single electric-teal accent reserved for primary actions and won deals. There are no drop shadows; surfaces separate through tonal shifts and hairline rules, with deal values set large and tight in tabular numerals so every figure reads like a ledger entry.

The template ships six connected screens that form a complete sales workflow: a Dashboard with pipeline KPIs and a stage-segmented forecast bar, a Pipeline grouped by deal stage, a Deal detail with activity timeline and next-task reminder, an alphabetized Contacts list, a chronological Activity feed, and a Tasks checklist. A signature segmented pipeline bar (Lead, Qualified, Proposal, Negotiation, Won) recurs on every deal card, the deal header, and the dashboard, so progress is legible at a glance.

Use it in Sleek and make it yours: restyle the palette, edit any screen with AI by describing the change, and add the flows your product needs. Then export to code, copy it into Figma with no plugin, or hand a prompt to an AI agent to build it for real, all far faster than starting from a blank canvas.

Screens included

Dashboard

A personalized "Morning, Daniel" greeting sits above three KPI blocks (total pipeline, closing this month, win rate) and a stage-segmented forecast bar, with a recent-activity list below. The at-a-glance command center a rep checks between meetings.

Pipeline

Deals grouped into collapsible stage sections like Negotiation and Proposal, each card showing company, contact avatar, deal value, and a segmented progress bar. Filter chips across the top switch between all deals, leads, and qualified.

Deal detail

A large deal-value hero with expected close date, the full five-stage pipeline bar, an "Advance to Won" action, a next-task reminder, primary contact block, and a call-and-email activity timeline. Everything needed to move a deal forward on one screen.

Contacts

An alphabetized, hairline-divided list of contacts with avatars, company, role, and a last-touch date, plus a search bar across 412 records. Keeps relationships and recency front and center.

Activity

A chronological feed of tonal cards for logged calls, sent proposals, won deals, and stage changes, split into Today and Yesterday. A live record of every interaction across the pipeline.

Tasks

Today's follow-ups as checklist rows with due times, priority tags, and linked deals, grouped into Overdue, Today, and Completed. Keeps a rep on top of every commitment.

Key features

Graphite Precision aesthetic: graphite ink, paper-white canvas, one teal accent
Shadowless tonal-stack surfaces separated by hairline rules
Signature segmented pipeline bar repeated across deals, detail, and dashboard
Tabular numerals for currency and percentage figures
Dashboard with pipeline KPIs and a stage forecast bar
Stage-grouped, collapsible pipeline with filter chips
Deal detail with activity timeline and next-task reminder
Bottom navigation with a graphite active-tab pill

Who it's for

Founders validating a sales CRM or deal-tracking MVP

Product designers needing a CRM app UI starting point in Figma

Indie developers building a pipeline-management app

SaaS teams prototyping a mobile CRM experience

What you can build

Launch an MVP for a sales CRM product
Mock up screens for an investor or sales-team pitch
Hand a consistent CRM UI off to developers
Explore a redesign of an existing pipeline app

How to use this template

1
Open the template
Browse the screens and preview the full design to see if it fits your idea.
2
Use this template
Open your own fully editable copy in Sleek with one click.
3
Edit with AI
Restyle the palette, change layouts, and add or remove screens just by describing what you want.
4
Export and ship
Export your design or hand it to developers, and keep building toward launch.

Questions, answered. Everything to know before you start.

How do I build a CRM app from this template?

Click "Use this template" to open it in Sleek as your own editable project, then shape it by describing the changes you want: restyle the palette, edit any screen, and add the flows your product needs. You start from six complete CRM screens instead of a blank canvas, so you reach a working app design far faster.

What screens are included in this CRM mobile app design?

Six connected screens: Dashboard, Pipeline, Deal detail, Contacts, Activity, and Tasks. Together they cover the core sales workflow, from forecasting and stage tracking to logging interactions and managing follow-ups.

Can I export this CRM app UI design to Figma?

Yes. Sleek copies your design straight into Figma with no plugin required, exports it as code, or hands you a ready-made prompt that an AI agent like Claude Code or Cursor can use to build it into a real, working app.

Can I customize the CRM app UI design?

Yes. Use the template in Sleek and edit any screen by chatting with the AI: restyle the graphite-and-teal palette, change layouts, adjust the pipeline stages, and add or remove flows. There's no manual redraw; you describe the change and it's applied.

Is this template suitable for a sales pipeline or deal-tracking app?

Absolutely. The dashboard, stage-grouped pipeline, deal detail, and activity timeline map cleanly onto sales CRM, lead management, and account-tracking products. Adjust the stages, fields, and labels to fit your sales process.

Is this CRM app design template free to use?

You can open and explore the design for free, then use it in your own Sleek project to build on it. Editing and exporting follow Sleek's standard plans.

Something else? Write to support@sleek.design.