The “Relationship Pill” - One Small UX Detail That Changes Everything

Scroll to the bottom of any contact's email timeline in SalesSheet and you will find a small, rounded pill sitting on the timeline axis. Inside it: a people icon, a date in Spanish, and the same date in English. That is the relationship pill. It marks the moment your relationship with this contact began.

It is probably the smallest feature we have shipped. It took less than a day to build. And it might be the one that users notice most, because it answers a question every salesperson asks but most CRMs cannot answer: how long have I known this person?

What the Pill Shows

The relationship pill displays the earliest known date of interaction between you and the contact. It computes this by taking the minimum of two values: the date the contact was created in SalesSheet, and the timestamp of the oldest synced email in the timeline.

This distinction matters. If you added a contact to SalesSheet last month but your first email with them was three years ago, the pill shows the email date - because that is when the relationship actually started. Conversely, if you have a contact with no emails (maybe they are a referral you have never emailed), the pill shows the contact creation date.

The date is displayed in two formats: Spanish (primary) and English (secondary). This reflects SalesSheet's bilingual user base and uses the Intl.DateTimeFormat API for correct locale-aware formatting. It is a small touch that makes the product feel personal rather than generic.

Why It Matters for Sales

Context changes how you sell. When you are about to call a prospect and you glance at their timeline, the relationship pill instantly tells you whether this is a fresh lead or someone you have been nurturing for years. That context shapes your entire approach - your tone, your opening line, your level of assumed familiarity.

Consider two scenarios. You open a contact timeline and the pill reads "March 2023." You know this is a long-standing relationship. You have history together. Your approach can be warm, familiar, reference-rich. Now imagine the pill reads "January 2026." This is a recent acquaintance. Your approach should be more formal, more exploratory, less assumption-heavy.

Traditional CRMs show you a "created date" field buried in a detail panel. But that field only tells you when the CRM record was created, not when the actual relationship started. If you imported contacts from a CSV last month, every contact's "created date" is last month - even if you have been emailing some of them for five years. The relationship pill solves this by using email history as the source of truth.

The Technical Implementation

The pill is implemented inside the StreamTimeline component, which manages the entire contact timeline view. The date computation is a useMemo that depends on two values: contactCreatedAt (a prop passed from the contact record) and oldestEmailDate (derived from the email sync engine).

The logic is simple: compare both dates and use the earlier one. If only one date exists, use that one. If neither exists, the pill does not render. This handles all edge cases - contacts with no emails, contacts with no creation date (imported records), and contacts where both are available.

The pill only renders when two conditions are met: the email list is fully loaded (hasMoreEmails is false), and there is at least one email in the timeline (emailsCount is greater than zero). This prevents the pill from appearing prematurely while emails are still loading, which would show an incorrect date. For contacts with no emails, a variant of the pill still appears using just the contact creation date, ensuring every contact's timeline has a visible starting point.

Visual Design

The pill sits on the timeline axis, aligned with the same vertical line that connects all timeline events. A teal dot (12px diameter, matching the timeline dot style) marks its position, with a gradient line above it that fades from the timeline color to transparent - a subtle visual cue that this is the end of the timeline.

The pill itself is a rounded-full container with a 1px gray border and a subtle shadow. Inside, a small circular icon area (24px, teal-50 background, teal-200 border) contains the Lucide Users icon in teal-600. The date text uses the same Inter typeface as the rest of the interface, with the Spanish date in medium weight gray-700 and the English date in smaller, lighter gray-500.

The design choices are deliberately restrained. The pill does not demand attention. It is not highlighted, animated, or decorated. It simply sits at the end of the timeline, waiting to be noticed. This matches the design philosophy we applied across the entire mobile interface - information should be present when you need it but never intrusive when you do not.

The Scroll Experience

Part of what makes the relationship pill effective is the experience of discovering it. You open a contact's timeline, see recent emails and notes, and start scrolling down through the history. Older emails load progressively as you scroll, thanks to the infinite scroll system in the email sync engine. Eventually, you reach the oldest email. And then, below it, the pill appears.

That moment of scrolling to the very beginning of a relationship - seeing the first email you ever exchanged with someone - is surprisingly powerful. It turns an abstract contact record into a narrative. You can see how the conversation evolved, when it intensified, when it went quiet, and when it picked back up. The pill anchors that narrative with a clear starting point.

The pill has 100px of bottom padding below it, creating breathing room at the end of the timeline. This ensures the pill is fully visible when the user scrolls to the bottom, rather than being cut off at the viewport edge. It also signals visually that you have reached the end - there is nothing more to load.

Small Details, Big Impact

Product design is full of features that look insignificant in isolation but compound into an experience that feels thoughtful and complete. The relationship pill is one of those features. It does not appear in our feature comparison chart. It is not on the pricing page. Nobody will ever choose SalesSheet specifically because of a small date pill at the bottom of a timeline.

But when users describe why SalesSheet feels different from other CRMs, they often point to moments like this - moments where the product seems to understand what they need before they ask for it. The relationship pill does not require any configuration. It does not ask you to enter a "relationship start date" field. It just computes the answer from your email history and shows it when you need it.

That is the kind of product design we aspire to at SalesSheet. Features that are invisible until they are useful. Details that respect your attention. Small things that add up to something meaningful. If you are curious about the other design details in our mobile CRM experience, we have written about the iOS-style contacts view, the gesture system for moving deals, and the design language inspired by Linear and Attio.