Forward Particle

The canvas is a sterile, pristine white (#ffffff) engineered to showcase precision infrastructure tooling without visual clutter. Hierarchy is sharply enforced through typographic weight and deliberate color bifurcation: the headline splits its statement between midnight black (#0b101b) and electric cobalt (#1d58d8). The interface relies on generous macro-spacing alongside hyper-compact micro-components such as 12px floating status pills and terminal snippets. Corner radii are systematically varied, using 8px on interactive buttons, 10px on floating telemetry cards, and 12px on the dark bash window. The eye is instantly drawn to the complex halftone stipple artwork on the right, which bridges raw data networking with organic ink-bleed graphics.

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 light-mode website section: crisp developer ergonomics grounded in pure white space and illuminated by organic stippled blue telemetry clouds.

LAYOUT
The hero uses an asymmetric two-column desktop grid with a 50/50 division inside a 1280px max-width container. The left column stacks metadata eyebrow, bifurcated display headline, body paragraph, button/link actions, and a three-column micro-feature row. The right column dedicates its full bounds to the stippled generative graphic with floating telemetry nodes distributed in orbit around a central hub.

PALETTE (use these exact hex values)
- #ffffff — Canvas White: Primary page background ensuring high contrast for dark text and vibrant cyan-blue illustrations.
- #1d58d8 — Cobalt Accent: Primary interactive color, eyebrow category text, and second phrase of the main display heading.
- #0b101b — Midnight Ink: Primary typography, main heading line, and background for the central node and bash terminal.
- #596780 — Muted Slate: Secondary copy, supporting descriptions, domain slug, and inactive navigational links.
- #070c18 — Terminal Surface: Solid background for floating code snippets and central network hub badge.
- #ffffff — Card Surface: Floating telemetry agent badges layered with soft diffuse drop shadows.
- #10b981 — Success Mint: Pill indicator dot showing live agent deployment status.
- #2563eb — Halftone Cobalt: Stipple grain texture forming the organic particulate network visual on the canvas.

TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 12px subheading, 13px body-sm, 15px body, 18px body-lg, 56px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is uncompromisingly technical, restrained, and modern. Using a tight neo-grotesque sans with negative tracking delivers authority, while monospaced accents communicate speed and developer ergonomics without feeling raw or unfinished.

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

DEPTH
Elevation is reserved purely for the right-hand graphic stage to create a faux-3D interactive depth plane. Floating agent chips and the dark bash terminal cast soft, high-spread shadows (0 8px 30px rgba(15,23,42,0.08)) that lift them cleanly off the granular stipple artwork underneath.

IMAGERY
The visual hero features a generative cobalt-blue halftone stippled wave resembling particulate cloud physics or biological ink dispersion. It integrates hairline orbit rings and vector connection nodes converging on a rounded central dark glass badge with frosted glass highlights.

SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone display heading (#0b101b transitioning into #1d58d8) directly juxtaposed against a generative blue stipple particle cloud carrying floating telemetry widgets. Misusing it involves tinting the particle cloud into multi-color rainbows or dropping the monospaced micro-status chips.

MUST
- Split the headline into dark slate (#0b101b) and vibrant cobalt (#1d58d8) to introduce immediate visual pacing.
- Use JetBrains Mono or similar geometric monospaced typefaces exclusively for technical metadata and code execution chips.
- Keep icon containers in the feature trio tinted in ultra-soft 10% opacity pastel washes.
- Enclose all floating telemetry overlays in 10px rounded cards with airy, low-opacity drop shadows.

AVOID
- Never tint the canvas off-white or cream; the system relies strictly on crisp #ffffff cleanliness.
- Do not use dark gradients across the primary button; keep it a flat, vibrant cobalt fill.
- Avoid rendering full solid shapes for background graphics; the particle cloud must retain stippled halftone grain.
- Do not allow terminal code fonts to bleed into general navigational or paragraph text.

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.