Design a dark-mode website section: cosmic nebulae and luminous orbital telemetry anchored by razor-sharp enterprise typography against an infinite abyss.
LAYOUT
The header is fixed at the top with a balanced split between left-aligned wordmark, centered utility navigation, and right-aligned auth actions. The hero adopts an asymmetrical 50/50 stage: the left half hosts the sequential text stack (announcement pill, 60px display headline, supporting body, dual CTAs, and security footnote). The right half houses the expansive celestial illustration enveloped by orbiting interactive nodes and the anchor telemetry card.
PALETTE (use these exact hex values)
- #060813 — Abyssal Canvas: Deep void background across the entire viewport, receding behind particle layers and atmospheric glows.
- #0d111f — Card Glass Obsidian: Semi-translucent dark slate background for the floating metrics card and interactive orbital pills.
- #f8fafc — Starlight Primary Text: High-contrast headings, main metric values, and high-priority button text.
- #94a3b8 — Muted Nebula Slate: Subordinate body copy, navigation menu links, and telemetry category headings.
- #c026d3 — Singularity Violet: Cosmic core highlight, terminal headline gradient, and high-risk indicator accents.
- #38bdf8 — Cyber Cyan: Leading stop of CTA gradient, agent state indicators, and sparkline chart trajectory.
- #14b8a6 — Photon Teal: Icon container fill for security badges and low-friction automated agent notifications.
- linear-gradient(135deg, #3b82f6 0%, #c026d3 100%) — Hyperdrive Gradient: Primary interactive action button background and terminal headline word fill.
TYPOGRAPHY
Typeface Inter Display (or SF Pro Display, Geist, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 28px heading, 60px display. Tracking -0.03em at display, 0.04em at labels. The typographic tone is cool, precise, and hyper-modern, speaking with the authority of an enterprise operating system. The tight tracking on the display headline conveys density and enterprise scale without feeling cluttered. Inter Display or Geist perfectly communicates this cold precision; substitutions must preserve clean geometric apertures and robust micro-weights.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely through optical atmospheric luminance rather than drop shadows. Translucent glass containers with 1px borders of rgba(255,255,255,0.08) hover over radial glows and multi-layered particle nebulae. Visual hierarchy relies on luminance stacking: distant dust clouds sit behind crisp orbital vectors, which sit beneath hard-edged HUD cards.
IMAGERY
The imagery is purely synthetic and procedural: an astrophysics-inspired energetic event resembling an accretion disk or neural singularity. Fine dot-matrix grids, concentric orbital vectors, and stardust clusters illustrate artificial intelligence dynamics. Real photography, flat vector illustrations, or non-luminous 3D renders would completely break the cosmic atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the dual-tone gradient emphasis on the headline's terminal word ('forward.') paired with the blazing accretion-disk singularity orbited by glassmorphic telemetry cards. This directly tethers product marketing to dynamic scientific telemetry. It is ruined if executed with dull desaturated glows or if the glowing core overpowers the readability of the surrounding interface labels.
MUST
- Use deep obsidian canvas (#060813) to ensure luminous light bursts gain maximum cinematic contrast.
- Restrict the blue-to-pink gradient strictly to primary CTAs, the key brand mark, and headline emphasis.
- Enclose secondary agent tags inside full 999px rounded pills with 1px translucent borders.
- Pair large bold metrics with uppercase, letterspaced micro-labels (+0.08em) for HUD precision.
AVOID
- Do not introduce opaque light backgrounds or solid grey cards that break the celestial depth.
- Do not color entire multi-line headlines in neon gradients; reserve the gradient only for the terminal word.
- Do not use sharp 0px corners on floating HUD modules or agent status pills.
- Do not clutter the left copy column with particles; isolate orbital bursts to the right-hand visual stage.
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 中尝试 
