Design a light-mode website section: a luminous celestial canvas balancing tactile 3D particle mechanics against rigorous, airy enterprise typography.
LAYOUT
The hero section uses an asymmetrical two-column layout capped by a 72px standard horizontal navbar. The left column (spanning ~45% width) stacks headline, description paragraph, and dual button CTAs with 24-32px vertical gaps. The right column accommodates the focal 3D artwork, bleeding organically toward the center. The lower boundary is anchored by a full-width 4-column metric tray.
PALETTE (use these exact hex values)
- #F8F9FB — Canvas Off-White: Primary background surface creating an airy, clinical setting
- #FFFFFF — Panel White: Background for bottom metric banner and secondary control surfaces
- #1B59F5 — Hyper Blue: Accent text in headline, primary button fill, and metric figures
- #16191F — Carbon Black: Primary headline text, logo, and top navigation action button
- #5A6474 — Muted Slate: Subtitles, body copy, and secondary nav items
- #8B95A5 — Tertiary Ash: Low-emphasis supporting descriptions beneath metric titles
- #E5E9F0 — Border Subtle: Borders for metric card, outline buttons, and section dividers
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 36px heading, 68px display. Tracking -0.03em at display, -0.01em at body. The typography speaks with authoritative, engineering-grade clarity using an unadorned, tightly kerned geometric sans-serif. The massive optical contrast between the 68px headline and the 18px body copy delivers high impact without visual noise. Inter Display or Plus Jakarta Sans perfectly matches the crisp letterforms and open apertures.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1320px container, airy density.
DEPTH
Elevation is practically non-existent in the CSS sense, eschewing heavy box-shadows in favor of razor-sharp 1px border strokes (#E5E9F0) against subtle tonal shifts. Depth is entirely offloaded to the 3D rendered sphere and floating particle field, which creates an optical illusion of spatial immersion above the flat layout.
IMAGERY
The imagery features an ethereal, hyper-realistic 3D celestial body with soft volumetric lighting and planetary rings made of crystalline particles, spectrum dust (magenta to cyan), and miniature server monoliths. Flat vector icons, stock photography, or cartoonish graphics would completely break the enterprise-grade scientific aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tone headline split—where the black subject 'Voice AI,' drops into the vibrant electric blue predicate 'on your terms.'—perfectly mirrors the transition from pure white space into the dense, colorful particulate ring of the 3D orb.
MUST
- Keep the canvas near-white (#F8F9FB) with ample empty margin around typography.
- Isolate the blue accent (#1B59F5) strictly for key actions, metric digits, and emphasized headline words.
- Pair the primary blue CTA alongside an equal-height neutral secondary outline CTA.
- Use tight negative letter-spacing (-0.035em) on large display headings to keep them compact.
AVOID
- Do not use dark or colored backgrounds for the main section canvas.
- Avoid pill (full 999px) border radii on standard action buttons; stick to 8px.
- Do not distribute accent colors evenly across the headline; color only the pivotal phrase.
- Never add heavy drop shadows; use crisp 1px borders (#E5E9F0) for separation.
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 中尝试 
