Design a light-mode website section: precision-engineered analytics bento balancing a high-conviction dark anchor card against clean operational light surfaces.
LAYOUT
The section is framed within a 1200px max-width container, commencing with a centered text cluster: badge, display headline, and muted lead paragraph. Below, the bento grid is arranged into two rhythmic rows across a 12-column grid. The top row features a double-width dark hero card spanning ~6 columns, flanked by two 3-column light cards. The bottom row distributes analytical density evenly across four modular cards (~3 columns each), maintaining consistent 20px horizontal and vertical gutters.
PALETTE (use these exact hex values)
- #fcfcfd — Canvas Background: Global backdrop supporting the light surface elements
- #ffffff — Card Surface Light: Background fill for standard light analytics and utility cards
- #141724 — Hero Card Surface Dark: Dominant anchor card background for high-priority AI intelligence feature
- #edf0f5 — Card Border: Hairline perimeter stroke separating light cards from canvas and each other
- #0f172a — Primary Text: Primary section titles, card headings, and key metric labels
- #64748b — Muted Text: Feature descriptions, timestamps, and secondary table data
- #7c3aed — Intelligence Violet: Category badges, active AI highlights, and sparkline primary stroke
- linear-gradient(135deg, #c084fc 0%, #a855f7 100%) — Violet Gradient Text: Gradient applied to the AI Intelligence text on dark hero card
- #10b981 — Positive Metric Green: Positive delta text, pulse indicators, and live detection pills
- #f5f3ff — Badge Tint Violet: Pill background for the section kicker badge and icon containers
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, system-ui), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 16px subheading, 20px heading, 38px display. Tracking -0.03em at display, -0.01em at body, +0.06em at badge. The typographic voice is authoritative, disciplined, and clinical—evoking high-tier financial intelligence and quantitative rigor. The neo-grotesque sans-serif (Inter match) uses tight negative tracking at large sizes to deliver punchy, confident headlines without sacrificing legibility. Body copy remains airy with 1.45 line height in neutral slate, ensuring dense tables and data points remain readable without clutter.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 8px, buttons 999px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is flattened and minimal throughout. Cards rely entirely on a 1px perimeter border (#edf0f5) against the #fcfcfd ground rather than drop shadows. The only perceptible layered depth exists within the dark hero card, where an interior panel (#1d2133) sits slightly raised over the base dark card (#141724).
IMAGERY
Photography is limited strictly to realistic, low-key direct response ad creative thumbnails inside the dark card's video carousel. These thumbnails are strictly 1:1 or 4:5 ratios with subtle rounded corners (4px) and small video play-button overlays. Abstract 3D shapes, generic corporate stock photography, or heavy vector illustrations would fundamentally break the clinical fintech-grade aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The singular dark-mode anchor card embedded directly inside a pristine, daylight-bright bento grid. This inversion directs 80% of visual momentum directly to the core AI engine feature while allowing surrounding supporting cards to breathe as utilitarian white workspaces. It is ruined if secondary cards also adopt dark themes, collapsing the deliberate figure-ground contrast.
MUST
- Reserve the dark surface (#141724) strictly for the primary AI intelligence hero card to preserve focal balance.
- Keep all card borders at exactly 1px solid (#edf0f5) without adding heavy drop shadows.
- Use uppercase, widely-tracked text (11px, +0.06em) exclusively for the top kicker badge.
- Keep card internal paddings uniform at 24px across both regular and expanded grid cells.
AVOID
- Do not invert multiple cards to dark mode; having more than one dark card ruins the focal hierarchy.
- Avoid thick colored borders or multi-colored outlines around light cards.
- Do not use saturated, high-contrast primary colors for the chart visualisations.
- Avoid serif typefaces or expressive humanist display fonts in headings.
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 中尝试 
