Design a dark-mode abstract background artwork: cosmic pointillism illuminating deep-space human intelligence through soft neon gradients and floating translucent pills.
LAYOUT
A balanced asymmetric two-column composition inside an expansive ~1360px max container. The left 50% contains the structured vertical stack: category pill, 64px display headline, two-line descriptive paragraph, dual CTA row, and a 3-part metrics row. The right 50% gives full breathing room to the particle portrait, allowing the cosmic glow to feather into the center gutter.
PALETTE (use these exact hex values)
- #090b14 — Cosmic Deep Space: Foundational canvas background color anchoring deep shadows and space void.
- #f8b4b4 — Bioluminescent Rose: Starting point for typographic and button gradient fills; conveys organic warmth.
- #a0d8ef — Ion Cyan: Ending stop for gradient highlights and header text; represents cold computing.
- linear-gradient(90deg, #f8b4b4 0%, #b8d4e4 100%) — Dawn Gradient Fill: Primary fill for main CTA buttons and primary heading text masks.
- #ffffff — Pure Starlight: Primary typography for metric numbers, logo mark, and key button labels.
- #9ab0c2 — Nebula Mist: Secondary copy, metric labels, and inactive navigation links.
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,SF Pro Display,DM Sans), weights 400/500/600. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 32px heading, 64px display. Tracking -0.03em at display, 0 at body. Clean, engineered, and aspirational. The use of a geometric/grotesque sans like Inter Display with tight letter-spacing (-0.03em) balances the hyper-detailed, emotional visual on the right with calm scientific authority. If Inter Display is unavailable, Plus Jakarta Sans provides the necessary modern geometric sharpness without feeling whimsical.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created purely through luminous optical layering rather than physical drop shadows. The background features a multi-plane generative particle cloud that recedes into true void (#090b14), while UI elements hover above via translucent fills (rgba 255,255,255,0.08) and hairline 1px strokes (rgba 255,255,255,0.14).
IMAGERY
The visual hero is a cinematic, photorealistic 3D pointillist face emerging from cosmic stardust, blending human anatomy with nebula particle clouds in neon pink, violet, and turquoise. Off-brand imagery includes flat vector illustrations, generic corporate stock photography, or standard geometric 3D wireframes.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone dawn gradient applied consistently across the display headline and the compound pill button (incorporating a segregated dark circular arrow disc). If replaced with monochrome text or a standard flat rectangular button, the design immediately loses its proprietary, ethereal sci-fi warmth.
MUST
- Retain the deep black-blue vignette on the left 45% of the frame to keep text contrast uncompromised.
- Apply linear-gradient(90deg, #f8b4b4, #a0d8ef) to major display text and primary CTA fills.
- Use 999px border radii strictly for badges, buttons, and pill containers.
- Include the embedded dark circular icon disc within the primary gradient CTA.
AVOID
- Do not use sharp 0px or square corners on interactive elements; everything is pill-shaped.
- Do not let the particle face artwork bleed brightly behind the white headline text.
- Avoid harsh high-contrast drop shadows; use backdrop-filter blur and subtle 1px strokes instead.
- Do not use saturated primary colors like pure blue or red; stick to pastel rose, teal, and slate.
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 中尝试