Design a dark-mode website section: deep ocean institutional fintech illuminated by algorithmic bioluminescence and high-density financial instrumentation.
LAYOUT
Asymmetric two-column split within a 1280px max-width container. The left 50% contains the vertical narrative stack: uppercase eyebrow, 56px display title, lead text, dual CTA buttons, and a horizontal 4-item feature strip. The right 50% houses a spatial composition of an algorithmic wave field overlaid by floating data cards anchored at varying diagonal coordinates.
PALETTE (use these exact hex values)
- #040814 — Abyssal Canvas: Root background canvas providing high-contrast void for luminescent elements.
- #0B1526 — Widget Surface: Background fill for floating data telemetry cards and nested dashboard containers.
- #16253B — Telemetry Border: Structural 1px outlines separating dark glass cards from dark background canvas.
- #00A3FF — Vivid Cyan: Left anchor of primary brand gradient used in CTAs, logos, and charts.
- #42E29A — Bioluminescent Mint: Right anchor of brand gradient, active indicators, and uppercase category eyebrows.
- linear-gradient(90deg, #00A3FF 0%, #42E29A 100%) — Gradient Luminescence: High-impact fill for primary CTA, title word highlight, and header border strokes.
- #FFFFFF — Pure White: Highest emphasis typography including primary headings, values, and card titles.
- #8EA0B8 — Slate Text Muted: Secondary explanations, navigation items, metrics captions, and inactive labels.
TYPOGRAPHY
Typeface Inter match (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 16px body, 18px body-lg, 24px subheading, 32px heading, 56px display. Tracking -0.02em at display, 0.08em at uppercase captions. Technical, institutional, and impeccably modern. The geometric sans-serif communicates computational precision and financial rigor, shedding ornament in favor of tight negative tracking on display titles and spacious letterspacing on uppercase micro-labels. Substitute with Plus Jakarta Sans or Geist if Inter is unavailable.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through luminance contrast and spatial stratification rather than traditional multi-layered drop shadows. A dark background void hosts an undulating 3D particle mesh, upon which sharp slate-blue cards float with faint cyan-tinted ambient glows and crisp 1px perimeter borders.
IMAGERY
Abstract data topography dominated by an undulating particle mesh rendered in cyan and emerald dot clouds. UI visualization features clean vector telemetry including donut charts, sparklines, and vertical exposure histograms. Avoid photography, photorealistic hardware mockups, or figurative illustrations entirely.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone cyan-to-mint luminescence applied across the final title keyword and matching primary CTA button, contrasted against dark glass telemetry widgets suspended over an undulating algorithmic particle grid. Commonly misused by applying the gradient to entire sentences or saturating the card backgrounds, which destroys legibility.
MUST
- Use the cyan-to-mint gradient sparingly on key nouns, primary CTAs, and active chart segments.
- Maintain high contrast by placing white titles and cyan-accented micro-text against deep slate-navy surfaces.
- Frame all floating data cards with a crisp 1px border (#16253B) to maintain structure over particle graphics.
- Format section eyebrows in uppercase 11px tracking-wide mint green (#42E29A).
AVOID
- Do not introduce warm hues like orange, red, or yellow except for critical negative error states.
- Do not use solid flat black; retain deep oceanic navy (#040814) to harmonize with cyan lighting.
- Do not apply heavy drop shadows with blur radii above 24px; rely on border stroke contrast.
- Do not use multiple gradient words in a single heading; isolate only the single strategic noun.
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 中尝试 
