Design a dark-mode abstract background artwork: deep cosmos particle vortex illuminating sharp editorial typography over dark glassmorphic surfaces.
LAYOUT
The composition follows an asymmetrical split hero structure within a 1360px container. The left 45% of the viewport is dedicated to dark breathing space, editorial headline text, action buttons, and social validation. The right 55% hosts the radiant celestial singularity that swirls across the canvas. Anchoring the bottom is a balanced four-column grid of glassmorphic feature cards.
PALETTE (use these exact hex values)
- #030B1E — Midnight Space Void: Deepest canvas background behind the particle artwork and interface layout.
- #081C3D — Deep Ocean Blue: Mid-tone ambient blue bleeding through translucent overlays and glass panels.
- #F6BC65 — Solar Core Amber: Primary CTA fill, glowing logo mark, and focal galactic vortex glow.
- #13D8A2 — Ethereal Cyan: Mid-ring particle clouds, feature category highlights, and active icon accents.
- #7642E8 — Nebula Violet: Outer rim cosmic particle gradient and collaboration card tint.
- #FFFFFF — Pure Starlight: High-contrast headline text, core typography, and prominent headings.
- #8EA6C9 — Muted Astral Dust: Secondary description copy, inactive navigation links, and micro-labels.
- #274872 — Translucent Glass Border: Subtle 1px boundary stroke defining card edges and secondary pill buttons.
TYPOGRAPHY
Typeface Playfair Display (or Instrument Serif, Cormorant Garamond, Newsreader), weights 400/500. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 20px heading, 56px display. Tracking -0.02em at display sizes. The typographic personality is academic yet futuristic, evoking serious research paired with awe-inspiring discovery. The serif display font (resembling Playfair Display or Instrument Serif) lends classical humanistic authority, while the italicized second line injects poetic cadence. For cost or open-source requirements, pairing Google Fonts Instrument Serif with Inter replicates this exact character.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 12px, buttons 999px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created entirely through optical atmospheric luminance rather than drop shadows. Translucent glass surfaces (rgba(11, 29, 58, 0.45)) with 1px subtle highlight borders sit suspended in front of deep space nebulae, while glowing stardust clusters bleed through from behind.
IMAGERY
The imagery features a hyper-detailed cosmic vortex composed of hundreds of thousands of luminescent particulate sparks swirling across teal, emerald, violet, and deep indigo spectra. It feels like an astronomical simulation or mathematical point-cloud rather than a generic stock nebula. Harsh photographic cutouts or flat vectors would ruin the aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The golden-amber celestial core radiating through a cyan-to-violet particle whirlpool, paired against an italicized editorial serif headline ('in the vast.'). The visual weight of the cosmic eye pulls the gaze across the screen directly into the text hierarchy. Losing this organic particulate vortex reduces the interface to a conventional dark SaaS template.
MUST
- Reserve solid amber (#F6BC65) exclusively for the primary logo, eyebrow tag, and primary conversion pills.
- Pair high-contrast editorial serif display headlines with precise, clean sans-serif UI typography.
- Use backdrop-filter blur (16px to 24px) on cards so luminous background nebulae softly refract through.
- Maintain high tracking (>=0.15em) on small all-caps metadata to preserve legibility on dark glass.
AVOID
- Do not use harsh, fully opaque card backgrounds that block the background particle swirls.
- Do not style the primary serif font in bold or ultra-heavy weights; keep it delicate and refined.
- Do not introduce sharp rectangular borders on buttons; always use full 999px pill radii.
- Do not apply drop shadows to text elements; readability relies on stark luminance contrast.
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 中尝试