Reference
Card Library
Catalog of every card type and variant/state that can appear in the Relationship Map main column. Built off v6's card styles so visuals match the live prototype exactly.
Useful for spec'ing edge cases, designing post-action states, and pressure-testing the card system as it grows. New states and variants should land here first as a reference point before being wired into the live page.
Offer cards 2 in v6 Needs you
A connector has raised their hand to make an intro. Highest-signal — the user just needs to accept, decline, or reply to a question. Placed at the top of the main column when present. CSS class: .offer-card.
Variants
a · Clean offer (no question)
Most common case. The connector volunteered, the path is clear, the user just needs to accept or decline.
Daniel Reyes
🔥Very Strong
Executive
Chief Information Security Officer, Wells Fargo
·
via Michael Girouard · Partner, Crew Capital
Investor
·
Offered 2h ago
Michael wrote: "Worked together at his last company. Happy to make the intro whenever you're ready."
b · Offer with question .has-question
Connector wants context before sending the intro. Inline textarea expansion below the offer body. Two foot actions: Save draft (come back later) or Reply (send response and queue intro in one shot).
Priya Iyer
🤝Average
Senior
VP Application Security, Wells Fargo
·
via Ali Adnan · Founder & CEO, ResolveAI
Customer
·
Offered 6h ago
Ali wrote: "Knew him at Stripe — may need a warm-up. Quick question: where are you in the sales process?"
↩ Ali asked a question — answer inline so we can send the intro
c · Conditional offer Future state
Connector said "yes, but only under condition X" — e.g., wait until next quarter, only via cold email, would prefer to be CC'd, etc. Soft yes that needs interpretation. Surfaces the condition prominently before Accept.
Marcus Webb
💪Strong
Executive
Head of Cloud Platform Engineering, Wells Fargo
·
via Richard Perrott · Sr. Director Eng
Former Employee
·
Offered 1d ago
Richard wrote: "Yes — but he just kicked off a re-org. Best to wait until July when his new team is settled. Ping me end of June and I'll set it up."
⏱ Conditional · scheduled for follow-up June 30
States
i · Pending (default)
No additional state — same as variant a above. Card has the warm peach gradient and orange action border treatment that signals "needs you."
ii · Accepted Click handler not wired
User accepted. Card desaturates to neutral grays, name dims, action buttons disappear. Status strip indicates the intro is in flight.
Daniel Reyes
🔥Very Strong
Executive
Chief Information Security Officer, Wells Fargo
·
via Michael Girouard · Partner, Crew Capital
Investor
Michael wrote: "Worked together at his last company. Happy to make the intro whenever you're ready."
✓ Accepted · intro in flight (sent to Michael 12m ago)
iii · Declined Click handler not wired
User declined. Same visual treatment as accepted but with a muted red status strip.
Daniel Reyes
🔥Very Strong
Executive
Chief Information Security Officer, Wells Fargo
·
via Michael Girouard · Partner, Crew Capital
Investor
Michael wrote: "Worked together at his last company. Happy to make the intro whenever you're ready."
✕ Declined · Michael notified, no intro sent
iv · Draft saved .has-question + draft Click handler not wired
User started typing a reply to the connector's question but saved it for later. The textarea persists with their text; status strip reminds them the connector is still waiting.
Priya Iyer
🤝Average
Senior
VP Application Security, Wells Fargo
·
via Ali Adnan · Founder & CEO, ResolveAI
Customer
·
Offered 6h ago
📝 Draft saved 1h ago · Ali still waiting
↩ Ali asked a question — answer inline so we can send the intro
v · Replied (awaiting connector) Click handler not wired
User replied to the connector's question. Card desaturates, textarea hidden, status strip shows the ball is in the connector's court.
Priya Iyer
🤝Average
Senior
VP Application Security, Wells Fargo
·
via Ali Adnan · Founder & CEO, ResolveAI
Customer
↗ Replied 30m ago · awaiting Ali
Lead cards 5 in v6 Decide
Connectors with rated strong or very strong relationships into the target. The user picks: queue the intro for the Concierge, do it themselves, or save the connector to the deal team for later. CSS class: .lead-card.
Variants
a · Standard lead
External connector with a rated strong/very-strong relationship. The default case.
Diane Vasquez
💪Strong
Senior
Head of Compliance Engineering, Wells Fargo
·
via Jenny Marshall · Independent advisor
Advisor
·
Compliance Engineering buying center
·
3 mutual connections
b · Internal team connector
Connector is on the customer's own team (CRO, SE, etc.). Connector-type tag omitted — internal status conveyed by company name. Often paired with the prospect already being on the deal team.
James Kelley
💪Strong
Senior
Director of Security Architecture, Wells Fargo
·
via Sarah Chen · Sr. SE, SmallWorld
·
Cybersecurity buying center
·
Sarah is on your Deal Team already
c · Former Employee connector
Connector previously worked at the target. Connector-type tag =
Former Employee. Their context is often the most valuable signal — they know the org from the inside.
Elena Voss
💪Strong
Executive
Head of Threat Detection, Wells Fargo
·
via Richard Perrott · Sr. Director Eng
Former Employee
·
Cybersecurity buying center
d · Lead with reason chip
Carries an additional context chip beyond the strength rating — e.g., mutual connections, recent activity, work-history overlap. Reason chips are now plain pills (no per-type colors) to reduce visual noise.
Marcus Webb
🔥Very Strong
Executive
Head of Cloud Platform Engineering, Wells Fargo
·
via David Rush · CRO, SmallWorld
·
Cloud Platform buying center
·
Rated 4d ago
States
i · Pending (default)
No additional state — same as variants above. White background, intro-split button group + bookmark/dismiss icons visible.
ii · Concierge queued Click handler not wired
User clicked "Queue Concierge." Action buttons disappear; status strip indicates the agent is now drafting and sending the intro.
Marcus Webb
🔥Very Strong
Executive
Head of Cloud Platform Engineering, Wells Fargo
·
via David Rush · CRO, SmallWorld
·
Cloud Platform buying center
✦ Concierge handling · drafting ask to David
iii · Doing manually Click handler not wired
User clicked "Do manually." Card stays visible as a reminder; user is responsible for the outreach themselves.
Marcus Webb
🔥Very Strong
Executive
Head of Cloud Platform Engineering, Wells Fargo
·
via David Rush · CRO, SmallWorld
·
Cloud Platform buying center
✋ You're handling this manually · marked 12m ago
iv · Saved to Deal Team Click handler not wired
User clicked the bookmark icon. The connector is added to the Deal Team section below; the lead card here shows a brief saved-state confirmation before being removed from the leads list (or kept with a saved indicator if they prefer).
Marcus Webb
🔥Very Strong
Executive
Head of Cloud Platform Engineering, Wells Fargo
·
via David Rush · CRO, SmallWorld
🔖 Saved to Deal Team
v · Dismissed Click handler not wired
User clicked the X icon. Card heavily faded with strikethrough on the prospect name. Stays visible briefly so the user can undo, then quietly disappears.
Marcus Webb
🔥Very Strong
Executive
Head of Cloud Platform Engineering, Wells Fargo
·
via David Rush · CRO, SmallWorld
✕ Dismissed · Undo
Deal team rows 11 in v6 Agent's working set
Connectors who have a verified or likely path into the target — the agent's working set. Stack-style rows (not cards), ranked by combined strength + relationships at the account. CSS class: .dt-row.
Variants
a · Standard row
No active offer or lead — just present in the working set. Typical row.
#4
Jenny Marshall
💪Strong → Head of Compliance Eng
🏷Cybersecurity domain expert
⊕3 mutual connections
b · Promoted with active offer .is-promoted
Connector currently has an open offer card in the Offers section above. Promoted background and orange "Active offer" badge.
#1
Michael Girouard
Active offer
★Invests in 4 cyber portfolio cos sold to WF
🔥Very Strong → CISO
🏷Cybersecurity SME
c · Promoted with active lead .is-promoted + .is-lead
Connector currently has a rated relationship in the Leads section above. Same promoted treatment, but with a blue "Active lead" badge instead of orange.
#2
David Rush
Active lead
🔥Very Strong → Cloud Platform Head
⚒Worked at Wells Fargo 2018-21
🏷Bank tech leadership network
d · Recently added New variant
Connector just joined the working set (manually or via Concierge promotion). Purple "New" badge briefly. Helps surface that the working set is alive without requiring a re-render.
#9
John Lim
New
📍SF Bay Area cohort
🏷Cybersecurity marketing peer
e · Awaiting strength rating New variant
Connector has relationships at the target but hasn't responded to the strength-verification ask yet. Surfaces a soft "waiting on connector" state.
#7
June Park
⚒Salesforce alum (2y w/ Elena Voss)
Extended network cards 17 in v6 Agent background
Third-degree paths and unverified candidates the agent is still working on. Smaller, denser cards rendered in a responsive grid. The user generally doesn't act on these — they get promoted up to the deal team or leads as the agent gets more data. CSS class: .ext-card.
Variants
a · Standard 3°-path
Verified path through one extra hop. Path text spells out the route. The default extended-network card.
Kara Marsh
via Ali Adnan → Stripe alumni
b · Multi-hop unverified New variant
Candidate path the agent has identified but not yet verified. Subtle "verifying" indicator; user shouldn't act on it yet.
Eli Wang Verifying
via David Rush → YC W21 (unverified)
c · Promoted candidate New variant
3°-candidate the agent is recommending for promotion to the deal team or leads list. Subtle blue accent and a "Promote" CTA.
Priya Banerjee Promote?
via Richard Perrott (work history)
Section-level states
When a section has no content yet (early states of the walkthrough), the section either hides entirely or renders an empty-state placeholder. The state-machine in v4/v5/v6 toggles these via renderSections().
i · Empty placeholder (with CTA)
Section header stays visible; body is replaced with a placeholder explaining why it's empty and what unlocks it. Used in State 1 (Deal Team while waiting on connectors).
◆
No deal team yet
Once you add connectors, the agent will identify your strongest paths into Wells Fargo from inside your team and surface them here.
Add connectors to begin
ii · Empty placeholder (without CTA)
Same treatment, no CTA. Used when the section will fill in over time without user action — e.g., "No offers yet · Concierge solicited offers from 5 connectors overnight. Replies expected throughout the day."
✦
No offers in yet
The Concierge solicited offers from 5 top-ranked connectors overnight. Replies expected throughout the day.
iii · Section hidden entirely
Used when the section doesn't make sense yet — e.g., Offers section in State 1 before any connectors exist. The entire section (including header) is removed from layout. Below is a literal note in lieu of nothing.
(no DOM rendered — section is removed via
.v4-section-hidden { display: none; })