Design a dark-mode website section: luminous cyan beacons anchoring a dense, deep space cloud security infrastructure.
LAYOUT
Centered hero layout with badge, mega-headline, subhead, and paired CTAs leading directly into a 4-column metrics card. Below, a comprehensive footer divides into a brand/code block left rail, four link category columns in the center, and a newsletter capture box on the right. A thin full-width border anchors the bottom copyright and legal bar.
PALETTE (use these exact hex values)
- #030712 — Void Black: Deepest canvas background across page, hero, and main footer frame
- #0B132B — Surface Navy: Background fill for floating stats card and dark code snippet blocks
- #1E293B — Border Slate: Subtle bounding line for cards, inputs, badge containers, and dividers
- #38BDF8 — Electric Cyan: Primary brand accent, highlighted headline text, primary button fill, and metric icons
- #34D399 — Emerald Status: System status indicators and live pulse dots
- #FFFFFF — Pure White: Headlines, key metric values, and primary branding logos
- #94A3B8 — Text Slate Light: Body paragraphs, navigation links, and input placeholder values
- #64748B — Text Slate Muted: Category column headers, copyright notices, and secondary metadata
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 14px subheading, 16px body-lg, 18px heading, 28px heading-lg, 48px display. Tracking -0.03em at display, 0.01em at body. Inter provides a clean, neutral, and highly technical tone that signals enterprise-grade reliability and security. Monospace accents introduce an immediate developer-first credibility. For open-source replacements, Geist or Plus Jakarta Sans preserve the geometric clarity.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is rendered entirely through tonal layering rather than cast drop shadows. The deep void background (#030712) recedes, while UI containers sit on a lighter navy surface (#0B132B) defined by delicate 1px border strokes (#1E293B). Glowing accents like cyan buttons and status dots provide perceptual illumination.
IMAGERY
Vector-based abstract wave topography drawn in ultra-thin, low-opacity cyan outlines layered behind the hero content. Avoid photorealistic stock photos, heavily textured noise, or saturated 3D renders; keep visuals strictly mathematical, clean, and cybernetic.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated four-metric telemetry card sitting directly below the dual CTA block, uniting cloud security proof points in a single, dark blue framed container with minimalist cyan iconography. It bridges marketing pitch to product credibility before transitioning into the multi-column footer.
MUST
- Use solid electric cyan (#38BDF8) exclusively for the primary CTA and key active indicators.
- Enclose multi-stat sections into a singular unified pill-cornered dark navy card container.
- Pair monospace code samples with terminal-style syntax coloring inside developer widgets.
- Maintain high contrast by keeping display headers pure white (#FFFFFF) against the dark background.
AVOID
- Never use pure white backgrounds or light mode elements anywhere in the interface.
- Do not split the 4-column metric container into separate fragmented floating boxes.
- Avoid colorful background gradients; keep background art to faint, thin topological wave lines.
- Do not style secondary footer links in bright accent colors; keep them muted (#94A3B8).
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 中尝试 
