Design a dark-mode website section: deep-space glass surfaces sliced by vertical aurora light rays and volumetric isometric security telemetry.
LAYOUT
The viewport begins with a clean horizontal header bar with brand mark on the left, central links, and action triggers on the right. Below, the hero splits into an asymmetric 5:7 two-column grid: left side contains category eyebrow, massive 3-line heading, narrative body text, dual CTA buttons, and a live stat badge. The right side features the massive isometric 'Live Protection Map' card anchored above a tightly packed three-card feature tier.
PALETTE (use these exact hex values)
- #070b13 — Void Canvas: Deep navy base canvas underpinning all page elements and viewport backgrounds.
- #3b66ff — Cobalt Primary: High-visibility solid fill for primary CTAs and active interactive highlights.
- #10b981 — Live Emerald: Status indicator dot and security-shield icon stroke denoting active defense.
- #f43f5e — Alert Crimson: Data point dot marking blocked malicious attack vectors within isometric telemetry.
- #ffffff — Text Primary: Highest-contrast text applied to headlines, active counts, and primary buttons.
- #94a3b8 — Text Secondary: Muted slate tone for descriptive body copy, secondary navigation, and micro-labels.
TYPOGRAPHY
Typeface Inter Display (or Geist Sans,Plus Jakarta Sans,system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 38px heading, 54px display. Tracking -0.03em on display, 0.08em on uppercase eyebrows. The typographic tone is authoritative, highly technical, and razor-sharp. Using a geometric neo-grotesque like Inter Display with tight negative letter-spacing on headlines conveys enterprise-grade engineering rigor. In production, Inter, Geist, or Plus Jakarta Sans are drop-in equivalents that preserve the crisp, mathematical voice without needing bespoke font licenses.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created through ambient backlighting shining through semi-translucent dark glass surfaces (backdrop-filter blur: 16px). Cards do not use harsh drop shadows; they float by contrasting their dark inner core against faint 1px hairline edges (rgba(255, 255, 255, 0.08)) and the luminous aurora behind them. The central isometric graphic intensifies depth by stacking three physical planes vertically in simulated 3D space.
IMAGERY
Imagery consists exclusively of technical isometric vector planes, delicate dot-matrix infrastructure grids, and ethereal vertical frequency spectrograms. Graphics must appear computational, architectural, and systemic rather than artistic or hand-drawn. Realistic photographic imagery or consumer-style illustrations would completely violate the enterprise cyber-infrastructure identity.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the combination of layered isometric glass planes intersected by luminous vertical spectrogram flares, all set against a dark void with a faint golden-champagne backlight bleed at the top right. Without this atmospheric volumetric telemetry graphic, the page would collapse into a standard dark-mode SaaS template.
MUST
- Use uppercase tracking (0.08em) strictly on 11px category labels and eyebrows.
- Restrict bright saturated colors (#3b66ff, #10b981, #f43f5e) strictly to interactive or diagnostic roles.
- Enclose all telemetry and feature groupings in 1px translucent bordered glass panels.
- Align the split-screen hero such that the primary display copy anchors the left and the 3D map anchors the right.
AVOID
- Never use opaque, flat light grey borders; always use translucent white or faint navy strokes.
- Do not allow the background light flare to compromise headline legibility on the left column.
- Avoid pill radiuses on cards; pills are reserved strictly for header CTAs and inner status badges.
- Never set paragraph body copy in pure white; it destroys the visual hierarchy of the display headline.
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 中尝试 
