Synthetic Devrel

The canvas is grounded in a deep abyss (#02050e to #050814) energized by fluid bioluminescent mesh ribbons glowing in saturated electric blue (#0ea5e9) and cyan (#06b6d4). Colour acts as strict semantic hierarchy: pure white (#ffffff) anchors display type and structural clarity, while an electric mint green (#52ee88) commands primary action states, highlight headlines, and confirmation badges. Spacing follows an airy vertical stack centered along the primary axis, giving generous room between pill-shaped containers and headline clusters. Cards employ dark frosted glassmorphism with 20px radii, delicate 1px border strokes (#ffffff14), and internal nested insets (#070b16) framed with 12px radii. A visitor immediately registers the luminous contrast between the ethereal undulating background wave and the crisp, tactile precision of the developer diagram resting over it.

1 design references

Prompt metadata
Shared by	@Devault
Model	GPT Image 2.5
Category	Hero sections & backgrounds
Dataset	stretchcloud · awesome-gpt-image-prompt-2.5

The prompt

Design a dark-mode website section: deep obsidian space ignited by luminous electric-cyan energy waves and high-voltage mint-green developer automation telemetry.

LAYOUT
The page flows vertically down a single centralized axis framed within a 1200px container. The top navigation is fixed or pinned with balanced three-column distribution (logo left, links center, action right). Below, the hero sequence stacks seamlessly: announcement badge, two-line display headline, two-line descriptive body text, dual CTAs, dual inline metrics, and finally an architectural schematic card anchored at the bottom fold.

PALETTE (use these exact hex values)
- #02050e — Deep Space Obsidian: Primary full-viewport background canvas behind glowing energy fields
- #070b16 — Code Inset Surface: Contained editor surface framing syntax and data payloads
- #52ee88 — Neon Mint: Hero headline accent, primary button fill, node connector glow, and verified badges
- #06b6d4 — Electric Cyan: Ambient glow waves, wireframe mesh highlights, and telemetry illumination
- #ffffff — Text Primary: Main headline, active navigation items, and code property strings
- #94a3b8 — Text Secondary: Supporting lead copy, inactive navigation, line numbers, and metric captions

TYPOGRAPHY
Typeface Geist Sans (or Inter, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 20px subheading, 60px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is ultra-modern, technical, and authoritative. A high-clarity neo-grotesque sans (Geist Sans or Inter) set in heavy display weights with compact negative tracking delivers developer-grade precision, while JetBrains Mono reinforces infrastructure authenticity in the code panel. Licensing can be substituted seamlessly with Inter and Geist Mono without altering system fidelity.

GEOMETRY & SPACING
Corner radii — cards 20px, links 9999px, inputs 10px, buttons 10px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1200px container, comfortable density.

DEPTH
Depth is rendered entirely through glowing atmospheric back-lighting and frosted semi-transparency rather than drop shadows. Translucent glass containers (rgba(10, 16, 30, 0.72)) float directly above an organic radiant light wave, delineated by crisp 1px borders (#ffffff14). Inner elements like code blocks are inset using darker opaque tones (#070b16), creating negative visual depth within the floating plane.

IMAGERY
The imagery consists of an ethereal, undulating 3D luminous wave field combining organic volumetric cyan smoke with delicate digital wireframe mesh ridges. It evokes neural flows, fiber optics, or data streams through deep cosmos. Photographic imagery or cartoon illustrations are strictly prohibited; only abstract generative telemetry and crystalline vectors belong.

SIGNATURE DETAIL — the thing that makes this design itself
The distinctive architectural pipeline diagram resting atop luminous cyan-emerald wave topography. It anchors the hero with an inset dark code snippet communicating through glowing bezier lines to a central node that activates verified green status chips on the right. Misusing this means omitting the code context or turning the ambient wave into an overpowering solid graphic.

MUST
- Use solid mint green (#52ee88) sparingly on the single primary CTA and terminal status indicators.
- Maintain strict center alignment for all central hero typography, badge chips, and button pairs.
- Enclose complex code previews inside dark inset cards with 12px radii to ground them visually.
- Pair electric cyan and emerald ambient glows softly behind high-contrast dark UI surfaces.

AVOID
- Do not use sharp 0px corners; all surfaces must feature smooth 10px, 20px, or 9999px curvatures.
- Never use pure white backgrounds or light mode cards; the entire identity depends on deep obsidian.
- Do not saturate entire cards in bright green or cyan; color must only emit as glows and highlights.
- Avoid standard high-opacity solid borders; strokes must remain delicate at 1px rgba(255,255,255,0.08).

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

More prompts from the same visual neighborhood.

Back to prompt gallery

Hero sections & backgroundsDesign reference

Accretion Core

Set against a vast cinematic deep-space panorama, this interface positions left-aligned typographic clarity against a radiant golden accretion vortex on the right. The canvas transitions from pitch void (#060f1e) through layered turquoise dust clouds (#1a7895) to an incandescent stellar core (#ffe89e). Text hierarchy relies on stark contrast: headers command attention with 56px white weights, punctuated by a kinetic peach-to-magenta linear-gradient on 'what matters.'. CTAs mirror this astral heat signature using pill-shaped (radius 999px) sunset gradients, while secondary actions use subtle frosted borders (rgba(255, 255, 255, 0.25)). Supporting metrics anchor the lower quadrant with compact 22px stat lockups paired with hairline line-art iconography. The entire composition balances the unrestrained organic luminance of interstellar nebulae with clean, grid-locked functional product chrome.

Hero sections & backgroundsDesign reference

Adaptive Athlete Bento

The canvas is anchored on an immaculate white base (#ffffff) paired with an ultra-light grey surface layer (#f7f8fa) that carves out crisp modular compartments. Color functions strictly as semantic guidance: a distinctive digital iris (#5e52d6) powers primary actions and key brand phrases, while soft pastel badge fills segregate distinct user personas without visual competition. Primary messaging commands attention through a 56px high-contrast sans-serif paired with an expressive, editorial italic serif contrast line that brings human emotion into software. Components conform to strict curvature hierarchies, featuring 16px radius bento tiles, 10px functional buttons, and 999px pills for floating metadata. Dense statistics sit directly beneath hero copy inside a dedicated low-elevation floating card. A reader first registers the high-contrast display hook before naturally sweeping across the 5-card multi-persona bento grid on the right, punctuated by the lone deep slate tile (#151c28).

Hero sections & backgroundsDesign reference

Aegis Command

The canvas executes a severe dual-world contrast: an ultra-clean clinical white (#FFFFFF) presentation plane hosts bold editorial typography, while a recessed, perspectival dark-mode (#090D16) mission console dominates the right viewport. Hierarchy relies strictly on stark luminosity contrast rather than decorative fills, using vibrant cobalt (#1D68F2) for direct actions and tactical red (#EF4444) strictly for threat telemetry. Display type reaches a confident 56px in bold weights, contrasted against 12px uppercase tracking labels and low-contrast 32px secondary leadings. The interface employs tight structural rounding, from 6px on primary button controls to 16px on the floating console bezel. Metrics and status indicators are grounded by a 3-column baseline card with 1px hairline dividers (#E2E8F0) and miniature system health pings. A spectator first notices the photorealistic earth-orbit visualization tilted inside the console before registering the stark three-word headline.

Hero sections & backgroundsDesign reference

Aerial Stealth Horizon

The canvas is anchored on an ultra-deep black (#03070b) accented by rounded containment cards filled with subtly lifted charcoal-tinted surfaces (#080d14). Accent energy flows strictly through a vivid turquoise-to-mint gradient (approx #17a9e2 to #63e69f) reserved for critical primary CTAs and punchy headline statements like 'Costs less.' Typography is set in a clinical, geometric grotesk like Inter or Geist, prioritizing stark white-to-slate contrast ratios and balanced letter tracking. Cards and pills use generous 16px to 20px radii paired with hairline borders (#16222f) that dissolve into shadows. A user immediately notices the large photographic viewport depicting an autonomous bio-drone against a digital point-cloud terrain before descending into structured, telemetry-style metric tiles.