Design a light-mode website section: crisp developer utilities floating against high-energy luminescent particle fields with classical editorial serif accents.
LAYOUT
The hero layout follows a 60/40 asymmetrical split inside a 1280px boundary. The left 60% contains a disciplined vertical stack: status chip, split-personality headline, secondary description, dual CTA buttons, and a 4-column trust strip. The right 40% bleeds into the canvas edge, pairing interactive pipeline input nodes directly with the particle nebula.
PALETTE (use these exact hex values)
- #ffffff — Canvas Pure White: Primary light canvas background anchoring navigation, headline typography, and trust badges.
- #090a16 — Deep Space Void: Background substrate for the visual architecture diagram and ambient particle wave on the right.
- #0a0f1d — Ink Navy: Primary typography, main heading line, and solid fill for primary CTA buttons.
- #5e6573 — Muted Slate: Supporting body copy, secondary navigation links, and small status descriptors.
- #635bff — Spectral Purple: Leading hue in gradient text, active badges, sparkle icons, and glow effects.
- #be4bdb — Iridescent Rose: Mid-tone in display typography gradient and architecture node glow highlights.
- #f06553 — Solar Ember: Terminal gradient hue in display typography and ambient particle light trails.
- #f4f1fd — Lilac Tint: Background tint for announcement badges and contextual prompt containers.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 15px body, 16px body-lg, 20px heading, 56px display. Tracking -0.03em at display, -0.01em at body. The typography speaks with authoritative precision tempered by bespoke elegance. The grotesque sans delivers crisp developer-centric clarity, while the italic editorial serif introduces a human, high-end finishing touch that communicates prestige and security. For open-source deployment, Inter paired with Playfair Display or Instrument Serif replicates this tone cleanly.
GEOMETRY & SPACING
Corner radii — cards 24px, links 9999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created optically rather than physically. The left interface sits flat on a pure white plane, while the right illustration establishes deep z-axis recession via a dark cosmic void, back-illuminated particle waves, and 3D isometric floating tiles that emit ambient purple light onto surrounding connector nodes.
IMAGERY
The imagery fuses technical pipeline schematics with an organic, mathematical particle wave rendered in purple, cyan, and copper ember points. It strictly avoids generic photography or flat vector clip-art, relying exclusively on isometric 3D geometry and luminous generative point-clouds to symbolize data throughput.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the horizontal typography collision in the main headline: transitioning mid-sentence from a heavy, technical dark sans-serif into a delicate editorial italic serif rendered in an iridescent violet-to-coral gradient. This must always be executed as a unified multi-line statement, not isolated words, and is ruined if applied to generic bold text without italic contrast.
MUST
- Retain the strict sans-serif display for functional claims and italic serif solely for the trust/emotional clause.
- Ensure the gradient fill strictly flows horizontally across the serif phrase from violet to warm coral.
- Divide trust badges and metrics with subtle, hairline vertical borders to maintain an engineered grid aesthetic.
- Use solid #0a0f1d for primary actions to ground the high-energy luminescent graphic on the right.
AVOID
- Never apply the multi-color gradient to the bold sans-serif headline text.
- Do not extend the dark particle wave across the entire hero; it must vignette cleanly into pure white.
- Never mix multiple serif typefaces; use exactly one high-contrast serif exclusively for italic emphasis.
- Do not use saturated primary buttons; buttons must remain monochrome deep navy to preserve technical gravitas.
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 中尝试 
