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.

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 defense tech paired with luminous cyan gradients and crisp bio-mechanical telemetry.

LAYOUT
The page opens with a restrained utility header leading into a split hero zone: bold value proposition and dual CTAs on the left, counterbalanced by a large 16:9 rounded surveillance viewport on the right. Directly beneath, an expansive 5-column metric dashboard visualizes key operational specs. A contiguous horizontal trust strip anchors the base, verifying defense compliance and real-world flight statistics.

PALETTE (use these exact hex values)
- #03070b — Obsidian Deep Base: Root page background canvas providing zero-depth contrast.
- #080d14 — Charcoal Card Surface: Background fill for stat panels and the lower trust footer container.
- #16222f — Subtle Card Stroke: Hairline 1px borders delineating card containers and segmented metric cells.
- #17a9e2 — Cyan Primary: Start stop of accent gradient and isolated metric indicator highlights.
- #63e69f — Mint Accent: End stop of accent gradient, live feed badges, and text emphasis.
- linear-gradient(90deg, #17a9e2 0%, #63e69f 100%) — Hero CTA Gradient: Primary action button fill and emphasis phrase in main headline.
- #ffffff — Optic White: Main headline text, bold metrics, and bright logo typography.
- #8c9ba8 — Slate Secondary: Subtitles, secondary labels, navigation links, and body copy.
- #4f5e6d — Muted Tertiary: Disclaimers, supporting metric footers, and passive UI icons.

TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 32px heading, 54px display. Tracking -0.03em display, 0.05em caps caption. Inter or Geist delivers an austere, industrial precision that evokes mission-critical defense interfaces. Negative tracking on display headlines gives the typography high density, while expanded tracking on captions simulates military telemetry HUDs. Any modern geometric grotesk with clean numerics functions seamlessly.

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

DEPTH
Depth is created entirely through luminous hierarchy and hairline bounding boxes rather than fuzzy drop shadows. The background stays in complete darkness (#03070b), while cards rise forward via deep navy-charcoal surfaces (#080d14) edged with faint 1px borders (#16222f). Foreground focal points gain presence purely through glowing gradient color values.

IMAGERY
Photorealistic aerospace hardware integrated with futuristic holographic topography and wireframe CAD vectors. Visuals must portray bio-inspired autonomous stealth technology in twilight or nighttime conditions. Cheerful lifestyle photography, generic cloud software stock, or playful flat vector art are completely off-brand.

SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone cyan-to-mint gradient headline accent paired with a telemetry live-feed badge directly inside the primary drone viewport. It creates an instant visual bridge between tactical defense hardware and Silicon Valley software polish. Misusing it across all titles dilutes the targeted emphasis that makes the value proposition punchy.

MUST
- Use pure obsidian (#03070b) as the baseline canvas so dark cards feel integrated.
- Reserve the turquoise-to-mint gradient strictly for high-priority CTA buttons and key headline highlights.
- Enclose distinct metric groups in 16px rounded hairline-bordered cards (#16222f).
- Pair quantitative figures (10x, 8+ Hours) with minimal, high-contrast monospace or geometric type.

AVOID
- Do not introduce bright solid background panels; keep all surfaces dark and muted.
- Avoid warm accent colors like yellow, purple, or red which clash with aerospace cyan.
- Never drop drop-shadow blurs on buttons; rely on clean edge contrast and gradient luminosity.
- Do not use heavily rounded full-pill shapes for data cards; preserve the 16px rectangle radius.

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

Aether Horizon

The canvas is anchored in a vast, atmospheric deep-space black (#06070c) overlaid with a colossal swirling vortex of cosmic ember dust. Warm radiant amber (#e65c19) functions strictly as an interactive beacon and energetic focal point, while text relies on a muted parchment tone (#ece5dd) to ensure effortless legibility against nebular noise. Display typography is set in an airy, human-centered geometric sans at 58px with loose letter spacing and generous leading. Pill-shaped geometries (border-radius 999px) govern all interactive buttons, contrasting sharply with the organic turbulence of the background rendering. A left-aligned content column creates expansive asymmetrical breathing room, balancing the silhouetted figure on the right. Inline feature badges sit low on the page at 12px font size with subtle orange iconography, grounding the user interface into the cinematic sci-fi tableau.