Design a light-mode website section: precision developer infrastructure swirled into physical manufacturing particle clouds.
LAYOUT
Structured around an asymmetrical two-column hero rhythm within a standard 1280px container. The left 45% is dedicated to an assertive 54px typographic headline, clear sub-copy, dual-button action cluster, and a horizontal ribbon of benefit chips. The right 55% presents the layered terminal console backed by a dynamic algorithmic particle cloud and tethered pipeline status tags.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Global background providing a sterile, modern backdrop for high-tech content
- #161F37 — Deep Terminal Surface: Background fill for the code request and JSON response console windows
- #FFFFFF — Card Surface Pure: Floating status step cards and light action buttons
- #3866F6 — Electric Royal Blue: Hero headline accent, primary CTA fill, and glowing data pipeline nodes
- #0F172A — Headline Ink: High-emphasis hero text, logos, and critical headers
- #64748B — Muted Slate: Body paragraphs, subtitle strings, and unselected navigation items
- #22C55E — Success Mint: Terminal status indicator light and verification check badges
- #F472B6 — Syntax Coral: JSON key syntax highlighting within the payload response terminal
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,General Sans), weights 400/500/600/700/800. Sizes 11px caption, 12px body-sm, 14px body, 18px body-lg, 20px subheading, 32px heading, 54px display. Tracking -0.03em at display, 0 at body. Plus Jakarta Sans delivers a clean, high-velocity technical tone with modern geometric clarity and humanist balance, perfectly articulating both software sophistication and physical manufacturing precision. It pairs seamlessly with an authentic monospace companion that conveys immediate developer utility.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is handled subtly on the light canvas via ultra-soft ambient blurs (e.g., 0 12px 32px rgba(15, 23, 42, 0.06)) around the white status cards, while the dark terminal relies on an intense contrast leap against the light background rather than heavy skeuomorphic drop shadows.
IMAGERY
Visual assets combine a granular blue stippled vortex graphic with a hyper-realistic photorealistic 3D rendering of a machined aluminum CNC bracket. Photography of humans or abstract corporate stock imagery would violate the precise, automated technical character of this layout.
SIGNATURE DETAIL — the thing that makes this design itself
The defining signature is the tethered hardware console: a dark API terminal that directly connects via glowing dotted lines into physical manufacturing status cards, backed by an ethereal blue stippled particle swirl.
MUST
- Anchor the hero split with heavy copy left and interactive terminal right.
- Highlight the final words of the headline in vibrant brand blue #3866F6.
- Use JetBrains Mono or similar geometric monospace exclusively within code consoles.
- Connect terminal outputs to status cards using subtle glowing dashed connector lines.
AVOID
- Never use dark mode across the global background canvas.
- Do not omit the dotted organic cloud effect behind the console graphic.
- Avoid pill radius on CTA buttons; stick strictly to a tailored 10px radius.
- Never tint the primary typography; keep it deep neutral ink #0F172A.
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 中尝试 
