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.

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: sunlit glass-and-steel clinical confidence built on surgical precision, pristine royal blue, and reassuring pastel iconography.

LAYOUT
The page follows an orderly, stacked grid rhythm anchored by a 1280px max-width container. It opens with an asymmetrical 50/50 hero section where left-aligned text balances an organically fading image. Directly below, an elevated 4-column metric bar bridges the transition into the services section, which features a header row and a balanced 4-column card grid. The flow concludes with a full-width integrated search bar and a compact reassurance strip.

PALETTE (use these exact hex values)
- #ffffff — Canvas White: Pure white base ground for main page body, primary card backgrounds, and navigation header
- #f8fafc — Subtle Ice Tint: Background fill for nested input blocks, subtle section bands, and filter bars
- #1668e3 — Medical Royal Blue: Primary brand color for major CTAs, active indicators, headline accents, and core logo mark
- #0f172a — Deep Slate Text: Primary typography color for display headings, department titles, and metric figures
- #64748b — Muted Slate Gray: Secondary copy, supporting captions, input placeholders, and inactive navigational links
- #eff6ff — Pill Tint Blue: Background for hero badge eyebrow and general medicine icon containers
- #fee2e2 — Cardiology Rose Tint: Background container for cardiology and vital patient satisfaction badges
- #dcfce7 — Pediatrics Green Tint: Background fill for emergency and pediatric care icon discs
- #f3e8ff — Neurology Lavender Tint: Background fill for specialized neurology and cognitive care icon discs
- #e2e8f0 — Clinical Border: Hairline 1px borders around secondary buttons, search bars, and card perimeters

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Manrope, DM Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 20px subheading, 28px heading, 36px heading-lg, 52px display. Tracking -0.03em on display, 0 on body, 0.05em on uppercase pills. The typography is clinical, human-centric, and authoritative. Using an approachable geometric sans-serif like Plus Jakarta Sans or Inter balances scientific precision with warmth. Display headlines set in bold weights with tight negative letter-spacing (-0.02em to -0.03em) project modern competence without feeling aggressive.

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

DEPTH
Depth is rendered sparingly through ultra-soft, low-opacity drop shadows (0 8px 24px rgba(15, 23, 42, 0.04)) primarily applied to the metric social-proof card and the doctor search container. Individual service cards stay flat, relying on crisp 1px borders (#e2e8f0) to separate them from the canvas. The rest of the page remains planar, allowing photography and typography to provide visual hierarchy.

IMAGERY
Photography emphasizes contemporary, sunlit hospital architecture and modern diagnostic equipment with cool clinical blue cast. Subjects in medical service cards depict professional clinicians interacting naturally with patients or high-tech equipment under clean lighting. Imagery avoids graphic clinical scenes or overly artificial stock photography in favor of bright, technologically advanced facilities.

SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable motif is the circular icon disc bridging the boundary between visual media and text cards, reinforced by the gradient-dissolved modern architectural hero facade. The dual-tone headline ('Top-Tier Healthcare. / Closer to You.') in slate and royal blue immediately signals institutional scale tailored for local patient accessibility.

MUST
- Retain the pure white background to maintain surgical sterility and clinical openness.
- Split main headline phrases between deep slate (#0f172a) and vibrant medical blue (#1668e3).
- Enclose all category icons within soft, tinted pastel circles (48px to 56px).
- Fade hero facility imagery into the canvas with soft linear alpha gradients.

AVOID
- Never use harsh dark backgrounds or heavy black borders; everything must remain light and airy.
- Do not saturate entire card backgrounds with accent colors; confine tints strictly to icon discs.
- Avoid sharp 0px corners which feel uninviting and cold in healthcare applications.
- Do not use stock medical photography with unnatural poses; prioritize realistic, state-of-the-art facilities.

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

Web designDesign reference

Aegis Health

The interface operates on a three-tier light architecture: an ultra-pale slate-tinted canvas (#F8FAFD), pristine white card containers (#FFFFFF), and selective saturated cobalt accents (#2B6BEE). Color is restrained strictly to interactive triggers, status indicators, and category iconography, preventing clinical software fatigue. Typography relies on a crisp geometric sans-serif, using heavy display scale (around 48px) against subdued body copy (#64748B at 14px) for rapid scanning. Radii remain generously soft throughout, settling at 16px to 20px on cards and 10px on interactive buttons, instilling calm and approachable professionalism. The primary visual hook is the layered hero montage combining human medical photography, translucent cyan backing discs, and crisp floating statistic chips with 16px blur shadows.