Design a light-mode website section: weightless frosted glass widgets adrift in a radiant, pointillist field of periwinkle and starlit compute.
LAYOUT
The header sits at the top margin (padding 20px 48px) with a clean 3-part layout: brand on left, centered link group, and auth CTAs on right. The hero content is split 45/55 horizontally: the left column stacks the badge, two-tone display headline, paragraph, dual CTA buttons, and micro-perks vertically with 20-32px gaps. The right column is an expansive isometric stage where 5 interconnected frosted glass cards drift over the 3D particle cloud.
PALETTE (use these exact hex values)
- linear-gradient(135deg, #F8F9FE 0%, #EFF2FD 50%, #FDF8F9 100%) — Canvas Gradient: ambient viewport base layer with soft periwinkle and warm blush undertones
- #12141D — Obsidian Body: primary headline copy, high-emphasis text, and core logo branding
- #5D6377 — Slate Steel: subheadings, descriptive copy, inactive navigation links, and graph axes
- #5457E5 — Electric Indigo: primary CTA button fills, key headline emphasis, and active telemetry lines
- #ECEEFE — Soft Periwinkle Tint: pill badge backgrounds, icon badges, and secondary button hover states
- #22C55E — Live Emerald: live status indicators, upward telemetry deltas, and tool availability dots
TYPOGRAPHY
Typeface Inter Display (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 22px subheading, 38px heading, 64px display. Tracking -0.03em at display, -0.01em at body, 0.04em at caps. Inter Display lends a cool, technical precision with a neutral Swiss architectural voice. Its tight tracking and high x-height make dense telemetry legible at 11px while delivering maximum kinetic punch at 64px display scale. Geist Sans or SF Pro Display serve as direct zero-friction drop-in replacements.
GEOMETRY & SPACING
Corner radii — cards 14px, links 6px, inputs 10px, buttons 10px. Spacing on a 4px unit, 20px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth relies on true spatial layering rather than heavy drop shadows: a luminous 3D pointillist cloud forms the backdrop, overlaid with glowing vector connection threads, topped by glassmorphic cards with faint 0 20px 40px -15px rgba(84, 87, 229, 0.12) ambient shadows. The perimeter of each card is sharpened by a 1px white translucent border mimicking edge refraction.
IMAGERY
The visual hero is a procedural pointillist wave composed of tens of thousands of microscopic particles shifting from periwinkle blue to soft coral. Flat photographic imagery or generic vector SaaS illustrations would completely break the spatial, computational feel of this agentic infrastructure metaphor.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of frosted glass telemetry cards linked by illuminated vector circuit traces over a 3D pointillist particle wave. Misuse commonly occurs when designers make the glass completely opaque or muddy the particle cloud with muddy gradients, destroying the sensation of weightless, glowing compute.
MUST
- Use backdrop-filter blur (16px to 24px) combined with an inner white 1px border on all floating cards.
- Bifurcate headlines: render the first line in pitch black (#12141D) and the payoff line in vibrant indigo (#5457E5).
- Keep typography crisp and tightly tracked (-0.03em) on display sizes above 40px.
- Anchor metric displays with tiny saturated indicator dots (4px green for active, periwinkle for nodes).
AVOID
- Do not use heavy, opaque dark cards or hard-edged black drop shadows.
- Do not use warm earthy hues like olive or terracotta; remain strictly within icy blue, violet, and peach particle accents.
- Never drop the contrast of the main headline below WCAG AAA on this light background.
- Do not apply rounded corners greater than 16px to interior telemetry cards; keep them structured, not balloon-like.
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 中尝试 
