Design a dark-mode abstract background artwork: a deep cosmic abyss energized by swirling particle clouds orbiting a high-density planetary data sphere.
LAYOUT
The header spans horizontally with wide outer margins, placing brand left, navigation center, and action right. The hero layout utilizes a split composition: the left 50% contains stacked category pill, 3-line headline, subtext, twin buttons, and a 3-column feature row below. The right 50% provides unrestricted visual breathing room for the large-scale particle globe.
PALETTE (use these exact hex values)
- #050b14 — Obsidian Abyss: Primary background canvas creating infinite depth behind glowing elements
- #2dd4bf — Bioluminescent Mint: High-impact CTA fill, primary logo icon mark, and dense foreground particle glow
- #38bdf8 — Orbital Cyan: Secondary particle trails, feature database icon, and intermediate illumination
- #a855f7 — Spectral Violet: Deep particle clouds at the globe base and AI ready feature star icon
- #ffffff — Pure Optic: Display headlines, active navigation items, and button dark text contrasts
- #94a3b8 — Nebula Slate: Supporting descriptive copy, inactive navigation links, and body paragraphs
- #1e293b — Subtle Horizon: Outlines on category pill badges, ghost buttons, and divider elements
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px subheading, 16px body-lg, 56px display. Tracking -0.03em at display, 0.05em at caps badge. The typographic tone is authoritative, highly technical, and minimalist, utilizing clean neo-grotesque sans letterforms. The tight display line-height (1.08) creates strong vertical cohesion for the multi-sentence headline. Standard system replacements like Plus Jakarta Sans or Geist Sans preserve the modern engineering aesthetic without friction.
GEOMETRY & SPACING
Corner radii — cards 12px, links 999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through luminous color value and particle density over an absolute dark canvas rather than traditional box-shadows. The particle sphere uses bloom effects and high-saturation nodes to simulate atmospheric front-to-back perspective. Interactive buttons sit directly on the ground plane, with focus delivered by luminance contrast.
IMAGERY
The imagery style is mathematical and generative, composed of hundreds of thousands of discrete glowing vertices forming a planetary sphere and swirling data orbits. The color palette in the imagery transitions smoothly between cyan, cobalt blue, and electric violet. Flat vector illustrations, stock photography, or cartoonish graphics are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-ringed bioluminescent particle globe bleeding off the right margin, blending high-density cyan vertices into deep violet strands. It turns what could be a static SaaS landing page into an alive, planetary data stream. It is commonly misused by rendering it as a low-res raster image rather than a crisp, high-density WebGL point-cloud.
MUST
- Keep headlines left-aligned and tightly tracked (-0.03em) across three punchy sentences.
- Use solid mint (#2DD4BF) exclusively for the single primary CTA button and brand mark.
- Maintain high opacity contrast between pure white headings and slate (#94A3B8) descriptions.
- Position 3D graphical point clouds to bleed off the right screen margin.
AVOID
- Do not introduce solid, opaque white or light gray card backgrounds.
- Avoid warm colors like red, orange, or amber anywhere in particle effects.
- Never center-align the main headline or the supporting call-to-action button group.
- Do not apply heavy drop shadows; rely entirely on luminous radial glows for depth.
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 中尝试 
