Clinical Clarity

The canvas is anchored on a soft, sterile-yet-approachable off-white surface (#F8F9FB) with pure white (#FFFFFF) container cards floating at 16px corner radii. Colour acts strictly as semantic hierarchy: a vivid terracotta rust (#CF5946) reserves the highest tier of interaction for critical operational triggers like 'Record Vaccination', while royal azure (#3B66F5) anchors data curves, system identity, and active navigation states. Data visualisations employ a triadic telemetry palette of mint green (#3EAF7E), amber gold (#EAA446), and warning coral (#DE5648). High-density operational data is structured across consistent 20px card paddings with hairline gray borders (#EBF0F5), allowing high data legibility without visual exhaustion. A viewer immediately notices the humanised vector hero illustration set beside bold 32px display typography before tracking down to the four sparkline metrics.

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: serene healthcare dashboard balancing structured operational telemetry with warm terracotta and azure accents.

LAYOUT
The interface is anchored by a persistent 220px left navigation rail and a full-bleed top utility bar with global search and admin profile. Below, the body follows an asymmetrical two-column layout: an 8-column primary workstream on the left and a 4-column quick-access column on the right. Vertically, it stacks a welcome banner beside quick actions, followed by a 4-card metric grid, continuing into telemetry charts, and finishing with an operational table alongside an activity timeline.

PALETTE (use these exact hex values)
- #F8F9FB — Canvas Background: Global application viewport background behind cards and side navigation rail
- #FFFFFF — Card Surface: Primary elevated card and container background across all dashboard modules
- #CF5946 — Terracotta Primary: High-priority CTA buttons, alert sparklines, and critical stock depletion metrics
- #3B66F5 — Royal Azure: Hero subheadings, active navigation pills, primary sparklines, and brand shield
- #3EAF7E — Mint Emerald: Positive trend metrics, stock sufficiency status, and patient growth sparklines
- #EAA446 — Amber Ochre: Low-stock donut chart segment and warning operational indicators
- #1E2432 — Deep Slate Text: Primary headings, large data metric numerals, and table record names
- #6C788A — Muted Slate Text: Secondary labels, table column headers, metadata timestamps, and placeholder copy
- #EBF0F5 — Subtle Border: Hairline card boundaries, segmented controls, and horizontal table row rules
- #FDF5F2 — Warm Support Tint: Background fill for lower sidebar help callout banner

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 28px heading, 32px display. Tracking -0.02em at display, 0 at body. Plus Jakarta Sans delivers an open, authoritative yet deeply human clinical cadence. Its clean geometry and spacious counters prevent numeric clustering in data tables while maintaining warmth in banner headers. If licensed deployment is unavailable, Inter or DM Sans serve as robust structural drop-in replacements.

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

DEPTH
Depth is rendered virtually flat with architectural precision. Rather than conspicuous blurred drop-shadows, containers use solid white (#FFFFFF) fills contrasted over the canvas tone (#F8F9FB) with a 1px border (#EBF0F5). Interactive popovers and tooltips use a barely perceptible 0px 4px 12px rgba(0,0,0,0.04) ambient blur.

IMAGERY
Imagery is limited to clean vector editorial illustrations depicting modern clinical figures with flat graphic geometry and corporate memphis-adjacent warmth. Figures wear contemporary medical attire accompanied by abstracted medical motifs like oversized shields and vaccine vials. Photorealistic imagery or stark photographic clinical trauma shots are strictly off-brand.

SIGNATURE DETAIL — the thing that makes this design itself
The dual-accent signature pairing terracotta (#CF5946) with royal azure (#3B66F5) across a sterile white grid. This instantly pulls medical UI out of cold clinical sterility into empathetic operational efficiency. It is misused if terracotta is splashed across mundane secondary links or if azure is replaced with teal.

MUST
- Use terracotta (#CF5946) solely for the most critical user action or urgent stock warning.
- Maintain uniform 16px border-radius across all major dashboard panels and metric cards.
- Pair every KPI sparkline card with a contextual sub-label or trend percentage below the figure.
- Keep card inner padding strictly at 20px for content breathing room.

AVOID
- Never use generic high-saturation red for clinical warnings; use muted terracotta #CF5946.
- Do not drop sharp drop shadows; elevation must rely on subtle border outlines (#EBF0F5).
- Never mix serif typefaces into this clean neo-grotesque data environment.
- Do not make quick action tiles full solid colors; keep backgrounds white with tinted icon badges.

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