Design a light-mode website section: crisp clinical fintech white meeting deep oceanic navy through radiant halftone particle fields.
LAYOUT
The page is structured in a two-stage vertical sequence: a two-column hero section followed by an expansive multi-column dark footer. In the light hero, conversion copy occupies the left 50% while an interactive verification metric card occupies the right. Below, the dark footer splits into brand identity on the far left, four categorized link columns in the center, and a newsletter capture form on the far right.
PALETTE (use these exact hex values)
- #ffffff — Canvas Pristine White: dominant light surface for hero canvas and verification card interior
- #050b18 — Midnight Obsidian Navy: heavy anchor surface for footer container and bottom boundary
- #1e6df7 — Electric Cobalt: primary interactive CTA button background, gauge ring strokes, and core brand accents
- linear-gradient(90deg, #1e6df7 0%, #d946ef 100%) — Spectrum Violet Gradient: accent text gradient applied across secondary headline emphasis word
- #16a34a — Trust Forest Green: success tags, checkmark verification confirmations, and high confidence badges
- #0f172a — Deep Slate Ink: primary headline type and high-emphasis labels on light backgrounds
- #64748b — Muted Slate Gray: supporting body text, descriptive subheads, and secondary metadata
- #94a3b8 — Footer Muted Blue: footer links, copyright text, and secondary navigation labels on dark surface
- #e2e8f0 — Subtle Metric Border: outline for verification card, chip pills, and subtle structural dividers
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Text, Geist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 20px subheading, 36px heading, 48px display. Tracking -0.025em for display, 0 for body, 0.05em for uppercase pills. The typographic tone is authoritative, analytical, and modern corporate fintech. A neutral geometric neo-grotesque like Inter provides clinical neutrality, while negative tracking (-0.02em to -0.03em) on headlines communicates density and decisiveness. Open-source substitutes like Plus Jakarta Sans or Geist preserve this exact balance of engineer-grade precision.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created via soft, diffused atmospheric shadows rather than structural borders alone. The floating product card uses a dual-layer box-shadow (0 12px 32px -8px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.03)) to hover cleanly above the white canvas. The dark footer remains intentionally flat and solid, establishing an architectural bedrock.
IMAGERY
Visual assets rely on precise algorithmic point-clouds and iridescent halftone particle dispersion patterns rather than photography. These stippled particle clouds transition between cyan and vivid magenta, evoking high-density computational data. Imagery is strictly mathematical, technical, and non-photographic.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the dual-tone stippled halftone particle cloud flanking the light hero edges and bleeding subtly into the midnight footer. It transforms an otherwise standard corporate two-column layout into an active algorithmic simulation. It is commonly misused by rendering it as a blurry raster gradient instead of discrete, crisp data-point particles.
MUST
- Use generous white space around the verification score card to preserve its floating appearance.
- Pair the electric blue button with a subtle matching colored shadow (rgba(30, 109, 247, 0.35)).
- Keep the gradient headline accent strictly limited to one or two anchor words.
- Set dark footer column headers in crisp semi-bold white (#ffffff) at 15px.
AVOID
- Do not apply heavy dark drop shadows; use soft extended blur values with low alpha.
- Do not reverse the canvas polarity by making the primary hero dark and the footer light.
- Never substitute rounded pill status tags with sharp rectangular borders.
- Do not use multi-color gradients inside standard body paragraphs or navigation links.
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 中尝试 
