Clinical Azure

Built on an ultra-clean #FFFFFF surface, the design deploys medical blue (#1A6CEB) as its dominant functional anchor, pairing it with deep navy (#0A1B39) typography to establish immediate clinical authority. Calming secondary hues like sky blue (#D8ECFD) and fresh mint (#10B981) soften high-anxiety healthcare subjects into approachable wellness interactions. Structural hierarchy is enforced through generous vertical whitespace (section gaps ~96px) and modular rounded cards using a uniform 20px radius. Type is set in a modern geometric sans-serif that balances legible tabular data against welcoming editorial display headings scaled up to 52px. The interface avoids aggressive medical tropes in favor of lifestyle photography, floating status chips, and light card borders (#E8EEF5) with soft ambient drop shadows.

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: crisp clinical assurance softened with sky-blue curved volumes, pill metadata, and human-centred medical guidance.

LAYOUT
The page flows from an asymmetric split hero (two-column content versus silhouetted doctor on sky-blue backdrop) directly into a horizontal five-column interactive category carousel. Below lies an asymmetric editorial split section pairing workplace imagery and value propositions with stacked feature tiles. The sequence resolves into a grounded, dark navy full-width four-column metric banner that reinforces institutional credibility.

PALETTE (use these exact hex values)
- #FFFFFF — Pure White Canvas: Primary page background and active card fills for absolute clinical clarity
- #F4F8FC — Sky Tint Surface: Tinted card backings, active tab states, and hero backdrop geometries
- #1A6CEB — Medical Blue: Primary CTAs, navigation highlights, active category borders, and key icon accents
- #0A1B39 — Deep Navy Text: High-contrast headings, card titles, and dark stat bar background canvas
- #5A6B82 — Slate Neutral: Supportive body copy, card descriptions, and secondary metadata
- #10B981 — Vitality Mint: Trust indicator badge, health score line chart, and verified checkmarks
- #E8EEF5 — Divider Soft Blue: Card outlines, category boundaries, and horizontal structural dividers
- #062044 — Deep Marine Footer: Background fill for high-impact metric and trust statistics banner

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Public Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px subheading, 24px heading, 34px heading-lg, 52px display. Tracking -0.03em at display, -0.01em at body. The geometric sans-serif delivers clean institutional confidence while rounded terminals soften the clinical edge, projecting warmth without compromising authority. Crisp tight letter-spacing (-0.03em) on large display headlines balances editorial presence with digital SaaS precision. Standard system alternates like Inter or Public Sans can replicate this voice accurately without special licensing overhead.

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

DEPTH
Depth is created using micro-borders (1px solid #E8EEF5) combined with extremely subtle, soft-spread blue-tinted shadows (0 10px 25px -5px rgba(10, 27, 57, 0.05)). Floating overlay widgets utilize a slightly stronger elevation (0 16px 32px -4px rgba(10, 27, 57, 0.08)) to distinctly detach from underlying photographic portraits.

IMAGERY
Photography emphasizes smiling, approachable medical professionals in clean white coats looking directly at the camera, conveying reassurance and expertise. Figures are silhouetted or cropped softly over asymmetric sky-blue curved discs with floating medical metadata widgets; dark or distressed hospital imagery is strictly prohibited.

SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric sky-blue backing disc framing a cut-out healthcare professional, flanked by a floating white 'Health Score' chip with an emerald sparkline. To use correctly, position the organic circular graphic slightly off-center behind silhouetted photography while floating micro-metric cards over the silhouette boundary. Misusing it by placing boxed rectangular imagery inside the circle destroys the clean integrated layering effect.

MUST
- Anchor photography against organic sky-blue circular fills to eliminate harsh square crop lines.
- Use deep navy (#0A1B39) for text rather than neutral black to maintain a medical grade identity.
- Enforce consistent 20px card border radii across all white floating modular containers.
- Maintain high contrast on callouts using vibrant #1A6CEB for interactive links and primary actions.

AVOID
- Never use harsh drop shadows with high opacity; keep elevation strictly below 0.08 alpha.
- Avoid clinical red or aggressive warning yellows that could provoke health-related anxiety.
- Do not drop card border radius below 14px; sharp corners destroy the friendly approachable aesthetic.
- Do not place body text directly on pure primary blue; keep large text fields on white or #F4F8FC.

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