Oops! Sorry!!


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

Padzilly — Buyer Invitation: Email + Landing Page Design Spec
Padzilly Design Specification

Buyer Invitation — Loan Approval Uploaded

Scenario: the loan officer has uploaded the buyer's approved financing for the first time. The buyer has not yet activated their account. Two deliverables below, followed by developer notes.

1
Deliverable 1 Buyer invitation email — English only (site handles language/header separately), 600px, table-based
2
Deliverable 2 Buyer invitation landing page — same structure as the existing page, refreshed copy + compact benefit strip added; header/logo/language toggle excluded (already built site-wide)
Prepared by Your Loan Officer

Hello {{BuyerFirstName}}!

{{LoanOfficerName}} Has Your Home Search Ready

{{LoanOfficerName}} has already connected your approved financing and prepared your personalized Padzilly home search.

Every home you browse displays your real monthly payment and estimated cash to close based on your approved financing—not generic estimates that don't reflect your unique financial situation.

Shop with confidence from your very first search.

Start Shopping →

Your home search is ready. Simply create your account and start browsing.

🏡

See Homes You Can Buy

Search confidently using your approved financing.

💰

Know Your Real Payment

Every listing displays personalized monthly payments and estimated cash to close.

📄

Ready to Make an Offer

Generate a property-specific approval letter whenever you're ready.

Prepared for You by {{LoanOfficerName}}

Your loan officer has already prepared your financing and your personalized Padzilly home search. Your account is ready to activate.

✔Approved financing already connected
✔Personalized monthly payments
✔Estimated cash to close
✔Property-specific approval letters
Start Shopping →
•
Developer Notes Dynamic content, tokens, responsive behavior, and build specs

Dynamic content — must be templated, not hard-coded

FieldAppears inExample token
Buyer first nameEmail greeting (EN + ES), landing page greeting{{BuyerFirstName}}
Loan officer nameEmail intro line (EN + ES), email footer note{{LoanOfficerName}}
Company nameNot shown in current copy — reserve a slot near the loan-officer mention if the lending company name needs to display, matching the original reference's "Sent by X at Company" pattern{{CompanyName}}
Invitation / activation URLEmail CTA (EN + ES), landing page primary CTA{{invitation_url}}
Language selectionHandled by your existing site-wide header/locale system — not duplicated in this spec{{locale}}

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. Font stack: Arial, Helvetica, sans-serif.
  • Hidden preheader text, placed immediately after the opening body table: "Your loan approval has been connected to Padzilly. Start shopping with personalized monthly payments and estimated cash to close."
  • This spec shows English copy only — your platform already handles English/Spanish rendering, so no duplicate translation block or language divider is included here.
  • One primary CTA ("Start Shopping"), pointing to {{invitation_url}}.
  • Logo/header intentionally omitted — this spec assumes your existing email header/logo template wraps this content.

Landing page responsive behavior

  • Breakpoint: 640px. Below this, hero heading drops from 38px to 27px, header/hero/benefit padding tighten, and the 3-column benefit row stacks to a single column.
  • Layout, spacing, and hero structure intentionally match the existing buyer landing page — only copy was refreshed and the compact 3-card benefit strip was added beneath the hero.
  • Primary CTA remains inside the hero, unchanged in position from the current page.

Button states

  • Default: #EB5A2D pill button, white text, 30px radius on the landing page (matches existing rounded-pill style); 24px radius on the email button.
  • Hover/focus (landing page only): darken to #D14A20; include a visible focus outline for keyboard users.
  • Minimum tap target: 44px height on mobile — current padding satisfies this at all breakpoints.

Colors — sampled from existing Padzilly reference designs

TokenHexUse
Navy (brand)#233C90Logo mark, email headings
Navy (hero, solid)#2B3F92Landing page hero background — flat color, matching the existing reference (not a gradient)
Orange (CTA)#EB5A2DPrimary buttons, badge dot
Orange (hover)#D14A20Button hover/active state
Body gray#4A4F63Email paragraph text
Pale background#F4F6FCBenefit cards
Hairline#E7E9F3Dividers, borders

Typography & spacing

  • Font stack throughout: Arial, Helvetica, "Segoe UI", sans-serif.
  • Email H1: 21px/1.3, bold. Landing page H1: 38px desktop / 27px mobile, 1.16 line-height, bold — unchanged from the existing page.
  • Email body copy: 13–13.5px at 1.55–1.6 line-height to keep the message compact and scannable, per the "minimal reading" direction.
  • Benefit rows in the email are compact list rows (icon + 2-line text), not full cards, to avoid lengthening the email.
  • Landing page benefit cards are intentionally small and sit in one compact row beneath the hero — no long paragraphs, consistent with "do not significantly increase page length."

Assets

  • Logo/header excluded from this spec on both the email and landing page — your existing header component and hosted logo asset should wrap this content.
  • Landing page hero illustration/decoration from the existing reference page is preserved as-is; no new illustration was introduced.

Accessibility

  • All decorative SVGs marked aria-hidden="true".
  • Text/background contrast checked against WCAG AA: white/light-blue text on the solid navy hero, 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.
  • Emoji icons (🏡 💰 📄) are decorative alongside text labels — screen readers will announce them, which is acceptable here since each is immediately followed by a text title conveying the same meaning.