Design a light-mode website section: crystalline edge compute framed in particle waves of luminous sapphire and disciplined white space.
LAYOUT
The layout progresses from an immersive promotional card down to an expansive, orderly utility footer. The floating CTA card hosts a vertical hierarchy: pill eyebrow, two-line heading, two-line subcopy, action button cluster, and a 4-part horizontal metric rail. Below this banner, the footer unfolds in a 6-column grid (brand anchor, four navigation lists, newsletter form), finalized by a 1px rule and legal baseline.
PALETTE (use these exact hex values)
- #ffffff — Pure White: Central CTA card floor and primary page ground
- #f8fafc — Subtle Wash: Background for social icon squares and quiet containers
- #0052ff — Electric Cobalt: Primary action fill, heading accent line, and link hover states
- #0a0f1d — Deep Space Navy: Display typography, section headers, and primary branding
- #525866 — Slate Neutral: Body copy, input labels, and structural footer link lists
- #e2e8f0 — Border Hairline: Secondary button outline, divider rules, and input borders
- #1d72fe — Vibrant Nebula Blue: Inner midtones within particle graphics and accent badges
- #e0f7fa — Cyan Tint: Circular icon badge background for hardware and network stats
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 14px subheading, 16px body-lg, 20px heading, 48px display. Tracking -0.03em at display, 0.01em at body. The typographic tone is authoritative, highly technical, and impeccably clean. Inter (or a high-grade geometric neutral like Plus Jakarta Sans) gives the technical copy corporate stability without feeling cold. Tight tracking on display headlines delivers punch and impact, while generous tracking on captions and badge labels preserves micro-legibility.
GEOMETRY & SPACING
Corner radii — cards 24px, links 6px, inputs 10px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is rendered chromatically and atmospherically rather than through heavy drop shadows. The outer CTA card sits softly over the page with a faint, ultra-diffuse ambient blur (#0052ff0d at 32px spread). The inner graphical nebula creates an optical tunnel effect, pulling focus toward the crisp, flat white center plane.
IMAGERY
The imagery language is abstract generative edge-compute: sparkling sapphire and cyan luminous micro-particles that evoke high-bandwidth wireless mesh and AI synapses. Graphics fade gracefully to 0% opacity toward the center, leaving content completely unencumbered by background noise. Any literal photos of hardware or corporate portraits would violate this aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the bilateral luminous particle curtain: an intensely vibrant, bioluminescent sapphire-to-cyan dust cloud that frames the CTA card from the left and right borders, dissipating into pure white dead-center to yield effortless legibility. When replicating, ensure the particle layer is strictly masked to the periphery and never intrudes behind the black headline text.
MUST
- Retain the pure white clearing in the center of the CTA banner so text remains razor sharp.
- Split the main CTA heading precisely between dark obsidian on line 1 and cobalt blue on line 2.
- Keep metric chips arranged horizontally with colored circular icon accents at 32px diameter.
- Use a generous 24px border radius on the main interactive banner container.
AVOID
- Do not allow the blue particle graphics to bleed behind the primary headline and compromise contrast.
- Never invert the footer background to dark; maintain the light architectural foundation throughout.
- Avoid sharp 0px corners; all interactive cards and elements require 8px to 24px soft rounding.
- Do not use multi-color buttons; limit the primary CTA to pure electric cobalt (#0052ff).
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
