Ceramic Sanctuary

The canvas is a serene bone-beige (#f9f8f6) bordered on the left by an anchoring vertical sidebar in deep petrol teal (#0d242a). Color operates with extreme restraint: dark teal grounds the architecture and focal CTA button (#166360), while soft mineral green (#268a82) accents availability and badges. Typography juxtaposes an expansive, tracked uppercase sans-serif brand header with an organic high-contrast editorial serif (#1c2022) for product titles and section headers. Cards and media tiles share a gentle 12px to 16px corner radius with nearly flat, diffuse drop shadows that let product textures breathe. Spacing is expansive and deliberate, prioritizing generous white space around tactile pottery imagery. A viewer immediately notices the structural tension between the brooding sidebar and the warm, gallery-grade product showcase.

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: quiet tactile luxury shaped by dark petrol navigation against luminous bone ceramic surfaces.

LAYOUT
The viewport is organized into a fixed-width left architectural navigation rail (approx. 200px) and a fluid main workspace. Inside the workspace, a top utility header leads into a breadcrumb trail, followed by a balanced two-column product detail stage (gallery on left, commerce details on right). Below the fold, horizontal reassurance modules and three-column catalog grids provide steady rhythmic pacing.

PALETTE (use these exact hex values)
- #f9f8f6 — Canvas Bone: Primary page background providing a warm ceramic gallery warmth across all content areas
- #0d242a — Deep Petrol Slate: Full-height vertical sidebar navigation background anchoring the left viewport edge
- #ffffff — Card White: Clean surface for product cards, thumbnail containers, and input elements
- #f2f0ec — Tonal Cream: Background for feature callout containers and secondary highlight panels
- #166360 — Deep Spruce Teal: Primary interactive action for the add-to-cart button and active state trims
- #268a82 — Mineral Seafoam: Category labels, active sidebar indicator, and stock status indicators
- #1c2022 — Charcoal Black: Primary headings, pricing figures, and critical textual information
- #6f7578 — Muted Ash: Body copy descriptions, breadcrumbs, feature subtitles, and secondary icons
- #e7e5df — Soft Rim Border: Hairline dividers, card outlines, and quantity selector boundaries

TYPOGRAPHY
Typeface Cormorant Garamond (or Playfair Display, EB Garamond, Bogart), weights 400/500. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 22px subheading, 36px heading. Tracking -0.01em at display. The typographic voice is quiet, cultured, and archival, evoking an exhibition catalog for high-end ceramics. Cormorant Garamond lends organic fragility and historical grace to titles, while Plus Jakarta Sans brings modern, legible Scandinavian clarity to prices and specs. Free open-source pairings like EB Garamond and Inter replicate this voice perfectly.

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

DEPTH
Depth is created primarily through color contrast and micro-borders rather than stacked drop shadows. The dark petrol sidebar establishes an architectural baseline, while related product cards float subtly with a faint ambient blur (box-shadow: 0 4px 20px rgba(0,0,0,0.03)) over the warm bone background. Layering feels like physical museum mounting rather than digital elevation.

IMAGERY
Photography emphasizes tactile studio craft: soft daylighting, matte ceramic crackle glazes, creamy ivory pottery, and muted slate pedestals. Backgrounds in photos match the warm gray-beige palette of the UI seamlessly. High-saturation lifestyle photography or high-gloss synthetic objects would completely rupture the artisanal atmosphere.

SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the visual dialogue between the heavy, monolithic petrol-slate navigation column and the featherweight bone-and-ceramic showcase area. It transforms a standard e-commerce page into a curated design archive. To use it properly, keep sidebar icons gossamer-thin and allow the product images to carry the warmth.

MUST
- Anchor the layout with the full-height deep petrol sidebar (#0d242a) pinned to the left edge.
- Use high-contrast serif typography for product names and section titles to preserve artisanal luxury.
- Maintain generous padding (minimum 48px to 64px) between media modules and meta sections.
- Round product cards and trust banners generously with 12px to 16px corner radii.

AVOID
- Never replace the editorial serif headings with generic geometric sans-serif typefaces.
- Do not use harsh 100% black text (#000000); use deep charcoal (#1c2022).
- Avoid stark saturated red or orange badges; denote stock and alerts with mineral green (#268a82).
- Do not allow the sidebar to collapse into a standard hamburger unless below tablet breakpoints.

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