Design a dark-mode website section: luminous 3d glass engine bridging legacy health records and automated payer pipelines through glowing neon circuits.
LAYOUT
The page opens with a floating utility navigation bar spanning the full width of the container. The hero content is split 45/55: left side houses the text hierarchy, primary/secondary action buttons, and a three-item proof row; the right side is dominated by a balanced isometric diagram with 5 stacked input nodes on the left, a central illuminated engine, and 4 output nodes on the right.
PALETTE (use these exact hex values)
- #0B082B — Deep Midnight Void: dominant hero section background container providing high-contrast dark space
- #15103E — Dark Violet Glass: translucent backdrop fill for pipeline nodes, inputs, and code widgets
- #F4F5F9 — Off Canvas Ground: exterior base wrapper visible at the bottom curved boundary
- #6366F1 — Core Indigo Glow: primary ambient backlighting, active connectors, and secondary CTA accents
- #38BDF8 — Neon Cyan Signal: left-hand input data cables, icons, and live payload indicators
- #EC4899 — Electric Rose Signal: right-hand output data cables, payer routing badges, and terminal highlight
- linear-gradient(90deg, #F87171 0%, #A855F7 100%) — CTA Sunset Gradient: primary conversion button and headline emphasis fill
- #FFFFFF — Pure Optical White: primary headline text, active node labels, and prominent icons
- #94A3B8 — Muted Lavender: subtext descriptions, inactive navigation items, and code payload labels
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 58px display. Tracking -0.03em at display, 0 at body. Plus Jakarta Sans conveys a clean, authoritative, yet approachable enterprise-grade clarity. Its crisp geometric circular counters prevent the dark theme from feeling intimidating or technical, while JetBrains Mono injects developer-first credibility.
GEOMETRY & SPACING
Corner radii — cards 14px, links 6px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely through optical luminescence rather than drop shadows. Layering translucent frosted cards over intense volumetric glows and a receding 3D ground grid establishes distinct spatial planes between the background, the hardware engine, and the floating UI chips.
IMAGERY
Imagery consists strictly of precision 3D isometric glass render assets, neon fiber-optic bus conduits, and simulated API payload panels. Photographic imagery of clinics, doctors, or stock stethoscopes is strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-sided glowing data conduit tree that funnels input cards into a central 3D translucent glass engine cube before dispersing them into output nodes. To use it correctly, maintain perfect orthogonal wiring and distinct color coding for ingest (cyan) versus resolution (magenta); never let cables become messy noodles.
MUST
- Keep cable lines perfectly orthogonal before entering nodes with realistic rounded 90-degree corners.
- Use high-contrast white text for primary node headers and muted lavender for metadata.
- Limit gradient text fills exclusively to the focal ending phrase of the display heading.
- Anchor the hero inside a massive rounded bottom container (radius ~32px) over the light canvas.
AVOID
- Never use opaque, solid gray cards that obstruct the background glow and 3D wireframes.
- Do not allow connector lines to cross each other or use chaotic diagonal angles.
- Avoid generic stock photography; the identity requires bespoke 3D isometric glass assets.
- Never make secondary action buttons brighter or more saturated than the coral-violet primary CTA.
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 中尝试 
