Lumina Botanical Science

The interface strikes a deliberate dual-tone balance: an immersive midnight plum (#151128) hero banner transitions immediately into an ultra-clean, clinical white (#ffffff) and pale ice-blue (#f3f7fa) content canvas. Color acts strictly as functional hierarchy—vibrant spearmint teal (#2aa7a6) commands primary actions, status pills, and active states, while slate grays (#64748b) hold descriptive utility. Typography pairs an elegant high-contrast editorial serif for headlines (set around 38px to 46px with tight -0.015em tracking) against an objective geometric sans-serif for specifications and body copy (13px to 15px). Spacing leans comfortable to airy with 80px to 96px section buffers and consistent 16px to 20px rounded card contours. A reader first notices the contrast between the dark nocturnal hero stage featuring product renders and the bright, scientifically organized ingredient cards below.

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: clinical apothecary meets editorial luxury through midnight plum drama, crisp teal pills, and airy clinical cards.

LAYOUT
The page flows from an atmospheric, high-impact hero header into a disciplined two-column grid (6 benefits left, ingredient capsule right). It continues with a split video/science breakdown, a sequential 3-card horizontal routine stepper, an elongated marine-toned value banner, and concludes with a paginated review carousel over footer trust pillars.

PALETTE (use these exact hex values)
- #151128 — Midnight Plum: immersive nocturnal backdrop for the hero canvas and navigation header bar
- #ffffff — Pure Canvas: primary light background for ingredient modules, how-to-use steps, and review cards
- #f3f7fa — Glacial Blue: soft tinted fill for ingredient sidebars, step containers, and testimonial cards
- #0e2b3d — Dark Marine: deep rich teal-slate background container for the value proposition feature block
- #2aa7a6 — Clinical Teal: high-priority call to action pill buttons, icon badge backgrounds, and interactive focus states
- #1a1f2c — Deep Obsidian: dominant high-contrast text color for headings and bold titles on light surfaces
- #64748b — Slate Heather: secondary descriptions, subtext, captions, and microcopy throughout content sections
- #e89242 — Warm Amber: star rating icons and subtle diurnal sun glyphs across testimonials and steps

TYPOGRAPHY
Typeface Playfair Display (or Cormorant Garamond, Freight Text, DM Serif Display), weights 400/500/600. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 26px heading, 44px display. Tracking -0.015em at display, 0 at heading. The typography blends classical botanical apothecary tradition with modern dermatological precision. The headline serif feels refined, luxurious, and deliberate, while the sans-serif body provides clinical clarity and legible reassurance for product claims. Cormorant Garamond or Playfair Display paired with Plus Jakarta Sans closely mirrors this mood.

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

DEPTH
Depth is rendered flat and modern, relying on subtle background tint shifts (#f3f7fa against pure white) rather than heavy drop shadows. When elevation occurs, it is an imperceptible 0 4px 16px rgba(0, 0, 0, 0.04) blur on isolated step cards and carousel arrows.

IMAGERY
Photography embraces dewy, soft-lit clinical beauty: backlit studio renders of cosmetic bottles resting on raw stone slabs alongside lavender flora, and relaxed portraiture of glowing, bare skin. Supporting graphics include macro circular crops of natural gels and minimalist outline illustrations for skincare application routines.

SIGNATURE DETAIL — the thing that makes this design itself
The dual-world hero shift: anchoring the top of the shopping journey in a nocturnal deep plum botanical garden, then flipping immediately into an ultra-clean, clinical laboratory white grid. It fails if the dark color leaks haphazardly into content sections, destroying the scientific freshness.

MUST
- Retain the sharp visual transition from dark midnight plum hero to immaculate white body.
- Use full pill (999px) border radius on all action buttons and numerical step badges.
- Pair delicate editorial serif headings with neutral sans-serif descriptions for luxury skincare credibility.
- Keep card corners consistently rounded between 14px and 16px for a soft organic feel.

AVOID
- Do not bleed the dark purple hero background down into the clinical product details.
- Do not use sharp 0px corners on interactive buttons or structural cards.
- Never replace the editorial serif headings with heavy grotesque display fonts.
- Avoid high-contrast black borders; use soft borders (#eef2f6) or background tint deltas.

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