Padzilly — Buyer Invitation (Pre-Prequalification): Email + Landing Page Design Spec

Padzilly Design Specification

Buyer Invitation — Pre-Prequalification (Invited by Realtor)

Scenario: a Realtor invites a buyer who hasn't been prequalified yet. The goal is to get them shopping today and moving naturally toward prequalification. Two deliverables below, followed by developer notes.

Deliverable 1 Buyer invitation email — English + full Spanish translation, 600px, table-based

From

Padzilly Team <[email protected]>

Subject

{{RealtorName}} Invited You to Start Your Home Search

Preheader (hidden): Start shopping with your Realtor today—and unlock a personalized home search when you're ready to get prequalified.

PADZILLY

Your Home Search Starts Here

Hello {{BuyerFirstName}},

{{RealtorName}} has invited you to begin your homebuying journey with Padzilly.

Browse homes, save your favorites, and collaborate with your Realtor — all in one place.

To help you experience Padzilly right away, we've already included two sample loan scenarios—a typical FHA loan and a 5% down Conventional loan. You can switch between them as you browse homes and see how different financing options affect your monthly payment and estimated cash to close. Once you're prequalified, those sample loan scenarios are replaced with your own approved financing, creating a completely personalized home shopping experience.

Start Shopping

🏡

Find Homes You'll Love

Browse thousands of MLS listings, save your favorite homes, and organize your home search in one place.

❤️

Shop Together

Search, save favorites, and share homes with {{RealtorName}} as you explore the market together.

🔓

Unlock Your Personalized Home Search

Start shopping today using two realistic sample loan scenarios. Once you're prequalified, they're replaced with your own approved financing, so every listing displays your real monthly payment and estimated cash to close instead of generic estimates.

Your homebuying journey starts here.
Enjoy your Padzilly experience.

The Padzilly Team

Español

Su Búsqueda de Vivienda Comienza Aquí

Hola {{BuyerFirstName}},

{{RealtorName}} te ha invitado a comenzar tu proceso de compra de vivienda con Padzilly.

Explora viviendas, guarda tus favoritas y colabora con tu agente — todo en un solo lugar.

Cuando estés listo, simplemente conéctate con un prestamista participante para desbloquear una búsqueda de vivienda personalizada según tu financiamiento aprobado.

Comenzar a Comprar

🏡

Encuentra Viviendas Que Te Encantarán

Explora miles de listados del MLS, guarda tus viviendas favoritas y organiza tu búsqueda en un solo lugar.

❤️

Compren Juntos

Busca, guarda favoritas y comparte viviendas con {{RealtorName}} mientras exploran el mercado juntos.

🔓

Desbloquea Tu Búsqueda Personalizada

Una vez que estés precalificado, Padzilly se transforma en una búsqueda de vivienda hecha para ti — con tu pago mensual real y el efectivo estimado para el cierre en cada listado, además de herramientas que te ayudan a descubrir más viviendas que realmente puedes comprar con confianza.

Tu proceso de compra de vivienda comienza aquí.
Disfruta tu experiencia Padzilly.

El equipo de Padzilly

Deliverable 2 Buyer invitation landing page — new design, matching the Realtor-invitation visual family

PADZILLY

Invited by Your Realtor

Hello {{BuyerFirstName}}!

Your Home Search Starts Here

{{RealtorName}} has invited you to begin your homebuying journey with Padzilly. Browse homes, save your favorites, and collaborate with your Realtor from one convenient place.

To help you get started today, Padzilly includes two realistic sample loan scenarios—a typical FHA loan and a 5% down Conventional loan. You can switch between them while exploring homes to experience how financing affects your monthly payment and estimated cash to close. Once you're prequalified, those sample loan scenarios are replaced with your own approved financing, creating a home search personalized specifically for you.

Start Shopping

Why You'll Love Shopping with Padzilly

🏡

Find Homes You'll Love

Browse MLS listings, save favorites, and organize your home search.

❤️

Shop Together

Stay connected with {{RealtorName}} while searching and sharing homes.

🔓

Experience Padzilly Today

Start shopping immediately using two realistic sample loan scenarios. Once you're prequalified, they're replaced with your own approved financing, giving you your real monthly payment and estimated cash to close on every listing.

🚀

Grow Into a Smarter Home Search

As your homebuying journey progresses, Padzilly unlocks additional tools that help you discover more homes you can buy, make smarter offers, and shop with greater confidence.

Start Shopping with {{RealtorName}}

Your Realtor has invited you to begin your home search with Padzilly.

To help you get started today, your account includes two realistic sample loan scenarios—a typical FHA loan and a 5% down Conventional loan—so you can experience how Padzilly works before you're prequalified.

When you're ready to become prequalified, those sample loan scenarios are replaced with your own approved financing, allowing every home you browse to display your real monthly payment and estimated cash to close instead of generic estimates that don't reflect your unique financial situation.

Start Shopping

•

Developer Notes Dynamic content, tokens, responsive behavior, and build specs

Dynamic content — must be templated, not hard-coded

Field	Appears in	Example token
Buyer first name	Email greeting (EN + ES), landing page greeting	`{{BuyerFirstName}}`
Realtor name	Email subject, intro line, "Shop Together" benefit (EN + ES), email footer note, landing page intro copy and matching benefit card	`{{RealtorName}}`
Invitation / activation URL	Email CTA (EN + ES), landing page primary + secondary CTA	`{{invitation_url}}`
Sign-in URL	Landing page footer link	`{{signin_url}}`
Padzilly logo URL	Email header, landing page header	`{{padzilly_logo_url}}`
Language selection	Landing page EN/ES toggle — determines which single-language copy set renders on the landing page (the email always shows both languages stacked, same pattern as the previous buyer email)	`{{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: "Start shopping with your Realtor today—and unlock a personalized home search when you're ready to get prequalified."
English content renders first, full Spanish translation immediately below a labeled divider — always both languages, not a toggle.
One primary CTA per language block ("Start Shopping" / "Comenzar a Comprar"), both pointing to the same {{invitation_url}}.
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 ("Start Shopping") stays above the fold at all breakpoints — it sits directly under the hero supporting copy.
This is a new page design, not a reuse of the existing prequalified-buyer landing page — built to visually match the Realtor-invitation family (gradient hero, 2×2 benefit grid, portal-style closing section) while speaking to a buyer who hasn't been prequalified yet.

Button states

Primary CTA default: #EB5A2D background, white text, 8px radius (landing page) / 6px radius (email).
Both CTAs on this page ("Start Shopping" in the hero and in the closing section) use the primary orange style; the navy secondary style defined in the shared CSS is no longer used on this particular page.
Hover/focus (landing page only): primary darkens to #D14A20, secondary darkens to #182A68; both include a visible focus outline for keyboard navigation.
Minimum tap target: 44px height on mobile — current padding satisfies this at all breakpoints.

Colors — sampled from existing Padzilly reference designs

Token	Hex	Use
Navy (dark)	#182A68	Hero gradient start, secondary button hover
Navy (brand)	#233C90	Headings, logo mark, secondary button
Blue (mid)	#2E4FB8	Hero gradient end
Orange (CTA)	#EB5A2D	Primary buttons, badge dot
Orange (hover)	#D14A20	Primary button hover/active state
Body gray	#4A4F63	Paragraph text
Pale background	#F4F6FC	Benefit cards
Hairline	#E7E9F3	Dividers, borders

Typography & spacing

Font stack throughout: Arial, Helvetica, "Segoe UI", sans-serif.
Email H1: 21px/1.3, bold. Landing page H1: 38px desktop / 28px mobile, 1.16 line-height, bold.
Email body copy: 13–13.5px at 1.55–1.6 line-height, kept compact to match the reference email's tone.
Landing page benefit cards sit in a 2×2 grid on desktop, single column on mobile; the closing "Start Shopping with {{RealtorName}}" section mirrors the portal-style panel used on the Realtor-invitation pages, now reinforcing the sample-loan-scenario story with a primary "Start Shopping" CTA.

Assets

Padzilly logo: currently rendered as a text/SVG fallback — replace with the hosted logo asset at {{padzilly_logo_url}} in both the email header and landing page header.
No illustration asset used on this page by design — kept intentionally simple and text/icon-led, consistent with the "concise and conversion-focused" direction.

Accessibility

All decorative SVGs marked aria-hidden="true".
Text/background contrast checked against WCAG AA: white/light-blue 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.
Emoji icons (🏡 ❤️ 🔓 🚀) are decorative alongside text labels — each is immediately followed by a text title conveying the same meaning.