Design a dark-mode website section: deep tech bioluminescence slicing through fragmented legacy chaos into structured telemetry.
LAYOUT
The header sits top-docked with standard logo-left, navigation-center, and dual action-buttons right. The hero divides horizontally into roughly 45% left-aligned narrative (eyebrow, massive title, subcopy, button cluster, metric row) and 55% right-aligned interactive comparison diagram. A central vertical light line cuts cleanly down the right quadrant, bisecting legacy items from illuminated modern outputs.
PALETTE (use these exact hex values)
- #060B11 — Deep Void Canvas: Global background tone absorbing surrounding gradient ambient light
- #0B1520 — Subtle Dark Card: Background for legacy 'Before' items and subtle neutral pills
- #081F28 — Luminous Glass Surface: Tinted transparent container background for transformed outcomes
- #76DFD6 — Bioluminescent Cyan: Primary CTAs, accent headline text, and focal transition lines
- #38B2AC — Teal Neon Glow: Vertical laser line core and glow highlight around the positive card
- #5D3E8E — Prismatic Violet: Deep ambient volumetric curtain on the far-right peripheral backdrop
- #FFFFFF — Optical White: Primary typography, high-priority metric numbers, and icons
- #8A99AD — Muted Slate Gray: Body copy, subtitles, deactivated states, and section eyebrows
- #F4F6F8 — Light Foundation Base: Secondary section canvas cutting below the dark hero with 24px top radius
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Text), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px subheading, 26px heading, 48px display. Tracking -0.03em display, 0.08em uppercase tags. Clinical, commanding, and mathematically precise. The clean geometric neo-grotesque (Inter match) conveys enterprise medical grade accuracy and unshakeable data integrity. It balances tight display tracking with generous, legible letterspacing in small uppercase metadata.
GEOMETRY & SPACING
Corner radii — cards 12px, links 999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created strictly through atmospheric backlighting, linear ray effects, and thin translucent glass borders. Shadows are virtually nonexistent; instead, glowing outlines (#38B2AC at 40% alpha) make foreground surfaces float over ambient light plumes. The bottom transition introduces spatial layer-stepping by sliding an opaque light ground (#F4F6F8) directly beneath the dark hero.
IMAGERY
No photographic lifestyle or human imagery is present in the hero fold. The visual language relies completely on glowing vector schematics, laser lines, and subtle linear gradient auroras. Any added graphic must feel like an accurate computational pipeline or schematic data wireframe rather than decorative clip-art.
SIGNATURE DETAIL — the thing that makes this design itself
The vertical bisection laser ray: a brilliant cyan light beam acting as a processing horizon where fragmented, muted grey workflow inputs are piped through circuit traces and emerge on the right as luminous, structured, green-teal glass cards.
MUST
- Anchor headline contrast with bright white against dark void, highlighting pivotal keywords in cyan #76DFD6.
- Restrict neon cyan and teal borders strictly to active, future-state, or high-value UI elements.
- Keep legacy/before workflow components deeply muted in low-contrast slate (#0B1520) to emphasize obsolescence.
- Maintain strict vertical alignment of connectors to the central laser ray.
AVOID
- Do not introduce warm hues like orange, yellow, or red; keep ambient spectrum entirely cyan, teal, and violet.
- Never make the 'Before' legacy cards bright or luminous; they must appear dormant and heavy.
- Do not drop the contrast on the main CTA button—always set dark text over the #76DFD6 teal fill.
- Avoid blurry or wide box-shadows on cards; rely on precise 1px borders and internal semi-transparent fills.
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 中尝试 
