Design a dark-mode website section: deep void canvas anchored by pointillist infrared volumetric cloud security stacks.
LAYOUT
The header sits pinned at the top with a balanced 3-point alignment (logo, navigation, CTAs). The hero splits into a 50/50 asymmetrical grid: the left side drives editorial narrative from category badge to display headline, body copy, dual button group, and telemetry card; the right houses the tall isometric stack graphic with aligned right-hand metadata. Below, a gentle convex arc acts as a floor, transitioning to a centered logo strip.
PALETTE (use these exact hex values)
- #07090E — Obsidian Base: Deepest canvas background framing the entire viewport
- #0D1322 — Vignette Navy: Subtle radial background tint supporting the central visual
- #0F1626 — Surface Glass: Semi-transparent background for metric chips and secondary buttons
- #EB5737 — Primary Coral: Primary CTA fill, glowing accents, category badges, and active icons
- #22C55E — Active Indicator Green: Live status pulsing indicator dot within the metrics chip
- #FFFFFF — Text Pure White: Primary headings, brand logo, metric values, and high-emphasis labels
- #94A3B8 — Text Cool Slate: Subhead body copy, inactive nav links, and secondary metric labels
- #1E2638 — Border Subtle: Outlines for secondary CTAs, stats containers, and curved section dividers
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 56px display. Tracking -0.03em at display, 0 at body. The typographic tone is authoritative, highly technical, and modern enterprise-grade. Crisp geometric grotesque letterforms (Inter Display match) feature tight tracking on the display heading (-0.03em) to convey density and security rigor. The wide letter-spacing on uppercase 11px sub-labels introduces a polished command-line precision.
GEOMETRY & SPACING
Corner radii — cards 10px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely through optical luminosity and emission rather than standard drop shadows. Elements close to the camera, such as the glowing 3D layers and particle cloud, cast an atmospheric ambient bleed onto surrounding dark surfaces. Secondary controls use subtle 1px stroke boundaries (#1E2638) with backdrops tinted to 60% opacity.
IMAGERY
The visual hero is an isometric stack of five rounded glass-like architecture slabs capped by a pointillist, glowing cloud made of millions of tiny light particles. Colors transition vertically from deep cyber blue at the base up to an infrared coral-red nebula in the cloud center. Photographic representations of hardware or generic vector flat art are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive centerpiece is the upward-radiating isometric glass tier stack terminating in an illuminated, particulate coral-and-blue cloud nebula. It visually communicates 'cloud layers' literally yet abstractly. Replicating this system requires matching the dark void canvas, the exact warm coral accent against cold navy, and the gentle convex horizon arc at the footer.
MUST
- Reserve the coral-orange (#EB5737) exclusively for primary CTAs and illuminated energy sources.
- Maintain high typographic contrast with crisp #FFFFFF headlines over the dark #07090E canvas.
- Use subtle 1px borders (#1E2638) around glass containers rather than heavy drop shadows.
- Align the right-hand layer labels directly with the horizontal planes of the 3D isometric stack.
AVOID
- Do not use colorful partner logos; keep them desaturated slate monochrome.
- Never apply harsh drop shadows; rely on luminous atmospheric gradients for depth.
- Avoid solid container fills for metric widgets; use translucent glassmorphic surfaces.
- Do not use more than one coral-filled CTA button per screen section.
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 中尝试 
