Design a dark-mode abstract background artwork: cosmic particle field meets high-reliability enterprise ai compute infrastructure.
LAYOUT
The layout utilizes a structured 12-column grid within a max 1380px container, biased heavily to the left. The hero text block, primary buttons, and feature capability badges claim the left 6 columns, giving the right 6 columns unobstructed room for the sweeping cosmic arc. The lower section spans a unified 4-column glass container summarizing enterprise metrics with micro-sparklines aligned along the bottom edge.
PALETTE (use these exact hex values)
- #07051a — Deep Void Canvas: Deepest background tone filling the viewport edges and left content block.
- #3d2a68 — Glass Border Violet: One-pixel structural borders for cards, dividers, and ghost buttons.
- linear-gradient(90deg, #F06A58 0%, #D842C4 100%) — Brand Flare Gradient: Primary CTA fill, standout title punctuation dot, and accent highlights.
- #c532be — Electric Fuchsia: Particle crests, active glows, and icon glyph highlights.
- #f59e4b — Solar Core Amber: High-intensity particle cluster illumination and button gradient origin.
- #ffffff — Starlight White: Primary headline text, metric numbers, and active navigation links.
- #9a97bc — Muted Nebula Blue: Supporting descriptive text, metric captions, and inactive nav items.
- #7d6e9d — Subtle Eyebrow Purple: Uppercase tracked category tag above hero headline.
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 17px body-lg, 32px heading, 64px display. Tracking -0.03em at display, 0.05em at eyebrow. The type is calm, highly engineered, and uncompromisingly modern, utilizing a tight geometric grotesk (matching Inter Display or Plus Jakarta Sans). Its surgical precision and heavy negative tracking on display weights provide an architectural counterweight to the chaotic, fluid particle physics of the canvas. It signals enterprise stability without losing futuristic vision.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 9999px, buttons 9999px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is created entirely through optical lighting and transparency rather than drop shadows. The background is an endless dark spatial void from which luminous particle clusters emerge along a z-axis curve. Foreground UI elements hover over this field via translucent glass cards (backdrop-filter blur: 16px) outlined with faint 1px borders.
IMAGERY
The visual anchor is a hyper-dense, photorealistic 3D volumetric particle cloud resembling an energetic stellar ring or planetary event horizon. Thousands of microscopic starlight points transition smoothly from burning solar orange into neon magenta and deep galactic violet. Any flat graphics, low-res textures, or cartoon-style illustrations are strictly incompatible.
SIGNATURE DETAIL — the thing that makes this design itself
The sweeping, curved cosmic particle ribbon that curls from behind the right viewport edge into the foreground, bursting with incandescent amber-to-fuchsia starlight points. It is misused if overlaid directly under body copy or replaced with a flat CSS radial gradient.
MUST
- Anchor text firmly on the left third of the viewport to prevent particle visual noise from reducing readability.
- Use linear-gradient(90deg, #F06A58, #D842C4) strictly on primary triggers and the headline terminal period.
- Preserve pure dark contrast behind typography; do not let high-density particles cross under the main headline.
- Use 9999px fully rounded pill caps for interactive buttons to contrast against rectangular glass stat containers.
AVOID
- Never use opaque white or light grey containers; cards must remain glassy and semi-transparent.
- Do not introduce sharp 90-degree corners on metric cards or interactive pill elements.
- Never replace the curved particle wave with static vector illustrations or flat icons.
- Do not use saturated blue or green; stick strictly to the magenta, solar coral, and violet spectrum.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3424:2416. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试