Design a light-mode website section: luminous electric blue infrastructure intelligence wrapped in high-trust enterprise whitespace.
LAYOUT
The page opens with an unbordered horizontal navbar distributing brand left, grouped links center, and a primary CTA right. The hero divides into an asymmetric two-column grid: left column features an eyebrow badge, two-tone display headline, paragraph, dual CTA buttons, and inline value props. The right column showcases a dynamic mosaic of five floating analytical cards orbiting a topological network node. The hero terminates in a centered social-proof statement above a four-column compliance badge row.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary page background and solid card surface filling
- linear-gradient(180deg, #FFFFFF 0%, #F1F6FD 100%) — Ambient Sky Gradient: Soft atmospheric depth tinting the lower third of the hero section
- #165DF6 — Electric Cobalt: Primary buttons, active link underlines, headline emphasis, and central diagram node
- #0F172A — Midnight Ink: High-contrast headings, card titles, and top-level brand mark
- #5A6578 — Slate Steel: Body copy, navigation links, and inactive descriptive labels
- #16A34A — Forecast Emerald: Metric trends, sparkline graphs, and positive capacity badges
- #D97706 — Amber Alert: Risk reduction metric callouts and resilience sparkline data
- #EEF4FF — Badge Periwinkle: Subtle pill badge background and domain indicator backgrounds
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 24px subheading, 32px heading, 56px display. Tracking -0.03em at display, 0 at body. Clean, analytical, and highly structured, evoking the dependability of major energy grid infrastructure paired with modern Silicon Valley AI velocity. The neo-grotesque sans (Inter or Plus Jakarta Sans) communicates objective technical precision through tight negative tracking on display sizes and generous vertical spacing on body copy. Premium alternatives include SF Pro Text or Helvetica Now.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created primarily through atmospheric layering and multi-tiered shadows rather than heavy borders. Floating analytics cards use soft, wide-spread drop shadows (0 12px 32px -4px rgba(22, 93, 246, 0.08)) that make them appear suspended directly over the underlying network schematics. The background itself remains nearly flat, grounding the composition.
IMAGERY
Vector-based schematic network diagrams overlaid with crisp data visualization charts (sparklines, segmented donuts, node-link paths). Imagery avoids stock photography or photorealistic hardware in favor of clean digital-twin telemetry. Any photorealistic or hand-drawn asset would sharply clash with this high-precision technical identity.
SIGNATURE DETAIL — the thing that makes this design itself
The distributed constellation of analytics telemetry cards floating in orbit around a vector grid topology node. It visualizes abstract AI capability as concrete operational outputs (+18% growth, 42% renewable, 345kV transmission). Misusing it involves overcrowding the canvas with too many cards or eliminating the network lines that visually bind them together.
MUST
- Reserve #165DF6 for interactive elements and deliberate conceptual anchors only.
- Ensure all telemetry micro-cards feature rounded corners of 16px with low-opacity diffused shadows.
- Use uppercase tracking (0.04em) strictly on small eyebrow badges under 13px.
- Maintain high contrast by pairing Midnight Ink (#0F172A) headers against pure white surfaces.
AVOID
- Do not apply heavy dark borders; use subtle #E2E8F0 or translucent shadows instead.
- Never render the entire headline in electric blue; restrict color to the second clause.
- Avoid fully saturated card backgrounds that compete with the central cobalt identity.
- Do not use sharp 0px corners on interactive or floating module elements.
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 中尝试 
