Design a dark-mode abstract background artwork: deep-space planetary luminescence paired with frosted glass docks and electric neural gradients.
LAYOUT
The page uses an asymmetric split hero layout bounded inside a 1360px container. The left 50% houses a tight, vertically stacked editorial lockup (eyebrow, massive 3-line heading, subhead, dual CTA buttons). The right 50% yields fully to the luminous cosmic illustration, while the bottom anchors the entire composition with a wide, full-bleed frosted feature dock.
PALETTE (use these exact hex values)
- #060B24 — Deep Cosmos Base: deepest background layer simulating the infinite void of space
- linear-gradient(180deg, rgba(20, 28, 64, 0.45) 0%, rgba(10, 16, 42, 0.65) 100%) — Frosted Nebula Glass: translucent backdrop fill for floating feature docks and elevated interactive pills
- #3B82F6 — Electric Horizon Blue: primary call-to-action fill and glowing status indicators
- linear-gradient(135deg, #C084FC 0%, #F472B6 100%) — Celestial Violet Gradient: typographic accent gradient highlighting high-value emotional words
- #67E8F9 — Atmospheric Cyan Rim: ambient lighting highlights along terrain edges and active glow nodes
- #FFFFFF — Star White: primary headlines, prominent button labels, and high-emphasis icons
- #94A3B8 — Starlight Slate: secondary body copy, navigation menu items, and feature descriptions
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display,Geist Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 15px subheading, 18px body-lg, 56px display. Tracking -0.03em on display, 0 on body. The typography relies on Inter (or equivalent clean grotesque sans-serifs) to introduce cold, clinical precision that balances the emotional theatricality of the space art. It feels engineered, dependable, and audit-grade, exactly matching an enterprise infrastructure positioning.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is created through photographic atmospheric layers rather than traditional drop shadows. Translucent glass planes float above a deep stellar background, delineated by 1px specular borders and ambient light cast from the glowing planetary horizon behind them.
IMAGERY
The visual anchor is a hyper-detailed CGI rendering of a glowing planet limb illuminating fractured, crystalline geometric terrain with cyan and violet fiber-optic microstructures. Real-world photography, flat illustrations, or warm-toned imagery would drastically compromise the deep-space technological theme.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the bottom-anchored frosted glass dock suspended directly over illuminated crystalline terrain, echoing the sweeping planetary horizon curve glowing above it. Misusing it involves making the dock completely opaque or stripping away the backdrop blur, reducing a cinematic cockpit view to a generic flat footer.
MUST
- Position the 3D celestial illustration on the right to preserve clean left-aligned text legibility.
- Use backdrop-filter blur (minimum 16px) on all floating glass surfaces.
- Restrict color gradients to singular emphasis words within display headlines.
- Apply subtle outer box-shadow glows (rgba(59, 130, 246, 0.4)) exclusively to primary action triggers.
AVOID
- Never use opaque solid gray or white card backgrounds that break cosmic transparency.
- Do not apply heavy multi-color gradients across entire body paragraphs.
- Avoid harsh high-contrast drop shadows; rely on luminous glows and rim lighting.
- Do not crowd the planetary artwork with text overlays or complex cards.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3408:2416. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
