Compute Velocity

The interface operates on a deep void canvas (#040711) overlaid with dual-tinted atmospheric particle dust shifting from amber-copper on the left to electric cyan on the right. Visual hierarchy is strictly anchored by typography in crisp white (#FFFFFF) alongside high-contrast primary buttons clad in vibrant cobalt blue (#2b66f6). Structural components use dark glassmorphic containers (#0a1322) edged with hairline borders (#192b45 at 1px) and rounded to 16px radius. Type is disciplined and technical, pairing human-readable marketing copy with dense engineering metrics and status chips. The hero viewport commands attention with an intricate isometric 3D data-center CFD simulation radiating glowing streamline vectors in cyan and magenta. A five-unit telemetry metric bar anchors the lower half, seamlessly transitioning into an emergent light-themed enterprise section below.

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: mission-critical industrial telemetry cloaked in obsidian depths and illuminated by bioluminescent computational fluid dynamics.

LAYOUT
The hero uses an asymmetric two-column composition within a 1360px max container. The left column holds the brand eyebrow badge, display headline, description, and primary CTA group. The right column is dedicated to a high-impact interactive digital twin viewport. Below this hero split sits a 5-unit grid of KPI telemetry cards and connector modules, preceding an inverted light-themed section (#f8fafc) anchored at the bottom edge.

PALETTE (use these exact hex values)
- #040711 — Void Background: Deepest canvas background behind hero typography and particle simulation backdrops.
- #0b1424 — Telemetry Card Dark: Background fill for lower KPI metric cards, viewport wrapper, and connector panels.
- #13213a — Subtle Surface Hover: Elevated control buttons, dropdown tags, and interactive card headers inside the simulation pane.
- #192b45 — Subtle Navy Border: 1px structural outline separating cards, simulation HUD frames, and connector grid tiles.
- #2b66f6 — Cobalt Blue: Primary CTA fill, active link accents, and primary telemetry typography emphasis.
- #38bdf8 — Fluorescent Cyan: Airflow stream vectors, 10-100x multiplier highlight, and high-velocity simulation paths.
- linear-gradient(180deg, #f43f5e 0%, #fb923c 50%, #38bdf8 100%) — Thermal Gradient: Data legend heatmaps, sparkline highlights, and simulation temperature bars.
- #ffffff — Text Crisp White: Display headlines, primary brand logo, and prominent numeric metric figures.
- #94a3b8 — Text Slate: Body paragraphs, card descriptions, navigation links, and technical UI metadata.

TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 28px heading, 52px display. Tracking -0.03em at display, 0 at caption. The type voice is calculated, authoritative, and deeply technical without sacrificing enterprise consumer polish. Inter provides neutral, highly legible geometric numerals and compact headings that feel native to engineering cockpits. For production environments, Inter or Plus Jakarta Sans offers robust open-source coverage with immaculate tabular numerical support.

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

DEPTH
Depth is created entirely through optical glow, background particle halos, and translucent layered surfaces rather than drop shadows. Surface layers stack from a deep near-black void to subtly bordered #0b1424 cards, capped by glowing neon vectors inside the 3D viewport. Floating HUD elements use hairline borders (#192b45) to maintain separation from complex graphical backgrounds.

IMAGERY
Features dark-mode engineering imagery: an isometric, high-density cutaway of an industrial server facility or mechanical plant. Fluid computational streamlines in luminescent cyan and magenta indicate airflow, temperature, and pressure gradients. Renderings must feel mathematically computed and photorealistic to CAD/physics standards, avoiding whimsical 2D illustrations or non-technical stock photography.

SIGNATURE DETAIL — the thing that makes this design itself
The dual-stream simulation aesthetic: an isometric CAD data-center cutaway with glowing CFD velocity streamlines, framed within a sleek dark HUD telemetry card. It bridges heavy computational engineering with bleeding-edge consumer UI polish. Losing this visualization reduces the system to a generic B2B landing page.

MUST
- Use 1px hairline borders in #192b45 around all floating cards and simulation panels.
- Render primary headings in pure white (#ffffff) with tight negative letter-spacing (-0.03em).
- Keep card corners rounded consistently at exactly 16px radius for dark telemetry tiles.
- Highlight real-time data status using a vibrant green dot indicator paired with 'Live' pill text.

AVOID
- Do not introduce pure black (#000000); use deep blue-tinted void (#040711) for canvas depth.
- Do not make buttons pill-shaped; keep CTAs tightly shaped at 10px rounded rectangles.
- Never omit hairline borders on dark cards, or UI will melt into the background particle field.
- Do not use generic flat SaaS illustrations; stick to isometric 3D CAD/CFD scientific models.

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.