Riviera Solstice

The canvas is anchored on crisp white (#FFFFFF) with warm alabaster underlays (#F7F6F2), immediately establishing an airy Mediterranean resort atmosphere. Color is deployed with strict restraint: a dominant deep maritime teal (#235760) commands primary attention across the hero typography and CTA, while sun-baked ochre (#D99426) accents the promotion badges and illustrative sun motif. Display type is built around a monumental high-contrast serif for the word 'SALE' at approximately 76px, counterbalanced by generous wide-tracked uppercase sans-serifs at 12px for navigation and tags. Geometry balances precise 8px radii on buttons with softer 16px to 24px organic image masks and translucent floating pill overlays. A reader instantly registers the striking contrast between the crisp, high-key footwear photography and the poised, calm editorial typesetting.

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 resort editorial pairing crisp deep-teal typography with warm amber accents and breezy poolside product staging.

LAYOUT
The page adheres to a 1360px grid starting with an edge-to-edge utility strip, transitioning to a clean white navigation header. The hero is orchestrated as an asymmetric two-column composition: the left 55% hosts dynamic, overlapping product visuals and floating badge metadata, while the right 45% delivers an aligned editorial lockup ending in trust signals. Below the hero, an expansive rounded panel spans the full container width to neatly compartmentalize customer assurance items into four symmetrical columns.

PALETTE (use these exact hex values)
- #235760 — Maritime Teal: Primary brand color used for dominant headline, primary CTA button, active navigation states, and cart badges
- #16373E — Deep Harbor: Darkest structural tone applied exclusively to the top utility announcement bar
- #D99426 — Sunlit Ochre: High-visibility accent used for the gradient discount badge, icon accents, and sun motif
- #FFFFFF — Pure Canvas: Main page canvas, primary header background, and floating card fills
- #F7F6F2 — Alabaster Mist: Subtle surface tint for the bottom trust badge bar and soft radial background halos
- #5A676B — Weathered Slate: Secondary typography including sub-copy, micro labels, terms, and trust bar descriptions
- #E3E0D8 — Dune Border: Delicate separators, dashed coupon borders, and subtle pill outlines

TYPOGRAPHY
Typeface Playfair Display (or Cormorant Garamond, Ogg, Didot), weights 400/600. Sizes 11px caption, 12px body-sm, 14px body, 15px body-lg, 18px subheading, 28px heading, 76px display. Tracking -0.01em at display. The typographic tone is luxurious, breezy, and assertive, blending high-fashion editorial prestige with e-commerce clarity. The towering serif used for 'SALE' evokes luxury editorial glossies like Vogue or Porter, while the disciplined, widely tracked sans-serif handles UI utility with effortless poise. When deploying freely available fonts, pairing Playfair Display or Cormorant Garamond with Montserrat or Jost faithfully captures this resort-exclusive presence.

GEOMETRY & SPACING
Corner radii — cards 16px, links 0px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1360px container, airy density.

DEPTH
Depth is handled through realistic photographic cast shadows from sunlight rather than synthetic UI drop shadows. Floating cards (such as the Seasonal Offer glass card and 50% badge) utilize soft, low-opacity ambient drop shadows (rgba(0, 0, 0, 0.08) with 16px blur) combined with white borders to float naturally above the imagery.

IMAGERY
Art direction relies on high-end resort editorial photography shot in direct midday sun, producing crisp geometric cast shadows. Props are organic and summer-oriented—sliced oranges, condensation on glassware, white sunglasses, and tropical palm foliage against textured plaster or stone slabs. Grimy, indoor, or artificial studio strobe setups are strictly off-brand.

SIGNATURE DETAIL — the thing that makes this design itself
The distinctive pairing of a monumental high-contrast serif 'SALE' anchoring deep teal (#235760) against an asymmetric collage of direct-sunlight resort photography and warm amber badges. If reduced to standard flat e-commerce sans-serifs or centered product cutouts, the entire high-fashion holiday mood dissipates into an ordinary shoe catalog.

MUST
- Always space uppercase sans-serif text with minimum 0.12em tracking to preserve editorial refinement.
- Pair the bold transitional serif headline strictly with crisp, high-key daylight photography.
- Keep the primary CTA button in solid #235760 with generous horizontal padding (at least 36px).
- Ensure promotional badges use the warm amber gradient (#D99426) to cleanly counter the dominant teal.

AVOID
- Never substitute the deep teal (#235760) with generic neutral black or bright electric cyan.
- Do not set long paragraphs in the serif display face; reserve it purely for campaign focal words.
- Avoid harsh black drop shadows; use soft, diffused ambient occlusions under floating badges.
- Never omit wide letterspacing on uppercase UI tags and coupon vouchers.

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