Design a dark-mode abstract background artwork: deep void illuminated by swarming embers of computational stellar matter.
LAYOUT
The page utilizes an asymmetrical two-column composition against a 1380px container. The left 45% is dedicated entirely to clear, readable content: header navigation, a 72px display headline, a succinct 3-line paragraph, paired action buttons, and a grounded logo bar. The right 55% is surrendered completely to the glowing particle sphere, which bleeds organically into the deep canvas on the left edge.
PALETTE (use these exact hex values)
- #060307 — Obsidian Deep: Deepest canvas background providing pure contrast on the left side of the hero.
- linear-gradient(135deg, #ff944d 0%, #d82b7c 100%) — Solar Flare Gradient: Primary action fill, logo accent, and subtle heading text overlay.
- #ff6a3d — Ember Orange: Secondary accent for particle highlights and button start-stops.
- #cf2975 — Magenta Core: Vibrant secondary accent in glowing buttons and particle dispersion.
- #ffffff — Star White: Primary headline text, active navigation states, and brand logo mark.
- #9e9aa4 — Nebula Gray: Subheading copy, secondary navigation links, and section labels.
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display), weights 200/300/400/500. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 72px display. Tracking -0.03em on display, 0.05em on body, 0.18em on badges. The typographic tone is ethereal, cerebral, and rigorously computational. By deploying an ultralight geometric grotesque with negative letter-spacing for large text, it evokes advanced scientific research and artificial intelligence. Inter Display or Plus Jakarta Sans configured at weight 200/300 effortlessly captures this precise balance of restraint and sophistication.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 120px between sections, 1360px container, comfortable density.
DEPTH
Depth is created purely through luminous emission and dark space rather than conventional drop shadows. Intense, dense particles visually occupy the foreground and midground, while UI text sits effortlessly on an unlit deep space plane (#060307). Buttons carry subtle, soft ambient glows (0px 8px 24px rgba(217,44,123,0.3)) rather than structural shadows.
IMAGERY
The visual anchor is a hyper-dense, photorealistic 3D point-cloud simulating a fiery cosmic orb and celestial shockwave. Millions of luminous particles sweep diagonally across the viewport in glowing amber, coral, and magenta tones. Stock photography, flat 2D illustrations, or cartoon avatars are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an ultralight, hairline display title sitting entirely inside deep negative void, directly abutting a hyper-dense, radiant particle sphere. This creates dramatic visual balance between silence and overwhelming computational energy. Replicating this requires leaving at least 40% of the screen in pure unblemished darkness to let the graphic burn brightly.
MUST
- Keep headlines ultra-thin (font weight 200–300) to balance against dense particle visuals.
- Restrict heavy color saturations solely to call-to-action elements and the visual asset.
- Position content firmly on the dark, empty left side allowing the graphic to breathe on the right.
- Use 1px semi-transparent borders (rgba(255,255,255,0.15)) on all non-gradient interface containers.
AVOID
- Do not use heavy font weights (700+) for display titles; it destroys the futuristic technical mood.
- Never place full-bleed white or light-themed cards over this dark particle canvas.
- Avoid placing text directly over the densest part of the glowing particle sphere.
- Do not use sharp 0px corners; maintain subtle 8px radii across buttons.
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 中尝试 
