Design a light-mode web interface screen: sunlit modern architectural clarity paired with crisp cobalt accents and refined, airy grid cards.
LAYOUT
The page adheres to a 1280px centered grid with strict vertical cadence. It opens with a split 2-column hero balancing heavy type against a rich photograph, steps down to a 4-column value proposition grid, and flows into a structured property gallery preceded by filter pill controls and section headers.
PALETTE (use these exact hex values)
- #FFFFFF — Pure White: Dominant background canvas, interior card surfaces, and badge overlays
- #F8FAFC — Subtle Gray Surface: Subtle background panels, icon tile containers, and secondary interactive states
- #2563EB — Cobalt Primary: Primary CTAs, highlighted headline span, active pill tags, and key badge accents
- #0F172A — Ink Slate: Primary hero headings, section titles, property names, and strong monetary figures
- #64748B — Muted Slate: Body paragraphs, metadata subtitles, specs labels, and non-active filter text
- #E2E8F0 — Border Gray: Structural borders for cards, filter chips, dividers, and icon button outlines
- #10B981 — Emerald Green: Positive performance metric tag (+24%), trust star icon, and status badge
- #EFF6FF — Soft Blue Tint: Feature icon backgrounds and light accent containers across value props
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Manrope, DM Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 28px heading, 48px display. Tracking -0.03em display, -0.01em body. The typography is clean, confident, and tech-forward, embodying the modern proptech standard pioneered by Plus Jakarta Sans. Its circular counters and sharp terminals project precision and accessibility without feeling generic or clinical. Inter or Manrope serve as precise drop-in replacements.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created primarily through flat hairline framing (#E2E8F0) over crisp white surfaces, reserving true elevation for floating overlays. The hero badges utilize a wide, diffused shadow (0px 10px 30px rgba(15, 23, 42, 0.08)) to appear hovered comfortably above architectural photography.
IMAGERY
Photographs must depict sun-drenched, high-end contemporary architecture with clean geometric lines, infinity pools, large glass curtain walls, and refined interior staging. Never use dark, moody, or grainy architectural shots; natural daylight and luxury minimalism are essential.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the dual-tone hero headline featuring a single high-impact colored word ('property.' in #2563EB) directly mirrored across the fold by floating metric badges nestled inside a 24px curved architectural photograph. It seamlessly fuses Silicon Valley SaaS UI with architectural luxury.
MUST
- Highlight key verbs or core nouns in the primary headline using the cobalt blue accent (#2563EB).
- Use generous 16px to 24px corner radii on all card containers and image frames.
- Enclose property imagery in strict aspect ratios with overlaid status pills and favorite hearts.
- Keep icon graphics strictly monoline, enclosed in pastel blue-tinted (#EFF6FF) rounded squircle badges.
AVOID
- Do not use dark or colored canvas backgrounds; preserve the white, airy sunlit atmosphere.
- Avoid serif typefaces; this interface relies entirely on modern geometric grotesque sans-serifs.
- Do not drop border-radius below 8px on buttons and pills; avoid harsh sharp corners.
- Do not clutter property card images with heavy text gradients or full-width banners.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1280:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
