Haven Modern

The canvas is a luminous warm linen off-white (#FBFBF9) paired with crisp white card surfaces (#FFFFFF). Terracotta rust (#C4573B) acts as a precise focal accent for conversion points, tab pills, and headline punctuation, leaving the deep soot charcoal (#191D21) to anchor architectural typographic hierarchy. Headlines utilize a high-contrast editorial serif, grounded by a rational geometric sans-serif for interface controls and property specifications. Layout relies on generous 80px to 100px section verticality, offset asymmetric margins, and distinctive top-right rounded image apertures (100px radius). A reader immediately notices the dramatic half-page hero photography gracefully intersected by an elevated floating search capsule.

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: sun-drenched architectural editorial with warm terracotta accents and bespoke estate curation.

LAYOUT
The header sits statically at the apex with a 72px footprint, followed immediately by an asymmetric two-column hero grid (copy left, massive framed villa right). An elevated search console straddles the hero columns at their base. Below sits an evenly distributed monochrome press bar, transitioning directly into a three-column value proposition row, before resolving into an editorial dual-column property grid.

PALETTE (use these exact hex values)
- #FBFBF9 — Linen Canvas: Global background providing a warm, tactile editorial canvas behind all content blocks.
- #FFFFFF — Pure White: Floating search filter bar, property cards, and active toggle badge backgrounds.
- #C4573B — Terracotta Flame: Primary calls to action, active toggle tabs, headline full stops, and search buttons.
- #191D21 — Soot Charcoal: Display typography, property headlines, monetary values, and active navigational links.
- #6C7278 — Muted Slate: Descriptive body copy, sub-labels, metadata specs, and press publication logos.
- #F0EFEB — Parchment Tint: Subtle eyebrow tag pill backgrounds and light secondary element fills.
- #E7E6E2 — Subtle Divider: Hairline segmentations within the multi-field search console and toggle borders.
- #FBECE7 — Blush Apricot: Circular background tone behind the lifestyle feature icon container.

TYPOGRAPHY
Typeface Cormorant Garamond (or Playfair Display, Italianno, Freight Text), weights 400/600. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 20px subheading, 36px heading, 60px display. Tracking -0.02em at display, -0.01em at section headings. The typographic pairing exudes quiet affluence and deliberate architectural poise. Cormorant Garamond conveys classic Californian estate heritage, while Plus Jakarta Sans brings modern technological speed and cleanliness. If Cormorant is unavailable, Playfair Display provides acceptable high-contrast elegance.

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

DEPTH
Depth is created through low-opacity, wide-diffusion shadows rather than hard structural lines. The floating search console uses '0 20px 45px rgba(25, 29, 33, 0.08)' to gracefully hover over both the linen background and dusk photography. Surface levels are otherwise planar, relying on pure white containers placed atop warm parchment linen.

IMAGERY
Photography emphasizes high-end architectural symmetry, dusk ambient illumination, and warm interior staging with clean glass and wood. Drone or wide-angle shots must feature manicured hillsides, pools, or curated modern living spaces. Saturated lifestyle portraits, low-res stock imagery, or cluttered everyday interiors violate this identity.

SIGNATURE DETAIL — the thing that makes this design itself
The distinctive hero composite: an architectural photograph cut with a single 120px top-right curved corner, overlapped at its bottom edge by an elevated horizontal multi-filter search console breaching the editorial left column.

MUST
- Always terminate the primary hero serif display heading with a terracotta (#C4573B) full stop.
- Use exaggerated asymmetrical rounded corners (100px+) on select hero photography anchors.
- Ensure search consoles horizontally span across the boundary of left copy and right photography.
- Keep property card specifications strictly horizontal using micro line icons alongside values.

AVOID
- Never use generic high-gloss black drop shadows; keep elevations soft and tinted warm grey.
- Avoid pill-shaped roundings (999px) on search bars; maintain crisp 16px geometric corners.
- Never omit the three core listing specs (Beds, Baths, Sqft) on estate summary cards.
- Do not use saturated blues or greens; secondary icon circles must remain pale pastels.

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