Design a dark-mode abstract background artwork: cinematic cosmic twilight meets ethereal glassy hud telemetry for ambitious self-directed learning.
LAYOUT
The hero uses an asymmetric two-column structure within a 1280px container. The left 50% is reserved for textual branding, primary CTA buttons, and a bottom-anchored frosted feature dock. The right 50% lets the cinematic narrative breathe, housing the silhouetted figure, radiant accretion ring, and lightweight translucent HUD telemetry floating in the upper and lower margins.
PALETTE (use these exact hex values)
- #090611 — Void Black: Deepest canvas background behind celestial illustration and edge vignettes
- linear-gradient(90deg, #FF7B39 0%, #E83F68 100%) — Solar Flare Gradient: Primary call to action background creating high visual priority
- #FFA940 — Starlight Gold: Logo glyph, constellation node highlights, and eyebrow category accents
- #FFFFFF — Starlight White: Main headline, active nav items, and primary button labels
- #C9B8C5 — Nebula Lavender: Lead paragraph copy, inactive navigation links, and telemetry labels
- #E08F52 — Solar Amber Muted: Futuristic uppercase tracker text above the main hero heading
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Syne, Montserrat), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 64px display. Tracking -0.03em at display, 0.18em at eyebrow. The typography relies on Plus Jakarta Sans, projecting modern, forward-thinking optimism without drifting into sterile techno-industrial territory. The generous lowercase curves and sharp geometric terminals provide warmth in body copy and impact in the 64px display headline. Inter Display or Syne serve as seamless open-source fallbacks.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 12px, buttons 999px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, airy density.
DEPTH
Elevation is achieved through optical luminescence and glass depth rather than conventional shadows. Translucent UI panels use backdrop-filter blur with thin starlight borders to float above the cosmic photography. The primary button radiates an ambient warm light (rgba(255, 123, 57, 0.35)) that mimics the glowing atmosphere behind it.
IMAGERY
The imagery language uses high-fidelity sci-fi romanticism featuring a silhouetted explorer seated on an obsidian crag, gazing into an incandescent wormhole or solar accretion vortex. The palette balances cold celestial black/navy with molten orange embers and stardust particles. Flat vector illustrations, corporate 3D clay characters, or stark realism would entirely break the immersive, aspirational mood.
SIGNATURE DETAIL — the thing that makes this design itself
The singular identifying visual move is the harmony between the sweeping, molten-orange celestial vortex in the background artwork and the ultra-subtle sci-fi telemetry HUD wireframes floating directly over the rocky terrain. Recreate it by pairing high-contrast cosmic illustration with faint 1px glass panels (rgba(255, 123, 57, 0.3)) and ember glow nodes, avoiding the common mistake of making HUD cards opaque or overly dense.
MUST
- Anchor text on dark space regions to maintain minimum 4.5:1 contrast against the galactic background.
- Use backdrop-filter: blur(16px) with ultra-thin 1px starlight borders for all floating interface cards.
- Reserve the vivid warm sunset gradient strictly for primary actionable elements like 'Start Learning'.
- Pair heavy display typography with wide-tracked micro-uppercase eyebrows (0.18em tracking).
AVOID
- Do not use opaque grey or white backgrounds for cards, destroying the cosmic atmosphere.
- Do not introduce cool neon colors like cyan, lime green, or electric blue that clash with solar tones.
- Do not apply heavy drop shadows; depth must be achieved purely through luminous glow and transparency.
- Do not crowd the right hemisphere of the composition where the radiant cosmic vortex requires breathing room.
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. Try in DraPub