Design a dark-mode abstract background artwork: a luminous ring of stardust framing deep scientific inquiry in velvet space.
LAYOUT
Strict vertical stack centered inside an elliptical visual frame. The top nav is distributed across the top edge; the hero block sits dead-center within the portal's eye (eyebrow, H1, paragraph, dual pill actions); the metrics dock anchors the lower third, followed by a faint one-line trust marker.
PALETTE (use these exact hex values)
- #030816 — Cosmic Void: deep background canvas underlying the particle simulation
- #0B2A4A — Aperture Deep: deep sapphire center of the vortex framing primary copy
- #F4B366 — Amber Glow: primary pill button fill and header CTA highlight
- #38BDF8 — Electric Cyan: right-side particle spray and secondary metric indicator ring
- #E25B6C — Nebula Coral: left particle rim and relevance metric indicator ring
- #34D399 — Starlight Emerald: researcher metric badge icon ring
- #FFFFFF — Pure White: display headlines, metric figures, and icon glyphs
- #A5C4DB — Mist Cyan: subheadings, metric labels, and navigation menu links
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 22px heading, 60px display. Tracking -0.03em at display, +0.12em at overline, normal at body. Scientific, crisp, and futuristic without drifting into unreadable sci-fi tropes. By employing an exacting geometric sans-serif (Inter/SF Pro style) with tight tracking at large scales and generous letter-spacing on uppercase labels, the interface projects serious enterprise AI authority.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 9999px, buttons 9999px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created not via drop shadows, but through atmospheric luminescence and optical layering. Bright particle fields recede into a deep velvet void (#030816), while the foreground metrics dock relies on a frosted glass surface (backdrop-filter: blur(16px)) with an ethereal 1px cyan rim highlight.
IMAGERY
The visual hero is an organic, high-resolution generative particle simulation forming an accretion disk or gravitational vortex. It shifts from warm solar flares on the left to deep cold turquoise light trails on the right; flat illustrations or static photographic stock would violently clash with this dynamic physics-inspired aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The glowing accretion vortex aperture that serves as a literal camera lens, framing pure white centered typography in calm deep space while surrounded by swirling kinetic stardust. Misusing it means scattering text across the chaotic particle band rather than keeping the typographic stage completely tranquil.
MUST
- Keep the center of the vortex clear of high-density particle sprites so headline legibility remains pristine.
- Use warm amber (#F4B366) strictly for conversion buttons to create immediate visual hierarchy against cool cyan.
- Maintain strict center alignment for all hero text, buttons, and trust copy elements.
- Constrain metric descriptions to two concise lines with font-size 12px and line-height 1.3.
AVOID
- Do not use rectangular, sharp-cornered buttons; everything in this system relies on 9999px pill geometry.
- Do not let the swirling particle nebula overlap text elements with bright highlight nodes.
- Do not apply heavy dark drop shadows under buttons or glass cards; depth is purely luminous.
- Do not use saturated blue fills for buttons; warm gold is the intentional complement to the cyan canvas.
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 中尝试