Design a dark-mode abstract background artwork: deep space gravitational fields sculpted by bioluminescent particle streams and precise geometric typography.
LAYOUT
Asymmetric split layout anchored on a 1360px container. The left 45% accommodates the semantic copy stack (eyebrow logo, lightweight display heading, lead paragraph, dual CTA buttons, and bottom metric bar). The right 55% is unobstructed space dedicated to the dynamic particle field.
PALETTE (use these exact hex values)
- #050713 — Abyssal Void: Primary page background creating infinite dark depth across the canvas
- #0e0f2b — Singularity Violet: Subtle under-glow and ambient shadow pooling beneath particle clouds
- #e63980 — Supernova Magenta: Inner accretion rim glow, headline gradient origin, and primary CTA
- #7952ec — Nebula Violet: Mid-spectrum transition tone in buttons, gradients, and particle flows
- #38bdf8 — Cosmic Azure: Periphery particulate scatter and terminal point in linear text gradients
- #ffffff — Pure Starlight: Primary headings, brand mark icon, and active button text
- #94a3b8 — Interstellar Gray: Body descriptions, navigation links, and metric labels
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Satoshi, Space Grotesk), weights 300/400/500/600. Sizes 11px caption, 13px body-sm, 16px body, 20px subheading, 56px display. Tracking -0.03em at display, 0.08em at uppercase labels. The geometric sans-serif (Plus Jakarta Sans or Satoshi) conveys futuristic precision, computational authority, and academic credibility. Its ultra-light weights juxtaposed against tight tracking feel scientific and cinematic rather than corporate.
GEOMETRY & SPACING
Corner radii — cards 12px, links 9999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 120px between sections, 1360px container, airy density.
DEPTH
Depth is created not via traditional drop shadows, but through atmospheric optical glow and radial lighting emanating from the accretion disk. Elements higher in hierarchy (like primary buttons and gradient text) carry self-luminescent qualities that project light against the deep #050713 void.
IMAGERY
The visual language relies on generative, mathematically calculated particle simulations depicting gravitational phenomena like black holes and cosmic accretion disks. Realistic stock photography, flat vector illustrations, or cartoonish graphics are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The one signature element is the combination of the 3D glowing particle accretion disk with the light-weight display headline that cascades into a magenta-to-indigo gradient on the final line. To use it properly, keep the first two headline lines stark white and let the singularity's particle glow match the exact gradient stops of the text.
MUST
- Keep display typography light (font-weight 300) to contrast gracefully with the intense particle background.
- Restrict the hot magenta-to-violet gradient strictly to the primary button and the final line of the hero title.
- Use uppercase tracking (0.08em at 11px) for UI controls, navigation items, and button labels.
- Anchor metrics with fine 1px hairline dividers in translucent white (rgba(255,255,255,0.15)).
AVOID
- Do not use heavy, bold sans weights for the headline text; it will overwhelm the particulate background.
- Avoid solid, flat card backgrounds that sever the continuous cosmic void.
- Never apply saturated drop shadows to buttons; rely on natural luminescence against the #050713 void.
- Do not clutter the right half with UI controls that obstruct the particle vortex.
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 中尝试