The CRM industry has a design problem. Most tools still look like they were built in 2012 - cluttered dashboards, aggressive color palettes, overloaded toolbars, and data tables that stretch the viewport in every direction. Meanwhile, tools like Linear and Attio have proven that business software can be beautiful, minimal, and still deeply functional.
When we designed SalesSheet's mobile interface, we studied what makes these products feel so good. Then we applied those principles to the unique constraints of CRM on a phone screen. This post breaks down the specific design decisions we made and why each one matters.
The 3px Accent Bar
One of the most impactful design choices in SalesSheet's mobile funnel is also one of the smallest: a 3-pixel-wide colored bar on the left edge of each pipeline stage.
Linear uses a similar technique in their issue tracker. A thin colored stripe provides instant stage recognition without consuming screen space with badges, labels, or background colors. Your eye learns the color mapping within minutes, and from then on you can identify a stage at a glance without reading the label text.
Each pipeline stage in SalesSheet gets a unique accent color. Lead/New is slate gray. Qualified is blue. Discovery is purple. Proposal is orange. Negotiation is indigo. Closing is teal. Won is green. Lost is red. These colors are drawn from a consistent palette using the STAGE_ACCENTS design tokens defined in our component system. The 3px border-left style applies the accent to the stage container, and each deal card within that stage gets a matching 6px dot next to the deal name.
Tabular-Nums: The Detail Nobody Notices (Until It Is Wrong)
Open any financial dashboard and look at the numbers. If the columns feel slightly misaligned, it is because the font is using proportional numerals - the default for most typefaces. The digit "1" takes less horizontal space than "4", which causes revenue figures to jitter when values change.
SalesSheet uses font-variant-numeric: tabular-nums on every revenue figure in the pipeline. This forces each digit to occupy the same width, so columns of numbers stay perfectly aligned. It is a single CSS property that takes five seconds to apply, and it makes the difference between a dashboard that feels amateur and one that feels precise.
We apply this consistently across the stage revenue totals, individual deal amounts, and the close date formatting. The font itself is Inter, which ships with excellent tabular numeral support - one of the reasons we chose it as our primary typeface across the entire application.
Soft Shadows and Minimal Cards
Attio popularized a card style that feels almost like paper resting on a surface: white background, very subtle shadow, generous padding, and no visible border. SalesSheet adapts this for mobile with a shadow value of 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04) - just enough depth to separate the card from its background without creating visual noise.
On a phone screen, where space is tight and attention is fragmented, heavy shadows and thick borders create visual clutter that makes the interface harder to scan. Our shadow values are deliberately subtle. Combined with 12px border-radius corners, the cards feel modern and lightweight. The mobile funnel view stacks these cards vertically within each stage section, creating a clean rhythm of content blocks separated by whitespace.
The Contact Card: Avatar, Name, Status
Each contact in SalesSheet's mobile view follows a strict three-column layout: avatar circle, name and subtitle, and status badge. The avatar uses a gray-100 background with brand teal initials - a deliberate choice that avoids the visual chaos of random avatar colors while keeping the interface warm and branded.
The initials are computed from the first and last name. Single-name contacts get one letter. The contact name is truncated with CSS text-overflow: ellipsis to prevent long names from breaking the layout. Below the name, the company or email appears as a subtitle in gray-500. On the right edge, a rounded status badge uses the same color system as the pipeline stages, maintaining visual consistency across views.
Design Tokens: Consistency at Scale
One of the lessons from studying Linear is that consistency comes from constraint. Linear uses a small set of design tokens - colors, spacing values, border radii, font weights - and applies them rigorously everywhere. There is no page in Linear that feels like it was designed by a different team.
SalesSheet follows the same discipline. Our mobile components share a set of constants: BRAND_TEAL (#32BAB0) for interactive elements, AVATAR_BG (#F3F4F6) for contact circles, a consistent shadow value for cards, and Inter as the universal typeface at carefully chosen sizes (10px for labels, 12px for secondary text, 13px for body text, 14px for section headers, 18px for page titles).
These tokens are not documented in a Figma file and then loosely followed. They are defined as constants in the code and imported directly by every component that uses them. When we change a design token, every component updates automatically.
Color as Information Architecture
Traditional CRMs use color decoratively - a blue header here, a green button there, no particular meaning attached. In SalesSheet, color carries semantic meaning. Teal always means "this is interactive or branded." Blue always means "received email." Purple always means "sent email." The stage accent colors create a consistent mapping that persists across the funnel view, the contact detail page, and the pipeline overview.
This semantic use of color reduces cognitive load. After a few minutes of use, your brain stops reading stage labels and starts recognizing colors. That is the same principle that makes traffic lights effective - you do not need to read the word "stop," you just see red.
Lo que Aprendimos
Building a mobile CRM inspired by tools like Linear and Attio taught us that the gap between "functional" and "delightful" is often measured in pixels and milliseconds. A 3px accent bar. A font-variant property. A shadow reduced by 50%. These are not features that show up in a competitive comparison chart, but they are the details that make users say "this feels right" without being able to explain why.
Design, in the end, is not about aesthetics. It is about reducing the effort required to understand information and take action. Every design decision in SalesSheet's mobile interface was made with that goal in mind. If you are curious about the gesture system that complements this visual design, read our deep-dive on the three ways to move deals on mobile.
See the Design for Yourself
Open SalesSheet on your phone and experience what a premium mobile CRM feels like.
Try SalesSheet Free - No Credit Card