Pro Plan — Approved Design
Final approved designs for all Pro Plan visual touchpoints. These are the canonical reference for development. Each section shows the approved design with implementation notes.
1 · Search Cards
Search Result Cards
3-tier badge hierarchy (Standard: no badge, Premium: navy pill, Pro: black+crown pill) plus Pro-only drawer with signal pills.
$1,200/mo2.3 mi
Cozy Studio Near Hospital
1BD/1BA · Private room · Apr 1 – Jul 31
Last updated 3 days ago
PREMIUM
$1,950/mo0.9 mi
Bright 1BR Upper East Side
1BD/1BA · Private room · Apr 15 – Jul 31
Last updated 1 day ago
PRO
$2,100/mo0.3 mi
Luxury Suite Near Medical Center
2BD/2BA · Entire place · Apr 1 – Ongoing
Great Price
~2hr
Furnished
Key decisions: Availability merged into specs line. Pro card trades “Last updated” for drawer to keep card heights equal.
Files:
Badge CSS: Pro:
Envelope icon: 20×16px in 40px circle.
Files:
ResultsCard.vueBadge CSS: Pro:
bg #1a1a1a, border rgba(240,192,64,0.3), crown #F0C040. Premium: bg #283949. Pill border-radius: 24px.Envelope icon: 20×16px in 40px circle.
2 · Map Pins
Map Pin Hierarchy
4-tier: Pro (black+crown) > Premium (navy) > Std/Free (muted) > Viewed (taupe dimmed). Group markers inherit best tier.
$2,100Pro
$1,800Premium
$1,200Std/Free
$2,600Viewed
3 LISTINGSGroup (Pro)
2 LISTINGSGroup (Prem)
File:
Pin CSS: Pro:
Group logic: Cluster inherits highest-tier style.
GoogleMap.vuePin CSS: Pro:
bg #1a1a1a, border 2px #eff1f5, crown #F0C040. Premium: bg #283949. Std/Free: bg #b8c4cc. Viewed: bg #f2ede3, opacity 0.6.Group logic: Cluster inherits highest-tier style.
3 · Map Pin Popup
Marker Modal
Card shown when clicking a map pin. Same pill badges as search cards.
Pro
PRO
$2,000/mo
Cozy Back Bay 3rd floor
2BR/1BA · Private room
Premium
PREMIUM
$1,800/mo
Bright 1BR in Back Bay
1BD/1BA · Entire place
Standard
$1,200/mo
Cozy Studio Near Hospital
1BD/1BA · Private room
File:
MarkerModal.vue — Same badges as search cards. Standard: no badge.4 · My Listings
Account Listings Page
Pro listing: mini badge on thumbnail, Pro-colored plan tag, Analytics link. Premium: navy tag + upgrade button.
File:
Pro tag:
Pro card border:
ListingCard.vuePro tag:
bg #1a1a1a, color #F0C040. Premium: bg var(--blue400).Pro card border:
1.5px solid rgba(240,192,64,0.2). Analytics link for Premium+Pro. Upgrade button for non-Pro only.5 · Upgrade Page
Plan Upgrade / Renewal
Standard: choose Premium or Pro. Premium: upgrade to Pro. Pro: ceiling. Current plan shown as gray outline (non-clickable).
Standard User
Upgrade for more inquiries
Choose the plan that fits your goals
Current plan
Standard Plan
$15/Month
Premium
+$6/mo
2x more inquiries · 30 photos · Priority support · Map & search boost
Pro
+$14/mo
Everything in Premium + Smart labels · Listing coach · Video tour · Unlimited photos · Top placement
Premium User
Upgrade for more inquiries
Choose the plan that fits your goals
Current plan
Premium Plan
$21/Month
Upgrade to Pro
+$8/mo
Smart labels · Listing coach · Video tour · Unlimited photos · Top placement
Pro User (Highest Tier)
Your plan
Current plan
Pro Plan
$29/Month
You’re on our highest tier. No further upgrades available.
Key decisions: Heading → “Upgrade for more inquiries.” Middot-separated features. Gray outline current plan (non-clickable).
File:
Current plan:
Paths: Standard → Premium/Pro. Premium → Pro. Pro = ceiling.
File:
Upgrade.vueCurrent plan:
border 1.5px var(--taupe200), white bg, muted text. Pro ceiling: stronger border var(--blue200) + crown.Paths: Standard → Premium/Pro. Premium → Pro. Pro = ceiling.
6 · Analytics Page
Listing Analytics — Access Gate
Non-Premium/Pro users see blurred teaser with real-looking KPI numbers.
← Back to Listings
Listing Analytics
See How Your Listing Performs
Premium and Pro users get access to health scores, view counts, market comparisons, and actionable tips to improve your listing.
Key decisions: Blurred teaser shows real KPI numbers (not empty boxes). Heading: “See How Your Listing Performs.” CTA: “Upgrade for more inquiries.”
File:
Gate:
File:
Analytics.vueGate:
v-if="!hasAnalyticsAccess" (Premium + Pro). Replaces old isPremium.Implementation Spec
Technical Reference
| Element | Current (Production) | Approved Design | File |
|---|---|---|---|
| Pro badge | Gold #CE9B4D rect | Black #1a1a1a pill, crown #F0C040, border rgba(240,192,64,0.3) | ResultsCard.vue |
| Premium badge | Gold rect + star | Navy #283949 pill, text only | ResultsCard.vue |
| Pro drawer | None | Yellow50 bg, bordered pills, hover tooltips | ResultsCard.vue |
| Card info | Separate avail tag | Dates in specs line. Pro hides “Last updated” | ResultsCard.vue |
| Envelope | 20×16px | 20×16px (matches) | ResultsCard.vue |
| Pro map pin | Gold | Black #1a1a1a + crown | GoogleMap.vue |
| Premium pin | Gold #CE9B4D | Navy #283949 | GoogleMap.vue |
| Std/Free pin | White | Muted #b8c4cc | GoogleMap.vue |
| Viewed pin | N/A | #f2ede3, opacity 0.6 | GoogleMap.vue |
| Group marker | N/A | Inherits best tier | GoogleMap.vue |
| Marker modal | Gold rect | Pro: black+crown. Premium: navy. Std: none | MarkerModal.vue |
| Account tag | Star + text | Pro: #1a1a1a/#F0C040. Premium: navy | ListingCard.vue |
| Upgrade heading | “Upgrade your plan” | “Upgrade for more inquiries” | Upgrade.vue |
| Current plan | Yellow box | Gray outline: 1.5px var(--taupe200) | Upgrade.vue |
| Features format | Prose | Middot-separated | Upgrade.vue |
| Upgrade path | Std → Premium | Std → Prem/Pro, Prem → Pro, Pro = ceiling | Upgrade.vue |
| Analytics gate | isPremium | hasAnalyticsAccess, real KPIs | Analytics.vue |
| Analytics CTA | “Upgrade to Premium” | “Upgrade for more inquiries” | Analytics.vue |