Design a dark-mode website section: translucent frosted application frames suspended over an undulating neon-lit alien topography and crystalline prism light.
LAYOUT
The page follows a classic asymmetrical SaaS hero: fixed glass header spanning the top edge, followed by a two-column hero layout. The left column stacks badge, 2-line display headline, explanatory copy, CTA row, and feature points; the right column hosts an isometric cluster of glass automation cards floating in deep 3D space.
PALETTE (use these exact hex values)
- #040714 — Void Canvas: Deepest canvas background framing the hero visual and anchoring overall contrast
- #0f172a — Frosted Glass Plate: Semi-transparent backdrop fill for floating workflow cards and top navigation bar
- #38bdf8 — Glass Border Highlight: Translucent cyan and white edge lighting giving dimension to glass panels
- linear-gradient(135deg, #a855f7 0%, #6366f1 100%) — Electric Purple Primary: Primary call-to-action buttons and prominent terminal send triggers
- #38bdf8 — Cyan Bioluminescence: Topographic peak lighting, node connectors, and workflow trigger badges
- #22c55e — Success Mint: Live system status dots, run history success badges, and check icons
- #ffffff — Text Primary: Display headlines, prominent card headers, and button label text
- #94a3b8 — Text Subdued: Secondary descriptive copy, code editor line numbers, and timestamps
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 56px display. Tracking -0.03em at display, 0 at body. The typography speaks with authoritative, minimalist developer-first precision. Rendered in clean neo-grotesque sans (Inter match), it balances dense tabular UI data in nodes and tables with expansive, cinematic headline weights that establish instant trust.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 12px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through 3D perspective rotation, atmospheric glow layers behind glass panels, and dual-layer border reflections (bright top/left edge, vanishing bottom/right). Overlapping floating cards cast soft translucent colored blurs onto the textured terrain beneath.
IMAGERY
The imagery fuses photorealistic bioluminescent alien terrain (glowing cyan sand dunes or mountain ranges) with floating geometric glass prisms and translucent crystal spheres. Imagery must always feel mysterious, deep-space, and technologically immaculate, never cluttered or cartoony.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the perspective-tilted floating glass IDE slab hovering directly above an illuminated, neon-crested topographical alien landscape. When replicated, always include the translucent edge highlights and the subtle background glow bleeding through the code and node panels.
MUST
- Maintain high backdrop-blur values (minimum 20px) on all translucent card plates.
- Use 1px borders with varying top-to-bottom white alpha gradients to simulate light catching glass edges.
- Limit electric purple and cyan gradients to primary actions, connection nodes, and terrain crests.
- Set hero typography with tight tracking (-0.03em) to convey modern engineering precision.
AVOID
- Never use solid, opaque grey card fills; cards must expose the landscape beneath them.
- Do not introduce warm orange, yellow, or earthy tones into this cool cosmic palette.
- Avoid flat 0-degree angles for the product screenshot when the entire theme is isometric floating glass.
- Never apply thick, high-contrast borders larger than 1px on glassmorphism panels.
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 
