Design a light-mode website section: crisp developer ergonomics meet ethereal cyan point-clouds against an unyielding clinical white canvas.
LAYOUT
Structured around a 1240px container using a balanced two-column hero rhythm. The left column (52% width) stacks the trust badge, display typography, explanatory subhead, dual CTAs, and enterprise metrics in strict vertical progression. The right column (48% width) features the dark terminal viewport enveloped by organic dot-cloud vectors, anchored by an offset response overlay.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary page background and floating card fill.
- #1A2332 — Obsidian Slate: Background fill for the interactive code viewport and IDE preview.
- #0D1117 — Carbon Ink: Primary headings, dominant titles, and high-emphasis body text.
- #57606A — Slate Steel: Subtext, secondary nav links, line numbers, and metric captions.
- #1668E8 — Electric Cobalt: Primary buttons, text highlight on 'chat.', active tabs, and line icons.
- #10B981 — Success Emerald: 200 OK status badge, trust indicator pip, and POST method label.
- #E5E7EB — Border Subtle: Hairline borders on secondary buttons, cards, and credential divider rule.
- #ECFDF5 — Mint Glaze: Tinted background for the enterprise trust status pill.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 52px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is authoritative, clean, and developer-first. The tight negative tracking (-0.03em) on the display title conveys enterprise strength without feeling bulky, while the clean humanist neutrality of Inter ensures technical instructions and API code feel effortless to parse. JetBrains Mono provides essential monospace legitimacy for enterprise engineers.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created through deliberate contrast layering rather than aggressive skewing. The dark terminal window (#1A2332) sits flat against the ethereal background, while the floating response card breaks the boundary using a soft, layered shadow: 0 12px 32px -4px rgba(13, 17, 23, 0.12), 0 4px 12px -2px rgba(13, 17, 23, 0.06).
IMAGERY
The visual hero features a fine-grain, procedural cyan-and-cobalt point-cloud resembling an organic jellyfish or neural synapse. It balances clinical API precision with generative fluidity. Photography of humans or skeuomorphic interfaces would break the technical elegance.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the deliberate layering of an organic, bioluminescent point-cloud mesh directly behind a dark developer console, breached by a high-contrast white floating status card. This visually proves that human-like organic intelligence is fully grounded by deterministic enterprise code. It is misused if replaced with flat gradient blobs or generic abstract 3D shapes.
MUST
- Keep the terminal card anchored strictly in obsidian slate (#1A2332) to maintain developer authority.
- Limit the electric blue (#1668E8) to primary buttons, interactive links, and single-word headline emphasis.
- Use JetBrains Mono exclusively for code blocks, HTTP methods, and API metadata readouts.
- Pair heavy geometric display type with ample whitespace, avoiding card background clutter.
AVOID
- Never apply gradients or borders to the main display headline text.
- Do not use dark mode across the entire page; only the terminal component is dark.
- Avoid fully rounded pill buttons for primary actions; keep buttons at an 8px radius.
- Do not style the trust badge with saturated or opaque dark green backgrounds.
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 中尝试 
