Design a light-mode website section: crisp mathematical verification hovering weightlessly above undulating biomorphic particle fields in pristine clinical light.
LAYOUT
The page opens with a streamlined, fixed-height navigation bar holding a compact lowercase logo on the left, horizontal text links in the center, and dual auth buttons on the right. The hero content sits dead-center: a massive 52px split-color headline, followed by a constrained two-line explanatory paragraph, a centered button cluster, and a triad of trust badges. The lower third features an expansive organic landscape studded with three asymmetrical floating glass metric cards.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Pristine viewport background and base tone across the top hero section
- #4382ec — Atmospheric Cerulean: Diffuse ambient glow framing the left and right peripheral boundaries
- #cc3433 — Crimson Accent: High-urgency primary action buttons and accent split-color headline text
- #161a22 — Charcoal Slate: Primary headline typography and high-contrast brand logo glyph
- #535d6e — Muted Slate: Hero subheadings, navigation link text, and secondary metric labels
- #10b981 — Verification Emerald: Data visualization donut segments and positive checkmarks for proven proofs
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display,system-ui), weights 400/500/600. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 20px subheading, 52px display. Tracking -0.03em on display titles, 0em on telemetry data. The typography is clinical, authoritative, and frictionless, relying on an impeccably spaced modern sans-serif (Inter or similar neo-grotesque). Tight negative tracking on the 52px headline conveys computational density and rigor, while generous line height on the 16px body copy maintains readability. The voice balances peer-reviewed scientific certainty with modern Silicon Valley engineering polish.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, airy density.
DEPTH
Depth is created purely through layer hierarchy and optical glass refraction rather than heavy drop shadows. The bottom 3D molecular landscape acts as the base environment, over which frosted glass tiles float using backdrop blur (16px to 20px) and delicate 1px white specular border strokes. Minimal, highly diffused ambient occlusion shadows (rgba(0, 20, 50, 0.06)) provide gentle separation from the terrain.
IMAGERY
The visual hero feature is an ultra-high-definition, scientific 3D illustration merging microscopic biology with mathematical geometry. It displays undulating particle meshes of electric blue dots beside an intricately rendered purple-and-blue molecular enzyme assembly. The tone is rigorously scientific, sterile, and awe-inspiring, avoiding generic abstract tech spheres or cartoonish biotech vectors.
SIGNATURE DETAIL — the thing that makes this design itself
The defining hallmark is the contrast between the pristine white mathematical space at the top and the dense, undulating particle-wave biomorphic terrain at the bottom, bridged by floating frosted glass verification HUD cards. When implementing, keep the text zone free of heavy background 3D elements so the headline maintains surgical legibility.
MUST
- Reserve crimson #cc3433 strictly for conversion buttons and the focal second half of the display headline.
- Use backdrop-filter blur(16px) with an 80% opaque white border for all floating floating data overlays.
- Keep navigation links strictly regular-weight 14px muted slate with ample horizontal tracking.
- Maintain high contrast by placing all primary typography over the upper white illuminated area.
AVOID
- Do not use heavy, opaque dark cards that obscure the continuous 3D molecular landscape below.
- Avoid colored backgrounds for the hero copy; the upper half must remain luminous white.
- Never make the entire headline crimson; split it precisely between charcoal slate and brand red.
- Do not use sharp 0px corners on cards or CTAs; always apply 10px to 14px soft radii.
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 中尝试 
