Resonant Ledger

The layout pairs an expansive, clinical off-white backdrop (#FFFFFF transitioning to a muted #F5F6F4 lower band) with dense obsidian-teal control surfaces (#08161D). Deep pine emerald (#0F735B) serves as the primary actionable brand anchor, while a high-luminescence mint (#1FB88B) illuminates critical narrative hooks and system confirmations. Typographic hierarchy relies on a modern geometric sans-serif displayed with tight tracking and authoritative, weighty headlines reaching 56px. Architectural geometry alternates between crisp 10px rounded CTA corners, an enveloping 20px card radius, and fully rounded 999px status badges. The focal anchor of the page is the right-hand dark voice agent execution card nested inside an organic generative audio dust plume.

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: dark obsidian instrumentation floating over generative acoustic particle clouds on an immaculate porcelain canvas.

LAYOUT
The page opens with a floating, inset dark navigation pill spanning the top container. Below, a two-column hero splits evenly at 1280px max width: the left column stacks the star kicker, 3-line dual-tone display title, explainer paragraph, dual CTA buttons, and inline security badges. The right column showcases the centered dark agent ledger card superimposed over an ethereal acoustic dust vortex, anchored by a floating webhook pill.

PALETTE (use these exact hex values)
- #08161D — Obsidian Surface: Background for floating navigation pill and the central agent transaction card
- #FFFFFF — Porcelain Canvas: Primary light canvas background for the hero section
- #F5F6F4 — Mist Base: Slightly warm grey background for footer transition and logo ribbon
- #0F735B — Pine Emerald: Primary button fill, brand anchor, and high-emphasis interface targets
- #1FB88B — Vibrant Mint: Headline emphasis color, status checkmarks, sparkle emblems, and active badges
- #E07A2C — Warning Amber: Pulsing webhook indicator dot on the dark auxiliary pill
- #0B181C — Charcoal Slate: Primary hero heading and primary dark label typography
- #5A6B74 — Muted Slate: Body copy, secondary navigation links, and credential labels
- #172A32 — Obsidian Stroke: Dividers, timeline step indicators, and borders inside obsidian surfaces

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 32px heading, 56px display. Tracking -0.03em at display, 0.05em at caps. Plus Jakarta Sans delivers a razor-sharp, modern infrastructure tone that balances enterprise fintech authority with contemporary AI tool aesthetics. Its clean geometric roundness prevents technical jargon from feeling intimidating. Inter or DM Sans can seamlessly substitute if variable webfont licensing is constrained.

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

DEPTH
Depth is created strictly via tonal contrast rather than blur shadows. Dark obsidian cards (#08161D) project off the stark white background naturally through extreme luminance disparity, supported by subtle edge borders (#172A32) and soft atmospheric glow emitted from the particle cloud underneath.

IMAGERY
The visual hero element is a generative point-cloud particle dispersion simulating sound waves interacting with physical fluid dynamics. Rendered in duotone teals, deep slate blues, and cyan specks, it forms a directional bloom radiating outward behind the dark product card. Photographic imagery or literal representations of human faces must never be introduced.

SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone obsidian execution ledger suspended directly inside a dynamic acoustic stipple vortex, creating an unmistakable juxtaposition between cold computational order and organic generative sound.

MUST
- Retain the sharp color contrast between the deep obsidian UI elements and the airy porcelain canvas.
- Split the display headline color to emphasize the category shift ('voice economy') in emerald.
- Keep timeline node circles strictly centered on the vertical connecting track in the ledger card.
- Ensure the particle graphic remains soft and desaturated so card text maintains uncompromised readability.

AVOID
- Do not convert the entire hero canvas to dark mode; the contrast relies on a light foundation.
- Never substitute the generative acoustic dust visual with generic 3D financial charts or coins.
- Do not apply drop shadows to the primary CTA buttons; rely on clean, flat fill color.
- Avoid using bright saturated greens for body text; keep emerald (#0F735B) reserved for headers and accents.

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.