Alpine Horizon Glass

The interface couples a stark medical-grade layout with an evocative, mist-shrouded mountain landscape in the hero backdrop. A pure white to lavender gradient canvas (#FFFFFF fading down to #F5F7FD) supports frosted glass cards with translucent borders (rgba(255, 255, 255, 0.65)) and soft diffused drop shadows. Electric cobalt blue (#4353FF) serves as the primary visual anchor across call-to-action buttons, key headline accents, and active stepper milestones. Typography relies on a modern humanist geometric sans-serif set with high contrast: dark ink (#101426) for headlines and gentle slate (#5E657D) for metadata and body copy. Metric callouts use 16px rounded stat cards with subtle light borders, while the process stepper integrates directly into the landscape with vertical dashed connectors. A reader's eye immediately locks onto the two-tone headline 'Autonomous billing. Real results.' before drifting right toward the floating frosted chart and stepper.

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 clinical precision floating over misty alpine landscapes and translucent glass surfaces.

LAYOUT
The header sits at the very top on pure white with logo left, navigation centered, and action buttons right. The hero divides into an asymmetrical two-column layout: left column contains the kicker, two-line display headline, explanatory paragraph, CTA button pair, a four-item horizontal grid of stat cards, and security compliance badges. The right column showcases the scenic mountain imagery overlaid with the floating glass chart card connected vertically via dashed lines to a cascading series of process step pills.

PALETTE (use these exact hex values)
- #FFFFFF — Pure Canvas: Background base for the header and top hero canvas
- #F4F7FC — Atmosphere Wash: Pale blue-gray tint on card backgrounds and base hero overlay
- #4353FF — Electric Cobalt: Primary CTAs, accent headline text, active step fill, and sparkline stroke
- #3442E5 — Cobalt Hover: Interactive state for primary action buttons
- #101426 — Midnight Ink: Headlines, logo typography, and high-emphasis metric numbers
- #5E657D — Slate Steel: Subheadlines, card descriptions, navigation links, and badge text
- #8A92A6 — Muted Ash: Compliance badge icons, stat labels, and secondary footers
- #16A34A — Positive Green: Growth percentage badges (+23%) and positive metrics

TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 28px heading, 36px heading-lg, 56px display. Tracking -0.025em for display, 0 for body, 0.05em for uppercase labels. The type choice is clean, surgical, and authoritative—a contemporary sans-serif like Inter or Plus Jakarta Sans. Its neutral geometry conveys engineering accuracy and clinical reliability, while the tight negative letter-spacing on display sizes ensures headlines feel punchy and impactful. The font can be seamlessly substituted with SF Pro Display or modern geometric sans typefaces without losing character.

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

DEPTH
Depth is created using optical translucency rather than dense shadows. Cards float over the misty mountain photo using a combination of backdrop-filter blur (16px to 20px), a subtle white top-edge border shine (1px solid rgba(255, 255, 255, 0.8)), and a soft atmospheric shadow (0 16px 36px rgba(16, 20, 38, 0.06)). Elements closer to the user, like the active 'Payment posted' badge, feature richer gradients and sharper boundaries.

IMAGERY
A photorealistic panoramic alpine vista featuring snow-dusted, craggy mountain ridges, pine tree silhouettes, and atmospheric morning fog tinted in violet and pale blue. Digital matrix/code rain patterns faintly blend into the upper mountain mist to signal automation and software infrastructure. Imagery of clinical desks, sterile hospital corridors, or generic handshakes is strictly off-brand.

SIGNATURE DETAIL — the thing that makes this design itself
The harmonious integration of clinical fintech glass cards and a stepper path directly floating above an atmospheric alpine landscape. The dashed guide line linking the glass chart smoothly down to the gradient-filled 'Payment posted' milestone visually grounds complex automated billing into an effortless journey.

MUST
- Use semi-transparent white frosted glass (backdrop-blur: 16px) when placing cards over background imagery.
- Pair dark primary headlines with an electric cobalt (#4353FF) second sentence for branded emphasis.
- Keep card outlines subtle with crisp 1px luminous white borders against scenic imagery.
- Include dedicated micro-badges (+23%) with light green backgrounds to reinforce positive financial outcomes.

AVOID
- Never let the background scenic image extend with high opacity behind headline text.
- Do not use dark or opaque solid backgrounds on floating step pills or the chart card.
- Avoid warm colors like yellow, orange, or crimson; stick strictly to cobalt, cool whites, and slate.
- Do not use heavy drop shadows; depth must come from gentle diffused light (blur 24px, opacity 0.08).

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.