Design a dark-mode abstract background artwork: an ethereal deep-space observatory charged with radiant bioluminescent particle streams and precision glass interfaces.
LAYOUT
The composition follows an asymmetric orbital balance. The top edge houses a slim 72px utility nav bar with a balanced logo-to-CTA distribution. The left quadrant holds the textual intellectual weight—eyebrow, stacked 3-line headline, body, and action cluster—while the center canvas reveals the dual vortex phenomena. The right edge balances the viewport with a vertical telemetry rail of metrics, while the lower baseline grounds the viewport with a 3-part feature triad.
PALETTE (use these exact hex values)
- #020612 — Abyssal Void: Foundational background canvas simulating cosmic deep space.
- linear-gradient(135deg, #18c5b0 0%, #7df2b8 100%) — Aurora Mint Gradient: Dominant luminous fill for primary action pill buttons and logo highlights.
- #38efb6 — Celestial Core Cyan: High-intensity accent used for icons, highlighted text spans, and glowing anchor points.
- #071226 — Deep Space Glass: Translucent backing for floating cards, modal controls, and secondary indicators.
- #162844 — Subtle Orbit Stroke: Ultra-thin border boundaries for glass cards, separators, and timeline connectors.
- #f8fafc — Starlight White: Primary headings, active states, and maximum-contrast display typography.
- #8ba3b8 — Nebula Mist: Body copy, supporting explanations, and inactive navigation links.
- #475c70 — Subdued Slate: Metadata subtitles, stat descriptions, and passive track lines.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 26px heading, 64px display. Tracking -0.02em at display, 0.18em at eyebrow uppercase. The typographic tone is intellectual, precise, and exploratory, executed in clean geometric sans-serif. Tight tracking on display headlines creates authoritative focus, while wide letter-spacing on captions provides scientific telemetry flavor. Plus Jakarta Sans or Inter should be licensed or imported via Google Fonts to replicate these clean structural proportions.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is rendered purely through optical atmospheric layering rather than drop shadows. Translucent glass surfaces (rgba(7, 18, 38, 0.6)) sit above a deep volumetric particle canvas, with glowing vector cores casting ambient light from underneath UI containers. High-contrast typography and neon-fill pills occupy the highest Z-plane, floating cleanly above the cosmic backdrop.
IMAGERY
The imagery consists of fine, mathematically complex particle fields forming dual swirling celestial vortexes. Light radiates from bright cyan and emerald gravitational centers through fibrous, thread-like filament tendrils. Traditional raster photography or flat vector graphics would immediately destroy the deep-space cinematic immersion.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the dual glowing celestial vortex rendered as fibrous particle filaments that visually wrap around and cradle the left-aligned headline. It acts as both organic ambient lighting and a thematic metaphor for knowledge synthesis. Misusing it involves placing busy text directly over the central white-hot cores, obliterating typographic legibility.
MUST
- Keep typography strictly flush left in the primary hero block to mirror structural stability against the dynamic background.
- Use uppercase tracking (0.18em) exclusively for the single-line category eyebrow.
- Ensure the hero heading's final line features a subtle vertical gradient into soft cyan.
- Use 999px border-radius consistently for all primary interactive buttons.
AVOID
- Do not introduce solid opaque backgrounds to cards; surfaces must remain frosted glass at 50-60% opacity.
- Never use warm hues (reds, yellows, warm purples) which conflict with the bioluminescent cyan-teal system.
- Do not center-align the main headline or descriptive paragraph.
- Avoid thick solid borders; keep containment strokes to 1px with under 30% alpha.
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 中尝试 
