Oops! Sorry!!


This site doesn't support Internet Explorer. Please use a modern browser like Chrome, Firefox or Edge.

Padzilly — Realtor Invitation (Buyer Connected): Email + Landing Page Design Spec
Padzilly Design Specification

Realtor Invitation — Buyer Already Connected

Scenario: the loan officer has prequalified a shared buyer and uploaded their approved financing. The Realtor has not yet activated a Padzilly account. Two deliverables below, followed by developer notes.

1
Deliverable 1 Realtor invitation email — 600px, table-based, email-client safe
2
Deliverable 2 Realtor invitation landing page — responsive, semantic HTML/CSS
EN
ES
Buyer Financing Ready

Hello Moe Closings

Your Buyer Is Ready to Shop

Les Falout has uploaded your buyer's approved financing to Padzilly.

Activate your free Realtor Portal to build your buyer's saved property search, view lender-qualified monthly payments and cash to close on every listing, and keep your buyer connected to your branded home search experience from search to offer.

Activate Your Realtor Portal

Why Realtors Choose Padzilly

Homes They Can Buy Today

Build the buyer's saved property search inside Padzilly. Every matching listing is evaluated using their approved financing before the alert is sent.

Keep This Buyer Shopping With You

Give the buyer a branded search experience instead of sending them to national portals designed to connect them with competing agents.

Stronger Offers Start Here

Create property-specific approval and offer letters that match the exact property and proposed offer price.

Search and Financing, Finally Connected

Keep the buyer, Realtor, lender, home search, and financing aligned from the first search through the accepted offer.

Courtesy of Your Lending Partner

Your Padzilly Realtor Portal is provided at no cost by Les Falout.

Buyer already connected
No setup fees
No monthly subscription
Takes less than a minute to activate
Activate Your Realtor Portal
Developer Notes Dynamic content, tokens, responsive behavior, and build specs

Dynamic content — must be templated, not hard-coded

FieldAppears inExample token
Loan officer nameEmail from-name, subject-line context, greeting body, portal section, landing page greeting/hero{{loan_officer_name}}
Realtor nameEmail greeting ("Hello Moe Closings,"), landing page greeting{{realtor_first_name}} / {{realtor_full_name}}
Buyer name (if later displayed)Not shown in current copy — copy currently says "your buyer" generically. Reserve a token for a future personalized version.{{buyer_name}}
Invitation / activation URLEmail CTA (both instances), landing page primary + secondary CTA{{invitation_url}}
Sign-in URLLanding page footer link{{signin_url}}
Padzilly logo URLEmail header, landing page header{{padzilly_logo_url}}
LanguageLanding page EN/ES toggle — determines which copy set renders{{locale}}
Loan officer company / profile infoNot shown in current copy; reserve a slot near "Courtesy of Your Lending Partner" if a company name or NMLS ID needs to display later{{lo_company_name}}

Email build requirements

  • Recommended width: 600px, table-based layout (role="presentation" tables, not divs) for Outlook/Gmail compatibility.
  • Use inline styles in production, not a linked stylesheet — most email clients strip <head> styles.
  • No JavaScript, no external web fonts, no background images required for essential content. Font stack: Arial, Helvetica, sans-serif.
  • Hidden preheader text (max ~100 characters), placed immediately after the opening body table: "Les Falout has prepared your buyer's financing in Padzilly. Activate your free Realtor Portal to get started."
  • One primary CTA URL, used for both the top and bottom "Activate Your Realtor Portal" buttons — they should link to the same {{invitation_url}}.
  • Avoid image-only sections — all copy must render as live text if images are blocked.
  • Logo: swap the text fallback for <img src="{{padzilly_logo_url}}" alt="Padzilly" width="130"> once a hosted asset URL exists.

Landing page responsive behavior

  • Breakpoint: 640px. Below this, hero heading drops from 38px to 28px, header/hero/benefit-grid/portal padding tighten, and the 2-column benefit grid collapses to a single column.
  • Primary CTA stays above the fold on both desktop and mobile — it sits directly under the hero supporting copy, above the illustration.
  • Illustration is decorative and may be hidden below ~400px viewport width if vertical space is tight.

Button states

  • Default: #EB5A2D background, white text, 8px radius (landing page) / 6px radius (email).
  • Hover/focus (landing page only): darken to #D14A20; include a visible focus outline for keyboard navigation.
  • Minimum tap target: 44px height on mobile — current padding (16px vertical) satisfies this at all breakpoints.

Colors — sampled from existing Padzilly reference designs

TokenHexUse
Navy (dark)#182A68Hero gradient start
Navy (brand)#233C90Headings, logo mark, primary text accents
Blue (mid)#2E4FB8Hero gradient end
Orange (CTA)#EB5A2DPrimary buttons, kicker accents
Orange (hover)#D14A20Button hover/active state
Body gray#4A4F63Paragraph text
Pale background#F4F6FCBenefit cards, portal box, email badge
Hairline#E7E9F3Dividers, borders

Typography & spacing

  • Font stack throughout: Arial, Helvetica, "Segoe UI", sans-serif (system-safe, no external font loading).
  • Email H1: 23px/1.32, bold. Landing page H1: 38px desktop / 28px mobile, 1.16 line-height, bold.
  • Body copy: 13.5–14px at 1.6–1.65 line-height for readability at small sizes.
  • Section rhythm: 26–36px vertical spacing between email content blocks; 40–52px between landing page sections.
  • Corner radius: 6px on email buttons, 8px on landing page buttons and portal box, 10–14px on cards and outer containers, 20px on badges/pills.

Assets

  • Padzilly logo: currently rendered as a text/SVG fallback in this spec — replace with the hosted logo asset at {{padzilly_logo_url}} in both the email header and landing page header.
  • Hero illustration: simple two-figure/dashboard SVG shown here as a placeholder concept representing Realtor + lender collaboration; swap for final illustration asset if one exists in the brand library.

Accessibility

  • All decorative SVGs marked aria-hidden="true"; the hero illustration carries a descriptive role="img" + aria-label since it's meaningful, not purely decorative.
  • Text/background contrast checked against WCAG AA: white body text on the navy/blue hero gradient, and dark-gray/navy text on white or pale backgrounds throughout.
  • Buttons sized for comfortable mobile tapping (44px+ height) with visible focus states for keyboard users.
  • Once the real logo image is in place, include descriptive alt="Padzilly" text.