Knowledge > Products > WiseAI Realtor > Design Direction

WiseAI Realtor — Backend Design Direction

Source: design-pattern research (2026-06-27) across real-estate CRMs (BoldTrail, Lofty, FUB, Sierra, Ylopo, IXACT) + best-in-class SaaS (Linear, Attio, Stripe, Vercel/Geist, Notion, Intercom). Goal: keep the proven realtor workflows, dress them in a modern SaaS shell. "Design like Linear, ship like Vercel, feel like Stripe."

The decision: a hybrid, not one global layout

Anchor everything in a Workflow-Rail shell (persistent left nav rail + central focus + contextual right rail + global Cmd+K), then vary the center per screen archetype. This gives the founder's "large boxes / modern workflow" feel (bento dashboard, generous cards) while keeping working screens fast and dense like Linear/Attio. (The three layout options from the earlier question map on: bento = the dashboard, workflow rail = the global shell, big-box grid = settings/integrations.)

Screen archetype	Layout
Global shell	Workflow Rail: navy left nav (240–260px, collapsible to 64px icon rail) + top bar (global search, Cmd+K, autopilot/co-pilot toggle, notifications, account) + contextual right rail
Dashboard	Bento command center — hero tile top-left (the one daily number) + ≤10 tiles sized by importance; deeper analytics behind an "Insights" tab
Leads	List-first + Kanban toggle + right drawer; Smart Lists in sidebar; row → drawer (AI summary + quick actions); "open full record" → record page
Lead/Contact detail	Two-tier: drawer (triage) + full record page (AI summary on top → unified activity timeline → right rail next-best-action). NO tab-sprawl
Conversation inbox	3-pane split: filters/saved views | conversation list | thread + context rail (linked record, AI summary, "take over from AI")
Content Studio	3-pane AI editor: brief/inputs | editor | AI assistant + variants gallery + live preview
Listings	Card gallery + detail drawer; toggle to dense table
Settings / Integrations	Left section-nav + content pane; integrations as a card grid (logo, status pill, Connect/Manage)

Design-system seed (accessible navy + teal + gold)

Research flagged two issues with the raw seed: navy/teal sit too close in value, and gold fails contrast as text. Fix: navy = chrome/structure, teal = the single primary action accent, gold = highlight/celebration only, neutrals do 90% of the work (Geist "color as punctuation").

Color tokens

• Navy: #0B1F3A (rail/chrome), #12305C (active nav/headers)
• Teal (primary action): fill #0F766E (white text ~4.8:1 AA), link on white #0B5E57, tint #E6F6F5
• Gold (accent/celebration only — never body text): #C49A3A; use as left-edge accent or navy-text-on-gold-tint badge (deal won)
• Neutrals: bg #FAFAFA, surface #FFFFFF, border #E6E8EB, divider #EEF0F2, text #18181B, muted #6B7280, subtle #9CA3AF
• Semantic: success #16A34A, warning #D97706, danger #DC2626, info #2563EB
• Pipeline stages (chip + Kanban header, always paired with a label/icon — colorblind-safe): New=blue, Contacted=teal, Nurturing=amber, Appointment=violet, Active/Offer=indigo, Closed-Won=green, Lost=gray
• Offer dark mode (modern-tool expectation)

Type — Inter or Geist Sans (Geist Mono for IDs/metrics). Steps: 12 caption, 13 label, 14 body (default), 16 sub-section, 20 section, 24 page title, 30–32 KPI numerals. tabular-nums on all metrics/prices. Weights 400/500/600 (700 only on KPI numbers). Real-estate warmth lives in the marketing site, not the admin — keep the backend neutral and fast.

Spacing/grid — 4px base, 8px rhythm. Tokens 4/8/12/16/20/24/32/40/48/64. Card padding 16–24; section gutters 24; KPI strip on CSS-grid auto-fill.

Radius/elevation — border-first, low-shadow. Cards/tiles 12px (bento hero 16px), inputs/buttons 8px, chips pill. Default card = 1px #E6E8EB + barely-there shadow; one larger shadow reserved for floats (drawer, modal, command palette).

Density — default comfortable (~44px rows) with a compact toggle (~32–36px, nowrap) remembered per view (fixes the "needs a 27-inch monitor" complaint).

Key components (spec)

• Lead card/row — avatar/initials, name (600), status chip, source chip, language chip, lead-score pill, last-touch (muted relative), next-action; whole row clickable; hover reveals quick actions (call/text/assign).
• Chips (3 distinct families) — status (filled, stage color), source (outline + icon: Google, Realtor.ca, referral, website, QR, AI), language (subtle pill EN/FR/ਪੰ/中文 — Canada-first).
• AI summary panel — top-of-record card, teal left accent, "Aria's summary" label, 2–4 sentence recap + Suggested-next-action button + "view full history"; collapsible.
• Pipeline column — header (stage name, count, summed value, color bar); draggable cards (name, value, days-in-stage, next task, language chip).
• KPI tile — label (muted 12–13) + big number (30–32 tabular) + trend arrow/% (green/red) + sparkline; dashboard hero tile = 2× scale, top-left.
• Transcript/conversation view — alternating speaker rows (AI vs contact), mono timestamps, inline intent/entity highlights (booked showing, budget, address), AI summary header, "escalate / take over."
• Command palette (Cmd+K) — fuzzy navigate + act; shortcuts shown on hover.
• Smart Lists (dynamic, auto-updating saved filters) — NOT static groups. Two tiers: (1) universal starters everyone gets (Hot/act-today, Slipping-away, New-unactioned, Sellers-valuation, Past-clients) and (2) per-agent personalized lists. Crucially, language-preference Smart Lists are generated per agent from the languages they serve (their enabled AI/voice languages) + the language_preference auto-captured on each lead by the AI — so Beckett sees "Punjabi", a GTA agent sees "Mandarin/Punjabi", a Montreal agent sees "French", etc. NEVER hardcode a language. Agents can create/rename/reorder/pin/share any custom list (farm-area, source, price band, investors). The "Punjabi-preference" item in the mockups is Beckett's instance, not a fixed feature.
• Sortable table header — every data table (Leads, Listings, Contacts) has click-to-sort on all relevant columns (name, status, source, language, score, last-touch, agent, price, beds, DOM). Neutral columns show a faint double-chevron on hover; the active sort column shows a single teal up/down arrow + bold label; sort persists per view. (Founder requirement, 2026-06-27.)
• Autopilot/co-pilot switch — how autonomous the AI front office is; on dashboard + per conversation (fits the AI-bridge principle).

Anti-patterns (what makes real-estate CRMs feel dated)

1. Tab-sprawl + long-scroll records (IXACT) → one record, AI summary on top, unified timeline.
2. Uniform card walls posing as bento → size by importance, ≤12 tiles, curate to 5–9 prominent.
3. Density that assumes a 27" monitor (Lofty) → density toggle, graceful degradation.
4. Gold text on white / navy-on-teal with no value gap → gold = highlight only, teal = the one accent, neutrals carry structure.
5. Web/mobile divergence (Sierra) → same IA + components across breakpoints.
6. Blank empty states → demo-seeded + one CTA + onboarding checklist.
7. Spinners/pessimistic UI → optimistic updates + skeletons + <100ms transitions.
8. Color as decoration → color as punctuation.
9. Modal-on-modal / deep menu burial → command palette + right drawers.
10. Gradients/heavy shadows/glossy chrome → border-first, flat, one elevation for floats.

Mockups

Standalone HTML (Tailwind via CDN + token overrides), in C:\dev\realtor-mockups\ with an index.html gallery. Build order (founder: backend command center first): Dashboard → Leads (list/drawer + Kanban) → Lead record → Conversation inbox → Content Studio → Listings → Settings/Integrations → then public website templates.