Design a light-mode website section: surgical commercial real estate underwriting balancing warm alabaster daylight with deep abyssal pine foundations.
LAYOUT
The section follows an asymmetric two-column hero layout transitioning into a wide five-column structured footer grid. The hero balances heavy left-aligned typographic copy and action buttons against an expanded right-aligned application viewport mock. Below, the layout transitions decisively into an expansive full-bleed dark footer anchored by branding on the left, four equidistant link stacks in the center, and an email capture card on the right.
PALETTE (use these exact hex values)
- #FAF9F5 — Canvas Warm Alabaster: Primary light canvas background hosting the hero messaging and dashboard preview.
- #051C20 — Abyssal Pine: Deep structural dark background anchoring the footer and newsletter conversion area.
- #0E8B54 — Emerald Accent: Hero headline accent word, primary CTA buttons, badges, and positive data trends.
- #111827 — Charcoal Title: Primary hero display copy, subheadings, and dark button outlines.
- #525D6B — Muted Slate: Descriptive hero paragraphs, trust indicator labels, and secondary UI metadata.
- #8FA0A6 — Footer Muted Link: Navigation text links and sub-labels across the dark footer columns.
- #EBF6F0 — Mint Pill Background: Subtle low-contrast container for top category pill and chip labels.
- #08272C — Dark Input Field: Background fill for the embedded newsletter input field inside the dark footer.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, DM Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 15px body, 18px body-lg, 20px subheading, 28px heading, 48px display. Tracking -0.025em at display, -0.01em at body, +0.05em at caps. The typographical tone is authoritative, financial, and technologically forward, using a modern geometric sans-serif with sturdy vertical stems and open apertures. It delivers institutional reliability for high-stakes commercial transactions while remaining agile and contemporary. Inter or Plus Jakarta Sans represent ideal accessible font matches for this system.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is strictly restrained to the product preview container, which floats with a diffuse, soft ambient blur of 0px 20px 40px rgba(17,24,39,0.06). In the dark footer canvas, elevation is flattened completely; visual separation is handled solely through planar fills (such as #08272C on inputs) and delicate 1px border lines (#0C363D).
IMAGERY
Imagery is confined entirely to contextual architectural photography within software cards, showing high-end commercial property glass facades under natural light. Photography must never appear as decorative splash banners or generic stock handshakes. Any background decoration consists exclusively of faint topographic contour line vectors.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-canvas tonal transition: bridging a warm ivory daytime hero with an authoritative abyssal-pine footer via an active emerald accent thread (#0E8B54). This is commonly misused by defaulting the footer to neutral charcoal or pure black, which immediately destroys the bespoke, asset-backed wealth identity.
MUST
- Reserve the emerald green (#0E8B54) solely for active conversions, emphasis words, and positive signals.
- Maintain the exact contrast between the warm #FAF9F5 hero surface and the deep #051C20 footer anchor.
- Use 8px corner radii consistently across buttons, input boxes, and minor cards.
- Keep footer column headers in uppercase with +0.05em tracking for crisp legibility.
AVOID
- Do not use pure black (#000000) for the footer; stick to deep spruce pine (#051C20).
- Do not introduce sharp 0px or rounded pill 999px radii to standard buttons.
- Avoid high-saturation neon greens; the brand requires a grounded, institutional emerald.
- Never stack primary and secondary CTAs vertically on desktop layouts.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
