Design a dark-mode website section: deep midnight glass framing luminous periwinkle intelligence, dense code structures, and sleek pill controls.
LAYOUT
The header spans edge-to-edge with centered product navigation links and dual right-aligned action buttons. The hero splits into a balanced two-column desktop arrangement: the left column houses the category pill, huge display typography, concise narrative copy, split CTAs, and a baseline row of compliance guarantees. The right column showcases the interactive code engine and connected workflow pipeline framed over a subtle grid.
PALETTE (use these exact hex values)
- #070b18 — Canvas Deep Navy: Root background canvas color providing a deep, distraction-free foundation
- #1a2554 — Indigo Atmosphere: Diffused background radial lighting behind header and hero graphics
- #0d1326 — Console Surface: Primary surface for the central API code console and node panels
- #6b7aff — Periwinkle Accent: Emphasis text highlight, active process node fill, and primary branding
- #34d399 — Active Green: Operational indicator dots, HTTP status method pills, and completion checkmarks
- #ffffff — Primary Text: Headlines, high-priority button text, and JSON keys
- #8f9bb7 — Muted Slate: Supporting subheads, compliance badge labels, navigation links, and code line numbers
- #232d4b — Glass Border: Delicate dividing lines and card outlines enclosing dark surfaces
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 56px display. Tracking -0.025em at display, 0 at body. The voice is analytical, authoritative, and clinical. Inter provides neutral, highly scalable clarity that feels dependable for medical-legal infrastructure, while JetBrains Mono injects developer-grade rigor into the code payloads. When substituting, prioritize clean neo-grotesques with tall x-heights and tight tracking.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created through luminosity and glass translucency rather than black shadows. Dark elevated surfaces (#0d1326) sit on top of the deep navy background (#070b18), separated by razor-thin borders (1px solid #232d4b) and highlighted by soft radial blue backlight glows.
IMAGERY
Avoids photographic imagery entirely in favor of an interactive developer console and node-based pipeline schematic. Graphic elements are strictly vector: clean line-drawn compliance badges, minimal interface iconography, and precise monospaced code blocks. Organic photos or generic medical imagery would degrade the high-tech, precision-engineered feel.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone display headline where the final conceptual clause transitions from stark white into luminous periwinkle (#6b7aff), mirrored directly on the right by an illuminated processing node in the same hue. This visual echo instantly binds the marketing claim to the technical architecture.
MUST
- Use periwinkle (#6b7aff) exclusively for pivotal brand words, active pipeline stages, and subtle UI glows.
- Maintain strict 999px pill geometry on all primary buttons and eyebrow pills.
- Keep code snippet fonts strictly monospace (JetBrains Mono) with dimmed line numbers in #475569.
- Apply low-opacity atmospheric blue glows beneath floating hardware or window cards.
AVOID
- Do not introduce sharp 0px corners on interactive buttons or cards.
- Never use warm amber or red tones; keep the palette strictly cold navy, blue, white, and emerald green.
- Avoid solid bright fills for secondary buttons; keep them translucent glass with subtle borders.
- Do not color the entire headline in accent periwinkle; reserve the color exclusively for the concluding keyphrase.
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 中尝试 
