Design a light-mode website section: crisp developer instrumentation grounded in stark monochrome type, luminous cyan atmospheric diffusion, and hyper-tactile glassmorphism.
LAYOUT
Structured two-column hero architecture contained within a 1240px frame. The left column (48% width) holds stacked hierarchy: announcement pill, 3-line display headline, explanatory paragraph, dual CTA buttons, and trust metrics. The right column (52% width) hosts an interconnected interactive diagram: code terminal on the left, central glass shield, and a right-hand vertical stack of 5 service nodes.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Pure: Base background surface across viewport and primary container canvas
- #BAE6FD — Atmospheric Cyan Bloom: Diffuse ambient radiant glow anchored behind lower right technical diagram
- #1E5AF6 — Engine Electric Blue: Primary CTA fill, active focus states, and gradient anchor for key headlines
- #0F172A — Terminal Slate: Dark code editor surface offering intense semantic contrast against white canvas
- #090D15 — Charcoal Title: High-contrast dominant headline and navigation active text color
- #4B5563 — Muted Slate: Body copy, secondary navigation links, and terminal metadata labels
- #10B981 — Terminal String Green: JSON strings, approval badges, and positive active service pills
- #EF4444 — Blocked Rose: Rejection tags, blocked API states, and boundary violation alerts
- #E2E8F0 — Card Subtle Border: Hairline 1px border stroke framing white floating service cards and inputs
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px subheading, 15px body, 18px body-lg, 24px heading, 56px display. Tracking -0.03em at display, -0.01em at body. Disciplined, technical, and confident. The neo-grotesque type (Inter) provides clean corporate legibility at scale, while tight negative letter-spacing (-0.03em) on the headline injects urgency. JetBrains Mono introduces developer authenticity without slipping into playful retro terminal aesthetics.
GEOMETRY & SPACING
Corner radii — cards 16px, links 9999px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is rendered through chromatic atmospheric layering rather than harsh multi-tier box-shadows. The white page background sits beneath a soft radiant cyan glow, over which rests the deep matte slate terminal card. Floating white service nodes and the translucent refractive glass shield catch specular edge-lighting to suggest z-axis elevation without visual clutter.
IMAGERY
Abstract 3D-rendered glass security elements combined with strict vector system diagrams. Visuals depict data conduits via dotted bezier connector curves traveling from code logic through a protective lens into connected API services. No human photography or generic corporate illustrations are permitted.
SIGNATURE DETAIL — the thing that makes this design itself
The refractive glowing 3D glass shield intercepting dotted data lines between a matte dark JSON payload terminal and white tool authorization badges. It visually explains real-time security interception in a single instant.
MUST
- Anchor the right-side visual cluster over a subtle, wide-radius cyan blur gradient.
- Use JetBrains Mono exclusively inside code panels, endpoints, and micro-telemetry readouts.
- Keep service cards crisp white (#FFFFFF) with 1px #E2E8F0 borders to float clearly over cyan glow.
- Restrict vibrant pink-purple gradient text strictly to key impact phrases like 'AI agents'.
AVOID
- Never tint the left hero copy background; it must remain pure clinical white (#FFFFFF).
- Avoid heavy drop shadows; keep elevation gentle with 0px 4px 20px rgba(0,0,0,0.04).
- Do not use dark backgrounds for the full page; dark canvas belongs solely to the code card.
- Never omit the semantic status pills ('Allowed'/'Blocked') from the connected tool nodes.
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 中尝试 
