Design a dark-mode website section: precision dark-mode developer canvas illuminated by deep indigo gradients and clinical cyan accents.
LAYOUT
The hero section uses an asymmetric two-column composition inside a ~1240px container. The left column hosts the badge, headline, subcopy, dual CTAs, and a 4-column trust badge row. The right column showcases an interactive code IDE with an overlapping analysis card and a subsequent pipeline architecture diagram anchored underneath.
PALETTE (use these exact hex values)
- #05070e — Obsidian Deep: Deepest canvas background behind hero layouts and global headers
- #0b1021 — Panel Slate: Card and code container background color
- #1a233d — Surface Border: 1px hairline outline on floating cards, badges, and code blocks
- #5b75f0 — Periwinkle Accent: Primary CTAs, active pipeline pills, and key branding moments
- #4f75ff — Developer Indigo: Hero headline gradient focus word ('med-legal API')
- #38bdf8 — Electric Cyan: HTTP POST method pill and code string syntax highlights
- #2dd4bf — Status Emerald: Success badges, 200 OK indicators, and confidence scores
- #ffffff — Text Pure White: Primary headings, active states, and high-contrast labels
- #8896b3 — Text Muted Slate: Subheadlines, inactive navigation items, and code line numbers
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,Geist,system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 52px display. Tracking -0.03em at display, -0.01em at body, 0.08em at caps badges. Clean, authoritative, and developer-first. The combination of an ultra-tight geometric sans headline and clinical monospace creates immediate trust for enterprise engineering and legal compliance teams. Inter or Plus Jakarta Sans serve as flawless open-source substitutions.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created using subtle 1px hairline outlines (#1a2342) against darker backing panels rather than fuzzy blur shadows. Secondary floating panels, such as the analysis results widget, cast a soft, deep ambient spread (0 16px 32px rgba(0,0,0,0.45)) to clearly sit above the code editor layer.
IMAGERY
Avoids photographic people or stock imagery in favor of high-fidelity developer artifacts: authentic JSON payloads, API endpoint headers, and architectural node-flow diagrams. Visual embellishment is limited to a fine particle grid and a soft ambient laser-indigo gradient beam in the top right background.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the overlapping pair of IDE and telemetry cards: a dark monospace JSON request block nestled beneath a floating confidence report card with emerald success chips. It visually bridges developer implementation with end-user business value. Misusing it involves separating the components or filling the code block with dummy lorem ipsum instead of real API schema.
MUST
- Use deep midnight blue (#05070e) as canvas and layer lighter 1px bordered dark slates on top.
- Keep code text strictly in monospaced fonts with muted line numbers (#475569) on the left.
- Emphasize the primary value proposition within headlines using a luminous blue-to-indigo gradient.
- Limit vivid colors strictly to semantic indicators like POST (cyan), success (emerald), or primary CTA (periwinkle).
AVOID
- Do not use solid opaque white backgrounds or light mode cards anywhere in the interface.
- Never use drop shadows with dark black alpha; use subtle colored ambient glows instead.
- Do not omit the dotted connector lines in architecture diagrams; they illustrate data flow.
- Avoid warm accent colors like orange, yellow, or red unless conveying an explicit system error.
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 中尝试 
