Clinical Botanic

This interface establishes a premium oral care identity by merging crisp clinical hygiene with organic warmth. The canvas rests on an ultra-pale grey-white base (#F8FAFC), letting high-key studio product photography introduce natural greens and porous limestone textures. Hierarchy relies heavily on an electric royal blue (#1B62CD) that anchors hero messaging, bullet coordinates, and calls to action against neutral charcoal text (#16202E). Sections are paced with floating rounded cards (24px corner radii) that feature generous interior padding (32px) and faint ambient shadows. Typography is set in an airy geometric sans-serif, using disciplined sizing jumps from 56px hero display titles down to 13px trust captions. A reader immediately notices the striking studio hero render contrasted against the sharp, minimal white UI elements.

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 organic wellness framed by precise royal blue accents and tactile mineral stone surfaces.

LAYOUT
The page adheres to a 12-column rhythm within a 1200px max-width container, alternating between asymmetric split heroes and symmetric multi-column cards. The hero pairs a left-aligned text and lead capture stack with a large right-aligned product composition. Beneath, floating pill cards span the full grid to partition narrative blocks, followed by an inverse split layout for ingredients where text anchors the left and a circular visual vignette anchors the right.

PALETTE (use these exact hex values)
- #F8FAFC — Canvas Ice: Global page background providing a sterile yet soft clinical backdrop
- #FFFFFF — Card Pure White: Elevated cards, input backdrops, and navigation background
- #1B62CD — Cobalt Blue: Primary buttons, key phrase emphasis, bullet pips, and brand mark highlights
- #EDF4FC — Cobalt Tint: Icon container badges and soft circular feature backings
- #16202E — Deep Mineral: Headlines, navigation links, and primary metric numerals
- #64748B — Botanical Slate: Supporting descriptive copy, subtitle paragraphs, and metadata labels
- #E2E8F0 — Hairline Grey: Input outlines, vertical dividers, and subtle component borders

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 20px subheading, 32px heading, 56px display. Tracking -0.03em at display, 0 at body. The typography is disciplined, hygienic, and modern, using a geometric grotesque with circular proportions and tall x-height. Its sterile clarity channels pharmaceutical safety while its round letterforms keep the tone friendly and direct. Plus Jakarta Sans or Inter in medium and bold weights executes this balance without feeling mechanical.

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

DEPTH
Depth is handled through whisper-light ambient diffusion rather than layered physical drop shadows. Cards float on the #F8FAFC canvas with a gentle 0 8px 30px rgba(0, 0, 0, 0.04) shadow, making them feel like crisp paper stock resting on a clean studio table. Physical depth is delegated almost entirely to the 3D studio photography with its cast stone and leaf shadows.

IMAGERY
Photography consists of pristine, sun-drenched studio product staging on coarse, porous white limestone slabs. Live botanical elements (fresh spearmint leaves, powder smears, eucalyptus) surround matte-finish product tubes with crisp, directional natural sunlight. Any flat vector art, generic stock photography, or overly glossy neon renders are strictly off-brand.

SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the contrast between tactile, porous travertine stone in the product staging and the hyper-precise, floating white cards with 24px radii and cobalt blue dot accents. To use it correctly, let raw botanical photography provide warmth while the UI remains strictly clinical, white, and airy. Misusing it involves tinting the UI cards or over-saturating the interface with multiple accent colors.

MUST
- Reserve #1B62CD royal blue exclusively for primary CTAs, key brand moments, and precision focal dots.
- Use generous 24px corner radii for main card containers to maintain an approachable, clean shape language.
- Pair high-resolution, sunlit product photography containing natural greens with strict white backgrounds.
- Keep text hierarchy compact: one bold display headline per section supported by slate-grey 14-16px copy.

AVOID
- Do not introduce secondary vibrant colors like orange or purple; let botanical photography provide hue variety.
- Do not use sharp 0px corners on interactive buttons or structural cards.
- Do not place heavy drop shadows under containers; use barely-perceptible ambient diffusion (#000000 at 4%).
- Do not make body text solid black; strictly use #64748B to preserve soft clinical contrast.

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