Design a dark-mode abstract background artwork: deep space glassmorphism anchored by a radiant cosmic vortex and contemplative solitary silhouette.
LAYOUT
The interface employs an asymmetrical hero composition built around a 1360px max-width container. The left third is heavily weighted with an editorial stack (eyebrow, multi-line display title, summary body, and paired CTA buttons) resting above a three-column telemetry dock. The center and right zones are intentionally preserved for atmospheric artwork, punctuated only by a right-edge vertical pagination track and a bottom-right floating glass prompt.
PALETTE (use these exact hex values)
- #030816 — Obsidian Void: deep background canvas absorbing light across the periphery and lower mountain ridge
- #22d3ee — Borealis Cyan: primary accent for active states, brand mark, button gradients, and stat icons
- #6366f1 — Deep Indigo: trailing hue in primary CTA gradients and nebula transition zones
- #fed7aa — Solar Core: high-intensity ambient center of the galactic spiral
- #ffffff — Starlight White: hero headline first line, active nav links, and high-emphasis metric numbers
- #94a3b8 — Nebula Slate: subhead body copy, inactive nav links, and metric description labels
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Outfit, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px heading, 60px display. Tracking -0.03em at display, 0.08em at uppercase tags. Plus Jakarta Sans delivers an ultra-modern, technological, yet humanistic presence that prevents the sci-fi background from feeling like a video game. Tight letter-spacing (-0.03em) on large display sizes creates crisp editorial authority, while generous tracking on uppercase micro-badges provides telemetry polish. High-quality alternatives include Inter Display or General Sans.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 9999px, buttons 9999px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1360px container, airy density.
DEPTH
Depth is created purely through luminous optical layering rather than conventional drop shadows. Background art recedes into deep obsidian space, while foreground frosted glass cards float above terrain via background blur and hairline light refraction borders. Interactive elements project a soft, atmospheric cyan-to-purple outer glow (0 8px 24px rgba(34, 211, 238, 0.25)).
IMAGERY
The imagery language is hyper-detailed celestial fantasy rendered with cinematic scale: an all-encompassing spiraling galaxy vortex bursting with warm luminescence, juxtaposed against a small silhouette figure on rugged terrain. Photographic realism of humans or sterile 3D clay mockups would immediately violate this ethereal, awe-inspiring tone.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the dual-tone display heading ('The universe / is your library.') where the final phrase shifts into a cyan-to-lavender gradient, directly echoing the chromatic horizon of the illustrated nebula behind it. It is commonly misused by applying gradients to entire sentences, which compromises legibility and flattens foreground-background separation.
MUST
- Always set display buttons to full pill (9999px) border radius.
- Use backdrop-filter: blur(16px to 24px) on all frosted glass surfaces.
- Apply cyan-to-violet linear gradients exclusively to primary interactive triggers and headline accent text.
- Frame translucent panels with a hairline 1px border in rgba(255, 255, 255, 0.12).
AVOID
- Never introduce solid opaque card backgrounds; they destroy the cosmic depth illusion.
- Do not use sharp 0px or small 4px corners on interactive buttons.
- Never apply drop shadows with opaque black offsets; use subtle ambient colored glows instead.
- Avoid warm yellow or orange text; confine warm hues entirely to the illustration's core vortex.
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 中尝试