Mindful Sanctuary

The canvas rests on an immaculate white (#FFFFFF) ground subtly framed by whisper-soft periwinkle gradients. Royal cobalt blue (#3B5CE8) serves as the primary focal anchor, driving action on the primary CTA button and emphasizing the title phrase 'Self-Isolation'. Soft pastel coral pink (#FA6E7F) and sky tint (#E9F0FD) balance the composition, lending emotional warmth without visual clutter. Typography relies on a geometric, humanized sans-serif with bold display headings (around 52px) paired with compact 12-14px informational body copy. Spacing is expansive and deliberate, utilizing generous 80px+ vertical clearances alongside 24px rounded card containers. A reader immediately notices the whimsical vector illustration of a protected figure under a glassy bell jar, anchored below by a four-column floating statistics dock.

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: a tranquil wellness sanctuary cocooned in soft pastels, protective translucent domes, and vibrant cobalt accents.

LAYOUT
Structured around an asymmetrical two-column desktop hero grid topped by a clean horizontal navbar. The left column stacks a pill badge, dual-color headline, short paragraph, three icon-led feature items, and dual CTA links. The right column holds the expansive bell-jar character illustration, underpinned seamlessly by a floating four-metric horizontal dock that spans across the lower third.

PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary surface background for the entire page canvas and card dock.
- #F4F7FC — Subtle Ice Tint: Soft ambient background fills and tinted icon backdrops.
- #3B5CE8 — Royal Cobalt: Primary CTA button background, key highlighted display text, and active indicators.
- #1B223C — Deep Midnight Navy: Main headline typography, logo mark text, and metric values.
- #7683A2 — Slate Blue: Secondary description copy, subheaders, and helper labels.
- #FA6E7F — Pastel Coral: Pill badge border and text, heart accent icons, and floral foliage details.
- #FFF0F2 — Blush Tint: Background fill for the wellness pill badge and subtle floating confetti dots.
- #18B87A — Metric Mint: Growth indicators, percentage upward trend arrows, and metrics.

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Sofia Pro, Outfit), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px subheading, 22px heading, 52px display. Tracking -0.02em at display, 0 at body. The geometric sans-serif communicates empathy, clarity, and authoritative reassurance without feeling cold or overly clinical. Its open letterforms and round counters keep dense health messaging friendly and easily digestible for anxious users. For web implementations, Plus Jakarta Sans or Inter serve as seamless, high-legibility Google Font alternatives.

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

DEPTH
Depth is handled with exceptional delicacy through low-contrast, highly dispersed drop shadows (such as 0 16px 36px rgba(59, 92, 232, 0.06)) on floating cards. Layers feel weightless rather than stacked, reinforced by subtle overlapping translucent domes and light vector leaves behind the primary figure. Borders are almost non-existent, replaced by soft tint contrast between white cards and very pale ice-blue surfaces.

IMAGERY
Vector-based character illustrations with smooth, organic outlines and friendly, stylized proportions (such as outstretched arms and simplified facial features). The character is encased within a protective, translucent bell jar/shield icon indicating safety. Avoid gritty textures, complex 3D renders, or raw clinical photography; all visual metaphors must feel uplifting, botanical, and calming.

SIGNATURE DETAIL — the thing that makes this design itself
The translucent vector 'protective dome' enclosing the central character, paired directly with the floating 4-column metric dock below. It visually embodies safety and quarantine in a positive, empowering light rather than an oppressive one. To execute properly, keep the dome stroke subtle with low opacity and floating floral elements breaking slightly outside its perimeter.

MUST
- Use generous whitespace around the headline and hero illustration to preserve an uncrowded, calming environment.
- Render the hero protective shield as a clean, translucent vector outline with gentle inner gradients.
- Pair solid royal blue (#3B5CE8) buttons with neutral text and soft pastel badge counters.
- Highlight precisely one key conceptual phrase in display headings using the brand cobalt blue.

AVOID
- Never apply harsh black drop shadows; stick to dispersed periwinkle-tinted blurs below 10% opacity.
- Avoid sharp 0px card borders; every elevated surface must have smooth 20px to 24px radii.
- Do not saturate entire section backgrounds in dark or neon colors; keep the canvas predominantly white.
- Never use serif typefaces, which would break the clean, approachable modern medical-tech aesthetic.

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