Design a dark-mode website section: glassmorphic threat intelligence suspended against high-orbit celestial planetary radiants and deep particulate space.
LAYOUT
The hero layout implements an asymmetric 45/55 horizontal split inside a 1360px container. The left side stacks a pill category kicker, a three-line 56px punchy headline, descriptive body text, dual CTA actions, and a three-item feature list. The right side is occupied entirely by the angled glassmorphic risk dashboard that overlaps the planetary background artwork.
PALETTE (use these exact hex values)
- #060A17 — Cosmic Abyss: Root background color underneath orbital particle clouds and planetary rim lighting.
- #4D6EF7 — Electric Indigo: Primary interactive fill for high-emphasis CTA buttons and active progress track indicators.
- #FFFFFF — Star White: Display headlines, primary telemetry values, and high-contrast button labels.
- #8C9BB5 — Starlight Muted: Body copy, supporting metrics, table subheaders, and breadcrumb labels.
- #EF4444 — Critical Crimson: Critical severity indicators, warning sparklines, and vulnerability badge tags.
- #F59E0B — Warning Amber: High-risk badges, warning sparkline trends, and secondary threat tallies.
- #8B5CF6 — Surveillance Violet: Medium severity graphs, donut chart segments, and active endpoint markers.
- #10B981 — Aurora Teal: Positive delta percentages, healthy system states, and validation checkboxes.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 28px heading, 56px display. Tracking -0.03em at display, -0.01em at body. The typography relies on Plus Jakarta Sans or Inter: engineered, precise, authoritative, and clinical. The deliberate full-stops in the headline ('Find vulnerabilities. Fix them. Continuously.') establish an unyielding, mission-critical cadence essential for enterprise cybersecurity. High x-height ensures immediate legibility even at 11px and 12px inside dense dashboard tables.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created entirely through optical transparency and atmospheric backlighting rather than traditional drop shadows. Panels float above the cosmic canvas via frosted glassmorphism (rgba(9, 17, 36, 0.8) with 16px blur) accented by light leaks from the celestial body behind it. Crisp 1px perimeter borders with varying alpha simulate light catching the bevelled edge of a glass pane.
IMAGERY
The visual world depicts deep space: an orbital vantage point featuring an illuminated planetary crescent, atmospheric dust rings, and sparkling starlight nebulas. Visual assets are strictly high-fidelity digital art or telemetry wireframes; photography of human beings or earthly office settings would completely fracture the aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The defining move is the high-contrast juxtaposition of a photorealistic celestial planet crescent illuminating the upper edge of an ultra-detailed, semi-transparent cybersecurity glass dashboard. The telemetry HUD appears literally suspended in planetary orbit. To execute properly, ensure the light source of the background planet aligns directly with the edge highlights and glow gradients on the dashboard glass pane.
MUST
- Retain the 1px luminous glass rim on all floating cards using rgba(142, 175, 255, 0.2).
- Keep headlines split into tight, punchy cadence separated by periods with high-contrast white text.
- Restrict vibrant primary indigo (#4D6EF7) to active elements, progress highlights, and main CTAs.
- Use backdrop-filter blur(16px) on all floating interactive planes over planetary background artwork.
AVOID
- Do not use opaque grey or white backgrounds anywhere in the interface.
- Do not apply heavy drop shadows with dark offsets; use diffuse ambient glows instead.
- Do not allow severity colors (red, amber, violet) to bleed into primary navigation or layout structure.
- Do not eliminate the 1px subtle frosted border from floating surfaces, or they will melt into the background.
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 中尝试 
