Design a light-mode website section: crisp white enterprise canvas anchored by luminous pastel cards and a floating high-contrast telemetry node.
LAYOUT
The header spans the full max-width container with equidistant breathing room. The hero employs an asymmetrical 50/50 two-column grid: left side stacks announcement chip, multi-line display headline, explanatory paragraph, dual CTA buttons, and social trust metric. The right side features a compact 2x2 grid capped by an overlapping centered dark dashboard element, ending with a subtle curved section divider below.
PALETTE (use these exact hex values)
- #ffffff — Canvas Base: dominant page background providing pristine editorial clarity
- #f4f7fd — Soft Periwinkle Tint: subtle background wash and card fills behind the feature composition
- #0f1422 — Telemetry Obsidian: background for the floating focal telemetry card and dark navigation button
- #0d1322 — Ink Primary: primary display titles, section headings, and navbar brandmark
- #5e667e — Muted Slate: secondary body descriptions, subtitle copy, and navigation links
- #4338ca — Indigo Primary: main conversion button fill, active pill indicators, and brand accents
- linear-gradient(135deg, #3b5bfd 0%, #7c3aed 100%) — AI Activity Gradient: applied across hero text emphasis to visually code AI monitoring
- #e9edf6 — Border Subtle: delicate card borders, button outlines, and pill separators
- #22c55e — Live Emerald: live status dot within the telemetry floating window
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 32px heading, 60px display. Tracking -0.03em at display, -0.01em at body. Plus Jakarta Sans delivers an ultra-modern, crisp tech-first presence without feeling sterile or academic. The tight negative tracking (-0.035em) on display sizes creates commanding editorial structure, while generous body line-heights (1.55) ensure high readability for dense enterprise messaging. Inter or General Sans can be deployed as drop-in equivalents.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created using a layered z-index hierarchy rather than heavy drop shadows. The quadrant cards rest slightly above the base canvas with a 1px stroke (#edf0f7) and a soft ambient blur (0 10px 25px -5px rgba(0, 20, 60, 0.04)). The dark telemetry card is elevated to level 2 with an elevated blur (0 20px 40px -10px rgba(15, 20, 34, 0.25)), decisively cutting across the quadrants.
IMAGERY
Visual assets combine crisp dark software code blocks, minimal sonar radar plots, and iridescent 3D renders (translucent glassy shield, pastel violet data pillars). Rendering is clean, smooth, and brightly lit with subtle specular highlights. Realistic human photography or cluttered realistic screenshots are strictly avoided.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive centerpiece signature is the high-contrast dark telemetry card (#0f1422) floating directly over the center intersection of a 2x2 pastel-tinted daylight feature grid. Designers frequently err by flattening all cards to either all-dark or all-light; the tension between the pristine daylight background and the glowing dark-mode monitoring node is the core brand identifier.
MUST
- Use pure white as the primary canvas, applying periwinkle tint only behind visual graphics.
- Reserve the indigo-purple gradient specifically for headline keywords representing AI telemetry.
- Keep card corners uniform at 16px radius with crisp 1px borders in #e9edf6.
- Overlap the dark telemetry module directly over the intersection of the four quadrant cards.
AVOID
- Do not use dark backgrounds for the entire hero section; preserve the high-key daylight aesthetic.
- Never apply the vibrant text gradient to full body paragraphs or standard navigation items.
- Avoid heavy multi-colored drop shadows; rely on crisp 1px borders and faint ambient shadows.
- Do not align the four quadrant feature cards without the dark central telemetry overlay.
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 中尝试 
