Design a dark-mode website section: deep navy twilight with glowing blue focal spheres and crisp grid-anchored SaaS navigation.
LAYOUT
The view is stacked vertically in two dominant tiers: an elevated top CTA banner and an anchored multi-column footer. The top card uses a balanced 55/45 two-column split between headline copy and the circular orbital phone graphic. Below the card, the footer spans full width with brand info on the far left, four link columns in the center, and a newsletter subscription block on the right, terminating in a bottom legal split row.
PALETTE (use these exact hex values)
- #060b13 — Midnight Base: Root background of the viewport and footer section canvas
- #0d1524 — Card Navy: Background for the primary CTA banner container and input fields
- #1a6bfb — Cobalt Blue: Primary action button fill, logo audio bars, and orbital gradient core
- linear-gradient(90deg, #38bdf8 0%, #818cf8 100%) — Gradient Text Lavender: Highlighted focal text phrase within the hero title display
- #34d399 — Bioluminescent Cyan: Live indicator dot and subtle satellite icon accents
- #ffffff — Pure White: High-emphasis titles, section headings, and primary button labels
- #8493a8 — Slate Blue Muted: Body copy, input placeholder, footer navigation links, and copyright
- #1c2637 — Border Slate: Card outlines, secondary button borders, and input strokes
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 16px subheading, 20px heading, 48px display. Tracking -0.03em at display, -0.01em at body, 0.05em at caps. Inter or an equivalent precision grotesque conveys technical credibility, operational rigor, and modern SaaS efficiency. Crisp tracking and clean vertical metric baselines ensure readability across small metadata tags (11px) and massive punchy headlines (48px).
GEOMETRY & SPACING
Corner radii — cards 20px, links 9999px, inputs 10px, buttons 10px. Spacing on a 8px unit, 32px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered entirely through luminescence and tonal stratification rather than drop shadows. Surface layers elevate from #060b13 (canvas) to #0d1524 (card surface) with hairline strokes (#1c2637) providing separation, while radial glowing light cones behind the central phone node suggest physical light emission.
IMAGERY
Graphic treatment relies on abstract vector schematics, atmospheric light halos, and minimal wireframe telephone iconography. Photographic assets are entirely absent; vector line-art icons and soft blur gradients establish a futuristic, mission-critical infrastructure feel.
SIGNATURE DETAIL — the thing that makes this design itself
The glowing radial phone sphere encircled by orbiting satellite feature badges over a faint technical grid. To implement it properly, position the circular node at the convergence point of a soft blue glow, pairing it with 4 corner-offset pills enclosed in 1px translucent borders.
MUST
- Use a strong single-point electric blue (#1a6bfb) for primary CTAs to dominate the dark navy canvas.
- Apply subtle 1px borders (#1c2637) to separate card surfaces and dark pill tags cleanly.
- Restrict two-tone gradient text (#38bdf8 to #818cf8) exclusively to hero keywords or focal tags.
- Keep footer link text in muted slate (#8493a8) to preserve visual contrast for callouts.
AVOID
- Do not use harsh pure black (#000000); preserve the midnight navy tint (#060b13) across the background.
- Never add solid bright backgrounds to secondary buttons; stick to subtle bordered ghosts.
- Avoid multi-colored icons in the diagram; render all iconography in monoline cyan, blue, or crisp white.
- Do not allow footer column headers to share the same muted tone as the child links.
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 中尝试 
