Design a dark-mode website section: deep navy twilight illuminated by crisp cyan neon halos and frosted fintech intelligence cards.
LAYOUT
Structured two-column hero layout inside a 1280px container with a clean top navigation bar. The left column (roughly 55% width) holds product context, massive display headline, stat quad-grid, CTAs, and compliance credentials in strict vertical order. The right column (roughly 45% width) anchors the interactive AI workflow diagram floating above an intense cyan-purple backlight.
PALETTE (use these exact hex values)
- #050914 — Midnight Void: Primary page background across the entire hero canvas
- #0B1528 — Glass Elevated: Base fill for interactive metric cards and glass product containers
- #22D3EE — Electric Cyan: Primary CTA fill, glowing halo accents, and active link traces
- #34D399 — Active Mint: Status indicator pills, checkmark icons, and positive quantitative metrics
- #8B5CF6 — Violet Radiance: Atmospheric ambient glow in the lower-right background
- #FFFFFF — Text Crisp White: Display titles, section headings, and primary button labels
- #8F9BAE — Text Muted Slate: Hero description paragraph, metric descriptors, navigation links, and subtext
- #1E293B — Border Subtle Glass: 1px hairline outlines for dark cards, tags, and secondary action button
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 26px heading, 54px display. Tracking -0.03em on headline, 0 on body. Clean, authoritative, and computational sans-serif typified by Inter or Plus Jakarta Sans. Its neutral geometry and tight display tracking (-0.03em) convey enterprise precision, algorithmic speed, and institutional security. It should be replaced only by modern geometric grotesque fonts like Geist or SF Pro Display.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 999px. Spacing on a 4px unit, 20px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through luminosity and atmospheric backlighting rather than conventional dropshadows. Floating glass containers sit atop diffuse radial blurs (blur: 60px to 100px) of electric cyan and violet, making components look backlit by high-tech instrumentation. Hairline 1px semi-transparent borders catch light along the edges to cleanly separate layers.
IMAGERY
Avoid photographic assets or human imagery entirely. The visual narrative relies exclusively on precise vector schematics, glowing pipeline nodes, status indicators, and miniature data viz gauges. Any realistic device frames or stock imagery would break the futuristic algorithmic aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-node AI pipeline diagram floating over an intense localized cyan-violet radial flare. The crisp 1px glowing connectors and backlit glass panels turn abstract credit decisioning into a tangible, high-speed automated machine. Misusing this by spreading the glow uniformly across the screen destroys the focus and flattens the hierarchy.
MUST
- Use deep, near-black midnight navy (#050914) rather than pure neutral black (#000000).
- Confine saturated neon cyan (#22D3EE) to focal highlights, glowing halos, and key actions.
- Pair metrics with high-contrast tint colors (mint green for success, cyan for speed).
- Employ ultra-thin 1px borders in rgba(255, 255, 255, 0.08) to delineate glass components.
AVOID
- Do not use sharp 0px or boxy 4px corners on UI cards; stick to 14px to 20px radii.
- Do not use heavy, opaque dark cards that obscure the rich atmospheric background glows.
- Avoid warm colors like yellow, orange, or crimson except for critical error states.
- Do not set long-form body text in pure white; use muted slate (#8F9BAE) to preserve contrast.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
