Biomorphic Clarity

This interface constructs an ethereal yet clinical enterprise AI canvas using ultra-light grey (#F8FAFC / #F1F4F9) punctuated by brilliant electric blues (#1D61FF) and deep slate typography (#0F172A). Color is used with surgical discipline: brand blue represents action and focus, while subtle cyan-to-indigo gradients light up interactive nodes and illustration accents. The hero typography dominates with an extra-bold sans-serif title at approximately 56px with tight -0.03em tracking, juxtaposed against airy 15px muted body text. Frosted glass containers feature 16px to 24px border radii, hairline translucent borders (rgba(255,255,255,0.8)), and multi-layered diffuse drop shadows. What catches the eye immediately is the central hyper-rendered glass sphere encapsulating turbulent water, seated upon floating tiered pedestals surrounded by diagrammatic workflow tags.

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: clinical precision softened into glass spheres, floating layers, and calm ultraviolet light.

LAYOUT
The header sits at the very top as a transparent fixed bar with a left-aligned logo, center text-only navigation links, and right-aligned dual CTAs. The hero splits into two columns: a text stack on the left (eyebrow, massive title, subcopy, CTA pair, and stat card) and a dynamic 3D diagram cluster on the right. Anchoring the bottom is a 4-column horizontal pill container articulating enterprise-grade compliance credentials.

PALETTE (use these exact hex values)
- #F4F6FB — Canvas Ice: Overall viewport background tint with subtle particulate wave textures
- #FFFFFF — Pure White: Primary surface for floating cards, pill containers, and translucent glass overlays
- #1D61FF — Electric Cobalt: High-priority CTA buttons, highlighted title words, node icons, and active workflow badges
- #0F172A — Deep Midnight: Primary display headings, logo wordmark, and strong labels
- #5B687E — Slate Steel: Body copy, navigation items, secondary card subtitles, and trust indicators
- #94A3B8 — Muted Horizon: Fine print, metadata captions, inactive chevrons, and tick markers
- #10B981 — Vibrant Mint: Completion badge backgrounds, success checkmarks, and execute node accents
- #E2E8F0 — Glass Border: Hairline outlines on cards, badges, and the bottom horizontal feature bar

TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Gelion), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 56px display. Tracking -0.03em for headlines, -0.01em for UI, 0.08em for uppercase badges. The typography speaks with authoritative technical precision while remaining crisp and approachable. Inter (or Plus Jakarta Sans) provides geometric neutrality that keeps the complex 3D visuals grounded. Tight letter-spacing in the display size (-0.035em) turns long tech headlines into cohesive graphic shapes.

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

DEPTH
Depth is rendered through hyper-realistic optical glass physics and subtle atmospheric scattering rather than heavy dark drop shadows. Cards float using multi-stop ambient shadows (e.g. 0 16px 36px -10px rgba(15, 23, 42, 0.06)) and translucent backgrounds with backdrop-filter blur. Glowing colored light blooms (blue, mint) cast gentle rim reflections onto neighboring surfaces.

IMAGERY
Visual assets center on high-gloss 3D glass, refractive water droplets, and luminous floating mechanical stages. Graphical elements merge clinical lab equipment aesthetics with ethereal software abstractions. Unrendered flat photography, hand-drawn doodles, or harsh dark-mode widgets would completely destroy this aesthetic.

SIGNATURE DETAIL — the thing that makes this design itself
The refractive floating liquid-glass orb resting atop tiered white isometric plinths, surrounded by interactive circuit-connected UI tags. Replicate this with high-specular glass materials, internal water wave dynamics, and 1px dotted connector lines leading to floating frosted cards. Misusing it means flattening the sphere into a 2D circle or using opaque plastic textures instead of refractive glass.

MUST
- Use pristine bright white glass cards with soft drop shadows over light-grey backgrounds.
- Restrict pure vibrant blue (#1D61FF) strictly to the primary CTA and key accent phrases.
- Keep typography tight: set -0.035em tracking on display headings above 48px.
- Utilize fine 1px outlines in rgba(226, 232, 240, 0.8) to give clear definition to floating glass panes.

AVOID
- Never introduce heavy black drop shadows; keep elevation shadows faint, diffuse, and tinted cool-indigo.
- Do not use saturated yellow, orange, or harsh neon tones outside the precise blue/teal palette.
- Avoid sharp rectangular corners anywhere on the page; all interactive elements must have smooth radii.
- Do not clutter the headline zone with multiple paragraphs; limit subtext to exactly two lines.

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.