Clinical Clarity

The design establishes a high-trust digital health aesthetic built upon an ultra-pure white #FFFFFF ground framed by subtle frosted cloud-blue sections #F7F9FD. Vibrant cobalt blue #2F6BFF serves strictly as the primary focal driver for CTAs, active numbers, and hero emphasis phrases, while crisp dark slate #111827 delivers surgical typographic authority. Clean rounded corners (16px to 24px on primary modules) and soft ambient drop shadows create floating layered telemetry cards that intersect real-life clinical photography. Spacing is expansive and airy, deploying 80px to 110px section rhythms that prevent cognitive overload for clinical users. A reader first notices the crisp cut-out cardiologist framed by floating metric widgets displaying cardiac metrics and calendar bookings.

1 design references

Prompt metadata
Shared by	@Devault
Model	GPT Image 2.5
Category	Web design
Dataset	stretchcloud · awesome-gpt-image-prompt-2.5

The prompt

Design a light-mode web interface screen: luminous clinical white layered with high-trust cobalt and softly floating telemetry cards.

LAYOUT
The layout utilizes a structured 12-column grid anchored by a prominent split hero section: copy on the left and a framed doctor cut-out on the right. Below the fold, a unified 4-column module groups primary services within a soft #F7F9FD rounded panel. Alternate-side 2-column feature blocks follow, ending with a horizontal 4-step linear progress timeline.

PALETTE (use these exact hex values)
- #FFFFFF — Pure White: Primary page background and floating card canvas surface.
- #F7F9FD — Subtle Ice Blue: Section backing panels and large nested container fills.
- #2F6BFF — Active Cobalt: Primary interactive buttons, key brand text highlights, and active step nodes.
- #111827 — Obsidian Slate: Main display headings, strong titles, and high-emphasis body text.
- #6B7280 — Muted Slate: Secondary descriptive body copy, eyebrow tags, and metadata notes.
- #10B981 — Success Emerald: Status indicator pills, progress bars, and positive metric indicators.
- #FF5A5F — Coral Pulse: Cardiology icon accents and floating circular heart badge.
- #E5E9F2 — Border Tint: Hairline card boundaries and segmented horizontal dividers.

TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 20px subheading, 24px heading, 40px heading-lg, 54px display. Tracking -0.03em on display, 0 on body. The typographic tone is authoritative, empathetic, and exceptionally readable, driven by clean modern sans-serif letterforms like Inter. Headings use tight negative tracking (-0.03em) to convey modern tech sophistication, while body copy remains open and neutral for effortless comprehension. Inter or Plus Jakarta Sans freely delivers this precise blend of digital precision and medical trust.

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

DEPTH
Depth is created through gentle, ambient drop shadows (0 12px 32px rgba(17, 24, 39, 0.06)) beneath crisp white cards overlapping photography. Cards appear to hover cleanly 4px to 8px above the canvas, simulating physical telemetry glass. Flat section backgrounds are punctuated with sharp foreground elements to achieve soft clinical stratification without harsh dark shadows.

IMAGERY
Imagery relies on natural, highly professional medical photography featuring authentic doctors in white coats and patients interacting with digital devices. Subjects are illuminated with soft, diffuse day lighting and positioned in clean, bright clinical environments. Stock cliches, high-contrast dramatic studio lighting, and low-res illustrations are strictly avoided.

SIGNATURE DETAIL — the thing that makes this design itself
The defining signature is the floating telemetry card stack overlapping human healthcare photography, blending real-life clinical warmth with sharp digital metrics. To execute properly, cards must feature pure white backgrounds, subtle borders, and soft ambient drop shadows overlapping the perimeter of the doctor image. Misusing this by removing the photographic overlap or flattening the card shadows destroys the signature spatial depth.

MUST
- Use pure #FFFFFF as the dominant canvas with subtle #F7F9FD section tinting.
- Reserve vibrant cobalt #2F6BFF for key focal words in display headings and primary CTAs.
- Layer crisp white floating telemetry cards over photography to establish depth.
- Keep card corner radii generous, adhering closely to 16px-20px.

AVOID
- Never use heavy black borders; maintain delicate #E5E9F2 or soft shadow boundaries.
- Do not saturate entire backgrounds with dark or vibrant colors.
- Avoid sharp 0px card corners which conflict with the soft healthcare aesthetic.
- Never hide text links; always accompany them with micro chevron arrows.

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

Web designDesign reference

Abyssal Ledger

The canvas is submerged in a rich midnight petrol slate (#0b121b), eschewing pure black in favor of deep oceanic navy undertones. Surfaces sit on elevated dark containers (#111c26) demarcated by razor-thin slate borders (#1c2a38) rather than heavy drop shadows. High-luminance electric cyan (#1de9b6) acts as the primary brand beacon and indicator of positive momentum, harmonized with electric violet (#a855f7) and amber gold (#f59e0b) for categorical multi-series data. Numerical metrics dominate the visual hierarchy through high-contrast bold white numerals (24px to 28px) paired with quiet slate captions (#64748b). Cards feature generous 16px corner radii and 20px internal padding, balancing information density with breathing room. A viewer immediately registers the four top-tier summary cards with seamless, borderless bottom sparklines before moving into the split data-visualization grid.

Web designDesign reference

Acoustic Minimal

This layout pairs a permanent dark charcoal sidebar (#121316) with an airy, pale grey-beige canvas (#F5F5F7) housing rounded structural cards (#FFFFFF). The aesthetic borrows heavily from high-end Danish and Japanese acoustic industrial design, contrasting stark architectural typography against tactile metallic renders in bronze and milled aluminium. Vibrant electric blue (#1E6BFF) serves strictly as a high-contrast functional accent for interactive triggers like primary CTA pills and cart badges, while amber (#E5A93C) indicates availability statuses. Typography is set in a neutral neo-grotesque with sharp tracking shifts between wide uppercase micro-labels and compressed display headlines (e.g., 'NB—32' at ~52px). Generous 24px internal card padding and large 20px card corner radii create soft modular islands. The primary visual tension arises from the interplay between monolithic pitch-black elements and luminous warm whites.

Web designDesign reference

Aegis Clinical

The interface operates on an ultra-clean white (#ffffff) and pale ice-blue surface hierarchy, using high-contrast slate (#0f172a) typography to project institutional authority and medical safety. Brand royal blue (#1668e3) functions strictly as a primary interaction and focal anchor, highlighting critical conversion paths and anchoring the dual-tone display headline. Secondary service departments are differentiated through soft pastel icon discs (spanning 48px to 56px in diameter) in tinted crimson, mint, lavender, and sky blue. Structural cards employ soft 16px corner rounding paired with faint, diffused ambient shadows (0 10px 30px rgba(15,23,42,0.04)). The prominent architectural hero imagery dissolves into the white canvas via a gentle gradient mask, visually uniting the physical facility with the digital portal.

Web designDesign reference

Aegis Cyber Luxe

The interface marries an ultra-dense, dark command rail (#070e1c) with a radiant, airy light canvas (#f8fafd) that houses executive-level threat intelligence. Hierarchy relies on high-contrast text sizing and surgical neon accents: vivid royal blue (#165dfc) for primary actions and safe-state telemetry, juxtaposed against alert crimson (#f04438) for imminent malware breaches. Typography is rendered in an ultra-clean geometric sans with tight headline tracking (-0.02em) and muted slate body copy (#64748b). Surface containers exhibit subtle 1px borders (#e8edf5) with a uniform 16px corner radius, floating gently above pale atmospheric radial gradients. The eye is immediately captured by the hero 3D composition, featuring a hyper-detailed dark monitor flanked by translucent glassmorphic telemetry cards and glowing threat icons.