Design a dark-mode website section: precision surgical ai platform immersed in dark cybernetic slate and luminescent cyan data pipelines.
LAYOUT
The hero adopts an asymmetrical split layout inside a 1360px container. The left 40% houses product positioning, high-impact gradient typography, CTA triggers, and compliance badges. The right 60% contains a vertical stack: a multi-stage architecture flow diagram above, bridging seamlessly into a live code-to-3D-render terminal below.
PALETTE (use these exact hex values)
- #040814 — Deep Space Void: Root page canvas providing infinite contrast for glowing telemetry and diagrams.
- #081021 — Substrate Navy: Background fill for cards, architecture blocks, and code terminal container.
- #162844 — Vapor Stroke: Low-contrast dividing borders, node outlines, and connector track lines.
- #38BDF8 — Hyper Cyan: Primary data path accents, text highlight gradient start, and active tab states.
- #818CF8 — Ortho Lavender: Secondary gradient endpoint for hero typography and primary interactive actions.
- #10B981 — Bio Matrix Green: Status indicator pips and the floating secure API verification badge fill.
- #FFFFFF — Clinical White: High-priority display headings, active tab titles, and code keywords.
- #94A3B8 — Muted Spec Slate: Explanatory paragraphs, input/output node descriptions, and inactive tabs.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display,system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 42px heading, 54px display. Tracking -0.03em at display, 0 at body, +0.06em at uppercase labels. The typographic tone is authoritative, clinical, and developer-centric. Inter provides neutral, highly legible metrics that ground the surgical domain in technical rigor, while JetBrains Mono reinforces API precision. The punchy negative letter tracking at large scale (-0.035em) delivers serious enterprise presence.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created through luminosity layering rather than heavy ambient blur shadows. Deep background canvas (#040814) sits beneath elevated panels (#070E1C) that catch faint cyan rim borders, while glowing nodes and soft radial light leaks produce an ethereal floating spatial effect.
IMAGERY
Visual assets are strictly technical, vector-based, or synthetic 3D CAD models such as acetabular cup and femoral stem wireframes. Imagery features glowing cyan vertices, coordinate triads, and spatial mesh lines on pitch-dark backdrops. Natural photography or lifestyle imagery is completely absent.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-partition interactive card combining active API code with an illuminated wireframe 3D orthopedic hip implant CAD visualization. It instantly translates abstract model inference into tangible surgical geometry. Misusing this means substituting the technical CAD render with generic abstract AI blobs or flat stock icons.
MUST
- Reserve vibrant cyan-to-violet linear gradients exclusively for core value phrases and the primary CTA.
- Keep all visual containment panels bordered with subtle sub-surface strokes (rgba(56, 189, 248, 0.15)).
- Use monospace typography strictly inside code snippets, terminal tabs, and system data parameters.
- Ensure connector paths in schematic diagrams maintain precise orthogonal 90-degree turns and dashed styling.
AVOID
- Do not introduce warm hues like orange, red, or yellow except for explicit error validation states.
- Do not omit the soft cyan ambient bloom behind primary visual diagrams; it anchors the dark depth.
- Do not use sharp 0px corners; all cards, nodes, and buttons require 8px to 12px radius curvature.
- Do not set long paragraphs across the full container width; keep descriptions under 480px width.
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. Try in DraPub 
