Design a dark-mode website section: precision developer infrastructure wrapped in bioluminescent cyan gradients against deep obsidian terminal surfaces.
LAYOUT
Structured around an asymmetrical desktop two-column split with a global 1280px max-width container. Left column carries the messaging pipeline: release chip, towering display title, concise subhead, paired CTAs, and compliance ticker. Right column features a stacked functional terminal suite consisting of an API code panel above an interactive 4-stage architecture workflow card.
PALETTE (use these exact hex values)
- #04070D — Void Canvas: Deepest background layer across the entire viewport surface.
- #080E1B — Container Shell: Background fill for interactive cards, code blocks, and embedded diagrams.
- #162235 — Border Subtle: 1px structural hairline borders bounding cards, inputs, and tab containers.
- linear-gradient(90deg, #38BDF8 0%, #4ADE80 100%) — Bioluminescent Gradient: Hero primary CTA, key headline accents, and active topology focus anchors.
- #38BDF8 — Neon Cyan: Active link states, sub-badges, and left anchor of gradient components.
- #4ADE80 — Emerald Spark: Status indicator pips, success icons, and right anchor of gradient elements.
- #FFFFFF — Text Pure White: Primary display headlines, active tab labels, and primary button labels.
- #94A3B8 — Text Slate Dim: Secondary descriptors, unselected tabs, and metadata footnotes.
- #475569 — Text Muted Dark: Line numbers in code blocks and subtle separator dots.
TYPOGRAPHY
Typeface Geist Sans (or Inter, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 56px display. Tracking -0.03em at display, -0.01em at body. The voice is razor-sharp, technical, and unflinchingly authoritative. The neo-grotesque display typeface with negative letter-tracking conveys modern silicon-valley infrastructure capability, avoiding whimsical flourishes. Monospaced typography reinforces developer empathy, signaling immediate implementation readiness.
GEOMETRY & SPACING
Corner radii — cards 14px, links 6px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is flattened and expressed almost entirely through optical luminosity rather than traditional drop shadows. Elevation shifts from level 0 base canvas (#04070D) to level 1 panels (#080E1B) mediated only by fine 1px slate borders (#162235). Subtle radial glow effects emanate behind the 3D cube and the outer screen perimeter to mimic bioluminescent ambient lighting.
IMAGERY
Avoids human lifestyle photography entirely, replacing it with vector wireframes, schematic node diagrams, and subtle point-cloud matrix meshes. Visuals consist of isometric technical shapes (like the gradient cube wireframe) surrounded by minimalist line icons inside rounded square badges. Any extraneous realistic rendering or stock imagery would destroy the clinical developer-first precision.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-anchor identity: the seamless cyan-to-emerald horizontal gradient headline suffix ('for developers.') immediately echoed by the primary action pill button. Misusing this means applying the gradient indiscriminately to multiple headlines or standard borders, destroying its singular magnetic pull.
MUST
- Reserve the cyan-to-emerald gradient strictly for highest-priority actions and terminal punchlines.
- Use JetBrains Mono or similar geometric monospaced fonts for all API parameters and JSON snippets.
- Maintain high-contrast white text against the obsidian background for primary headlines.
- Keep card outlines hairline thin at 1px using dark slate tones (#162235).
AVOID
- Do not introduce warm tones like orange, red, or yellow except for critical terminal errors.
- Never fill card backgrounds with bright saturated colors; keep them near-black (#080E1B).
- Avoid pill radiuses on code blocks; use strict 12px-14px rounded corners.
- Do not use non-monospaced fonts inside syntax, terminal, or payload views.
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 中尝试 
