Design a dark-mode website section: deep void canvas anchored by electric cobalt accents and an ethereal stardust vortex framing floating contextual nodes.
LAYOUT
The hero adopts an asymmetrical two-column desktop arrangement. The left column stacks release pill, dominant three-line display headline, explanatory paragraph, dual CTA buttons, and performance KPI metrics. The right column showcases a dynamic cosmic orbital composition featuring four satellite feature cards linked via dashed trails to a centered mobile UI mockup.
PALETTE (use these exact hex values)
- #020611 — Cosmic Void: Primary background canvas creating infinite depth and immersion across the viewport
- #090F1E — Card Surface: Semi-translucent container background for surrounding industry cards and pill wrappers
- #1D64F2 — Electric Cobalt: High-emphasis CTAs, active status indicators, and selected button fills
- linear-gradient(135deg, #60A5FA 0%, #3B82F6 50%, #818CF8 100%) — Iridescent Glow: Key display headline emphasis text and cosmic shimmer rings
- #FFFFFF — Pure White: Primary headlines, device amounts, card titles, and high-priority labels
- #94A3B8 — Muted Slate: Body copy, secondary labels, metadata tags, and descriptive captions
- #1E293B — Translucent Border: Subtle 1px boundaries on buttons, preview pills, and contextual cards
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Geist Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 20px subheading, 32px heading, 56px display. Tracking -0.02em at display, 0 at body. The type choice is modern, neutral, and engineered—projecting extreme reliability and high-speed execution. A crisp geometric sans-serif (such as Inter or SF Pro) keeps high-density information readable at 12px while delivering punchy authoritative force at 56px. Substitution with Geist Sans or Plus Jakarta Sans preserves this technical yet premium posture.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered entirely through layered optical luminosity rather than traditional drop shadows. Translucent glass-like surfaces hover above a swirling cosmic particle cloud, with faint 1px borders delineating card silhouettes against the deep dark canvas. Glowing radial gradients around the phone provide localized illumination, creating atmospheric depth.
IMAGERY
Photography is restricted to cinematic, moody lifestyle and professional vignettes (airports, laboratories, coding workspaces) embedded inside the rounded satellite cards. Each photo uses desaturated cool tones matching the blue-slate palette, avoiding harsh studio white-box product renders or overly bright stock photography.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the golden-blue stardust particle accretion disk that swirls behind a centered device mockup, connected to satellite application cards via delicate dashed orbital rays. This transforms a standard fintech screenshot into an energetic technological ecosystem. Misusing it involves making the spiral too dense or bright, which would drown out the interface text and destroy readability.
MUST
- Anchor complex feature diagrams with a central realistic hardware device mockup.
- Use pill shapes (999px radius) consistently for all interactive buttons and tag badges.
- Apply the stardust particle spiral strictly behind device mockups to denote kinetic computing power.
- Reserve the blue-indigo gradient strictly for key headline phrase highlights to maximize punch.
AVOID
- Do not introduce square or sharp-cornered buttons; maintain rounded pill geometry.
- Never use pure white backgrounds or light grey canvases; it destroys the cosmic aesthetic.
- Avoid solid saturated backgrounds for cards; they must feel lightweight and translucent.
- Do not clutter the headline area with decorative illustrations or extraneous icons.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub