Design a dark-mode website section: deep midnight canvas electrified by glowing cyan and lime synaptic data streams bridging chaotic legacy friction into radiant automated clarity.
LAYOUT
The section follows an asymmetric dual-hemisphere layout capped by a 72px transparent header bar with left-aligned branding and right-aligned navigation. The left quadrant holds the primary marketing thesis, dual CTA cluster, and trust badges, transitioning directly down into the 'BEFORE' friction list. The right hemisphere is dominated by luminous flow graphics converging into a floating 'Screening journey' card, balanced below by 'The Adialante way' modern list and anchored at the bottom by a four-column floating metrics ledger.
PALETTE (use these exact hex values)
- #02060C — Deep Space Navy: Primary full-bleed background canvas absorbing all luminescence and anchoring high contrast elements
- #081726 — Translucent Cyan Surface: Glassmorphic backdrop for floating modal journey cards and anchored metric bars
- #103B52 — Subtle Teal Border: One-pixel structural perimeter stroke defining containers against the atmospheric particle backdrop
- #D4F843 — Electric Chartreuse: High-priority CTA pill fill, brand dot accent, and financial metric value highlight
- #38E1FF — Synaptic Cyan: Hero title accent phrase, illuminated fiber graphic paths, and digital data indicators
- #34D399 — Verification Emerald: Status checkmark badges, success pill tags, and positive clinical metric markers
- #FFFFFF — Pure Optical White: Headline text, logo wordmark, and high-priority titles
- #8E9CAE — Muted Slate Blue: Sub-hero explanatory body copy, negative before-state lists, and subtle navigational items
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 20px subheading, 24px heading, 60px display. Tracking -0.03em at display, 0 at body, 0.08em at micro labels. The voice is authoritative, clinically credible, and razor-sharp, executed through a clean geometric sans-serif (Plus Jakarta Sans match). Tight display tracking (-0.03em) lends technical rigor to bold claims, while generous line heights (1.5) on slate body copy ensure medical explanations remain approachable and friction-free.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered entirely through optical luminosity and glass translucency rather than traditional dropped shadows. Dark translucent surfaces (#081726) allow the glowing biological particle field beneath to bleed through, while fine 1px strokes in teal (#103B52) define structural edges against the pure black canvas. Glowing radial gradients behind key points create layered depth from background void to foreground typography.
IMAGERY
The visual anchor is a generative, particle-based synaptic network split across the vertical center. The left side manifests as chaotic, dense, desaturated white fibers depicting clinical friction; the right side converges into orderly, luminous cyan and emerald streams of algorithmic efficiency. Avoid standard clinical stock photography, doctor headshots, or sterile hospital scenes.
SIGNATURE DETAIL — the thing that makes this design itself
The central bifurcation threshold: a visual and conceptual dividing line where tangled, chaotic white fibers on the left are transformed through a circular conduit node into luminous, streamlined cyan and lime green data paths on the right. This transformation move visually literalizes the core value proposition of removing friction without needing words.
MUST
- Use solid Electric Chartreuse (#D4F843) strictly on primary conversion elements to preserve click-intent clarity.
- Split conceptual narratives visually with monochromatic grey for legacy states and vibrant glowing cyan/emerald for automated states.
- Wrap floating interactive previews in translucent dark navy glass with 1px fine stroke (#103B52) borders.
- Pair large bold metrics with micro 13px descriptors directly below or beside the quantitative value.
AVOID
- Do not use heavy, fully opaque container backgrounds that sever the continuous particle graphic in the background.
- Never tint body paragraphs fully white; reserve #FFFFFF for primary headers to prevent eye fatigue on dark backdrops.
- Avoid box shadows with solid black drop; use subtle cyan/emerald radial glows or fine 1px luminescent borders instead.
- Do not style the 'BEFORE' failure state using harsh red; use subdued, desaturated slate (#8E9CAE) with crossed circles.
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 中尝试 
