Design a light-mode website section: dual-surface fintech showcase pairing high-contrast marketing clarity with a dense, luminous ai underwriting cockpit.
LAYOUT
The layout uses an asymmetric two-column split at the top (marketing narrative at left spanning ~38%, oversized interactive UI mockup at right spanning ~62%), grounded by an even four-column horizontal feature strip along the bottom. Spacing between major tiers remains consistent at 64px to 96px.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Global marketing background providing crisp, cool foundation for cards and copy
- #FFFFFF — Surface White: Interior card backgrounds, main dashboard workspace, and secondary marketing buttons
- #0B0F19 — Cockpit Slate: Dashboard sidebar navigation and bottom docked AI Copilot terminal bar
- #4F46E5 — Electric Indigo: Primary CTA button, kicker pill text, and active interface highlights
- #EEF2FF — Indigo Wash: Background tint for bottom feature icons and subtle AI badge accents
- #10B981 — Pass Emerald: Success badges, underwriting pass indicators, and copilot metric confirmations
- #ECFDF5 — Emerald Tint: Status badge background for deals currently in active underwriting
- #0F172A — Text Primary: Primary headlines, critical numbers, and high-emphasis loan metrics
- #64748B — Text Secondary: Explanatory body copy, table labels, inactive nav items, and timeline metadata
- #E2E8F0 — Border Subtle: Card borders, divider lines, and secondary button strokes
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 44px display. Tracking -0.025em on titles, tabular-nums on stats. The typographic tone is authoritative, quantitative, and institutional yet modern. By relying on Inter or an equivalent modern geometric grotesque with tabular figures, it mimics the rigorous ergonomics of Bloomberg terminals while feeling as polished as consumer fintech. Clean neutral glyphs guarantee legibility across micro-labels (11px) and giant financial milestones.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is achieved through a dramatic, soft atmospheric shadow beneath the entire mock application shell (0 20px 40px -15px rgba(15, 23, 42, 0.1)), establishing the window as a tangible floating layer above the canvas. Inside the application, surfaces remain strictly flat and bounded by 1px hairline borders (#E2E8F0) to prioritize high data density.
IMAGERY
This system rejects decorative photography, abstract shapes, and cartoonish 3D art. All visual narrative is communicated via authentic, high-fidelity software components, interactive chart lines, structured loan data tables, and minimal line iconography.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the dark AI Copilot console docked along the bottom rim of the pristine white dashboard card, pairing natural language input with terminal-green output metrics.
MUST
- Keep dashboard typography crisp and numbers strictly formatted with tabular figures.
- Use emerald (#10B981) exclusively for positive underwriting checks and resolved metric states.
- Maintain the strict two-tone division between the light dashboard work-surface and the dark rail/copilot.
- Enclose the central UI mockup with a multi-layered, low-opacity drop shadow to float it off the light canvas.
AVOID
- Do not use saturated gradients across dashboard metric cards; keep cards clean and white.
- Do not convert the dark sidebar into light grey; the high-contrast navy is essential to the product identity.
- Never use raw red warnings unless representing catastrophic underwriting policy failure.
- Avoid decorative illustrations or lifestyle photography; real UI components must drive the story.
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 中尝试 
