Celestial Scale

The canvas is anchored in pitch obsidian (#030509) on the left that seamlessly blends into an ultra-high-definition diagonal celestial vortex of electric cyan (#38bdf8) and incandescent orange plasma (#ff6b18). Visual hierarchy is fiercely driven by contrast: glowing white (#ffffff) typography commands the darkest quadrant of the frame, preventing any legibility clash with the cosmic imagery. A signature orange full stop (#ff6b18) grounds the headline, tying the textual narrative directly to the stellar core on the right. Controls and tags favor fully rounded pill silhouettes (border-radius 999px) with ultra-subtle border strokes at 1px rgba(255, 255, 255, 0.15). Spacing is expansive and airy, using generous 80px+ vertical increments that let the cosmic scenery breathe. A viewer immediately notices the breathtaking scale of the accretion vortex before settling into the clean, surgical crispness of the left-aligned hero copy.

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 abstract background artwork: deep void meets a blazing accretion disk anchored by stark white grotesque typography.

LAYOUT
The layout uses a split compositional structure: the left 45% is an uncluttered typographic column resting over deep spatial void, while the right 55% erupts with cosmic orbital energy. A fixed-height top navbar spans the width with comfortable inset margins, leading to an announcement chip, hero headline, supporting paragraph, and dual CTAs stacked vertically. The page grounds itself along the lower-left baseline with a horizontal triad of wireframe telemetry badges.

PALETTE (use these exact hex values)
- #030509 — Obsidian Deep: Deepest canvas background behind typography on the left hemisphere
- #ff6b18 — Accretion Core: Punctuation accent dot, telemetry icon glows, and hot stellar focal points
- #38bdf8 — Nebula Azure: Atmospheric dust glow, planetary horizon rim, and cosmic depth tint
- #ffffff — Photon White: Display headline, primary button fills, and high-visibility header links
- #94a3b8 — Stardust Gray: Body copy, secondary navigation links, and feature item labels

TYPOGRAPHY
Typeface Geist Sans (or Inter, SF Pro Display, Helvetica Now Text), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 56px heading, 72px display. Tracking -0.03em at display, 0.04em at badge caps. The typography communicates hyper-advanced engineering, precision, and cosmic authority through an immaculate modern neo-grotesque. By setting display type with tight tracking (-0.035em) and crisp line breaks, it balances emotional awe with computational rigor. Geist Sans, Inter, or SF Pro Display are ideal freely available substitutions that preserve this technical yet approachable tone.

GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, airy density.

DEPTH
Depth is created purely through photographic celestial layers and light emission rather than CSS box shadows. The text floats cleanly above deep black empty space, while the glowing plasma disk and illuminated planetary atmosphere provide background depth planes. Glowing elements like icons and dots use subtle 4px to 12px color blooms with no hard dark shadows.

IMAGERY
The imagery language is photorealistic deep-space astrophotography featuring hyper-detailed accretion disks, gravitational lensing, and atmospheric planetary rims. Textures include fine starfields, dust motes, and radiant thermodynamic glows transitioning from electric blue to magma orange. Abstract vector shapes, human photography, or whimsical 3D renders are strictly off-brand.

SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric 'Void-to-Vortex' composition: placing high-contrast, razor-sharp white grotesque typography into a calm pitch-black vacuum on the left, perfectly counterbalanced by an intensely violent orange-and-cyan accretion swirl on the right. Misusing this pattern by centering the text or flooding the left canvas with bright nebular gas immediately destroys readability and dramatic tension.

MUST
- Position all heavy visual elements (planets, accretion disks) on the right to preserve 50% void space on the left.
- Use pure white (#ffffff) exclusively on solid CTA buttons and display typography over dark backing.
- Anchor headline punctuation with a contrasting electric orange (#ff6b18) dot to echo cosmic fire.
- Maintain a fully rounded 999px pill geometry across all navigation links, buttons, and status tags.

AVOID
- Do not place high-density text or multi-column copy over the bright swirl of the nebula.
- Do not use rectangular buttons with sharp 0px or small 4px corner radii.
- Do not tint body copy pure white; keep it restrained to slate gray (#94a3b8) to avoid optical fatigue.
- Do not introduce secondary saturated accent hues like green, purple, or red.

OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3424:2416. 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.