Design a dark-mode abstract background artwork: deep cosmic void illuminated by a radiant stellar vortex and measured through razor-sharp astronomical reticles.
LAYOUT
The page adheres to an asymmetric split rhythm anchored on an expansive single-screen hero container. The left third is reserved for the primary text stack, overline, and call-to-action grouping, floating calmly in the darker quadrant of space. The right and central areas are claimed entirely by the massive swirling accretion disc. The lower edge is stabilized by a wide horizontal 4-column glass container acting as an anchored dashboard dock.
PALETTE (use these exact hex values)
- #06070E — Cosmic Void: Primary screen canvas and deepest shadow baseline across the entire viewport.
- #FFE89A — Incandescent Core: High-intensity center of the particle vortex and focal glow highlight.
- #FF8A27 — Solar Plasma: Main energetic accent, primary particle stream, and warm system indicator.
- #6D28D9 — Cosmic Violet: Deep interstellar haze tone balancing the warm thermal center.
- #38BDF8 — Spectral Cyan: Rare pinpoint starlight dots and cold telemetry indicator lights.
- linear-gradient(90deg, #FFA751 0%, #A13E58 100%) — Warm Action Gradient: Fill for primary action button, transitioning from amber to dark magenta.
- #FFFFFF — Starlight White: Primary active labels, buttons text, and prominent navigation items.
- linear-gradient(135deg, #F1EEF7 0%, #D8BFE8 50%, #EAA291 100%) — Iridescent Title: Gradient applied as background-clip to the main display header.
- #8B8B9D — Muted Asteroid: Body copy, inactive nav links, and secondary metric descriptions.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, Syne), weights 300/400/500/600. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 64px display. Tracking -0.03em at display, 0.18em at overline. Plus Jakarta Sans delivers a geometric, highly engineered precision that suits enterprise infrastructure while remaining approachable. Its wide apertures and crisp geometry mimic aerospace instrumentation at small sizes and high-fashion editorial styling at 64px display scale. Inter or General Sans can be used as seamless replacements without altering line metrics or tracking.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, airy density.
DEPTH
Depth is created entirely through optical radiance and atmospheric obscuration rather than material drop shadows. The background particle cloud recedes into the black void, while the interactive bottom dock floats above via backdrop blur and edge illumination from an ultra-thin 1px border. Glowing focal points act as light sources that cast ambient color tints across surrounding wireframes.
IMAGERY
The visual anchor is a scientifically styled cosmic vortex formed from millions of fine volumetric dust particles revolving around a burning plasma core. Sharp, vector astrolabe reticles and telemetry grids intersect the organic clouds to signify precision computing and mathematical control. Generic stock astronomy photos, cartoonish vector planets, or 3D device mockups would entirely break the technical-mystic mood.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an intensely hot, organic stellar vortex with ultra-fine, razor-sharp technical astrolabe HUD rings. To implement correctly, overlay thin concentric SVG circles and radial tick marks directly over high-density volumetric dust particles. It is commonly misused by making the reticles too thick or opaque, turning an ethereal scientific instrument into a clunky sci-fi game UI.
MUST
- Use ultra-thin weights (300-400) for giant display headlines to maintain celestial elegance.
- Constrain copy column width on the left to leave the central energy vortex unobstructed.
- Render background reticle lines at 1px thickness with low opacity (rgba(255, 255, 255, 0.12)).
- Use glowing 8px circular status pips as leading icons in cards to echo planetary bodies.
AVOID
- Do not use heavy font weights (700+) on headlines; it shatters the refined, technical atmosphere.
- Do not introduce opaque, solid-color card surfaces that hide the underlying particle field.
- Do not use saturated drop shadows; achieve depth strictly via light emissions and blurs.
- Do not place complex text blocks directly over the incandescent core of the 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 中尝试