Design a light-mode mobile app interface screen: quiet residential reassurance powered by deep forest emerald, airy whitespace, and soft human photography.
LAYOUT
The mobile viewport is structured vertically starting with a clean utility header, flowing into an asymmetrical hero that pairs left-aligned headlines with right-aligned photographic art. Below the hero title, the floating address dock serves as the focal midpoint before transitioning into a centrally anchored 'How it works' workflow. The lower scroll opens into an enclosed container card displaying side-by-side comparative feature blocks.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Primary screen background and floating card fill
- #e5f0ec — Pristine Mint: Tonal background for low-emphasis cards and secondary badges
- #154334 — Forest Emerald: Brand anchor used on primary CTA buttons, badges, and dark card fills
- #19211e — Text Charcoal: High-contrast headings, display typography, and icon strokes
- #6b7571 — Muted Sage Slate: Subtitles, secondary descriptive paragraphs, and input placeholders
- #e8ecea — Border Hairline: Section dividers, dashed step connectors, and card perimeter strokes
- #f3f6f5 — Neutral Badge Tint: Circular background container for step illustration icons
TYPOGRAPHY
Typeface Plus Jakarta Sans (or General Sans, Inter, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 17px subheading, 20px heading, 36px display. Tracking -0.02em at display, 0.08em on uppercase eyebrows. The typography speaks with quiet confidence, clarity, and modern institutional trust. The neo-grotesque sans (closely matched by Plus Jakarta Sans or General Sans) provides tall x-heights and open apertures that remain crisp at small sizes while offering substantial weight for punchy short headlines. Free open-source alternatives like Inter work seamlessly provided headline letter-spacing is tightened.
GEOMETRY & SPACING
Corner radii — cards 20px, links 999px, inputs 18px, buttons 12px. Spacing on a 4px unit, 16px gaps, 36px between sections, 390px container, comfortable density.
DEPTH
Depth is created using a quiet, diffused ambient shadow beneath the primary input dock (0px 10px 30px rgba(25, 33, 30, 0.06)). Most supporting elements rely entirely on flat background color contrast and hairline borders rather than multi-layered skeuomorphic drop shadows.
IMAGERY
Photography features realistic, warm, candid human portraits—such as landlords or property owners—fading seamlessly into the background canvas with soft gradient masking. Studio stock photos with exaggerated corporate gestures or artificially high contrast would completely break the trusted residential ambiance.
SIGNATURE DETAIL — the thing that makes this design itself
The floating input dock combined with the overlapping indexed circular icon steps: the search pill anchors immediate transaction intent, while the trio of circular nodes connected by dashed lines with tiny numeric corner badges immediately explains an unfamiliar financial model with effortless clarity.
MUST
- Retain the airy photographic gradient fade in the hero so text retains full legibility against pure white.
- Use deep forest emerald (#154334) exclusively for primary CTA buttons, number badges, and focal cards.
- Ensure step badges overlap the icon circle at exactly the bottom-right perimeter.
- Keep text input placeholders tinted in calm slate grey (#6b7571) rather than washed-out low contrast.
AVOID
- Never introduce harsh saturated primary greens; rely strictly on deep forest and soft mint tones.
- Do not use sharp 90-degree corners anywhere in the layout.
- Avoid heavy dark drop shadows; ambient elevation must remain beneath 8% opacity.
- Do not omit the dashed linking lines between sequential step circles on desktop or mobile.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1376:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
