Design a light-mode website section: surgical fintech precision paired with a high-contrast nocturnal spotlight hero card.
LAYOUT
The section opens with an aligned left-hand header: a pill badge followed by a concise 32px headline and 2-line intro. Below sits a compound grid consisting of a wide left spotlight card (occupying ~38% width and spanning two rows) coupled with a 3-column by 2-row grid of capability cards (~62% width). The section terminates with a full-width, 4-column trust strip reaffirming security and compliance credentials.
PALETTE (use these exact hex values)
- #F4F6F8 — Canvas Background: Outer structural page canvas framing the primary content container
- #FFFFFF — Card Surface: Base fill for light persona cards and bottom proof matrix
- #0A0D14 — Spotlight Hero Surface: Deep dark surface for the flagship AI agent coverage card
- #2563EB — Brand Cobalt: Primary interactive button fill, active pill links, and key icon accents
- #0F172A — Text Primary: Main section headlines, card titles, and high-emphasis body text
- #64748B — Text Secondary: Body paragraphs, card descriptions, and secondary metadata
- #E2E8F0 — Border Subtle: Hairline card boundaries, micro-status tags, and divider rules
- #EEF2FF — Soft Indigo Tint: Background fill for top pill tag and technology glyph backgrounds
- #10B981 — Mint Success: Verification checkmarks, completion badges, and pipeline state indicators
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Text, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 16px subheading, 24px heading, 32px heading-lg. Tracking -0.025em on display, 0 on body, 0.05em on uppercase badges. The voice is authoritative, modern, and risk-mitigating, characteristic of next-generation infrastructure fintech. Inter (or equivalent neo-grotesk) operates with disciplined neutrality, relying on subtle tracking tightening on headlines and crisp tabular clarity in data widgets. No decorative or serif typography is permitted.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Depth is strictly planar and graphic rather than shadow-driven. Cards use hairline 1px borders (#E2E8F0) with extremely faint ambient blur (0 1px 3px rgba(0,0,0,0.02)). The sole atmospheric depth comes from the internal radial glows and cyan specular highlights of the 3D asset inside the dark spotlight card.
IMAGERY
Imagery is synthetic, technical, and non-photographic. It centers around a futuristic isometric stack of glass-like translucent cards floating above a glowing holographic blue pedestal. Visual artifacts include glowing neon edge-lighting, subtle grid planes, and clean vector UI iconography.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetrical nocturnal spotlight anchor: placing a single, deep black (#0A0D14) 3D-illuminated hero card as a double-row span directly adjacent to a clean 3x2 light-mode grid. It immediately disrupts the monotony of standard feature grids without turning the entire page dark.
MUST
- Anchor the layout using a stark value inversion: one dark hero card surrounded by pristine white modular cards.
- Ensure the spotlight hero card vertically spans exactly the full height of the 2-row grid beside it.
- Give each persona card a unique contextual micro-widget in its footer (e.g. sparkline, pipeline status, or link).
- Maintain uniform 16px outer radii across every primary container and card.
AVOID
- Do not invert all cards to dark mode; the composition relies strictly on the single dark focal point.
- Do not use saturated, primary-colored borders; keep line work hairline and quiet.
- Do not let the headline in the spotlight card exceed 28px to maintain balance with the 3D graphic.
- Do not omit the footer micro-affordances in the 3x2 grid cards; they provide necessary functional depth.
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 中尝试 
