Editorial Clay Hub

The interface is anchored by a warm cream canvas at #FAF8F5, paired with pristine white surfaces at #FFFFFF that present high-elevation focal cards. Color is used with surgical discipline: a rich terracotta hue (#C85338) commands primary intent across pill buttons, accent words, and active navigation badges, while a deep charcoal (#1E2229) grounds headline typography. A bespoke typographic gesture pairs modern geometric sans headings with an expressive, italicized serif highlight in the hero title. Visual rhythm is defined by a 2x2 grid of cards styled with a generous 20px border radius and 28px internal padding, balancing concise explanatory copy on the left against rich isometric 3D clay vignettes on the right. A reader immediately notices the dimensional contrast between the flat, restrained editorial dashboard framing and the tactile, soft-shadowed 3D objects that animate each marketing domain.

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: tactile 3d claymorphism meets warm editorial typography for high-intent marketing workflows.

LAYOUT
The structure follows an anchored vertical split: an ultra-narrow left utility rail flanked by a warm primary sidebar, opening into a spacious two-tier main canvas. The header introduces the view with editorial prominence before transitioning into a balanced 2x2 grid of focus cards. The grid resolves with a full-width auxiliary guidance banner pinned directly beneath the grid.

PALETTE (use these exact hex values)
- #FAF8F5 — Canvas Alabaster: Global application canvas background providing warmth and reducing eye strain
- #FFFFFF — Card Surface White: Surface layer for cards, dropdown menus, and elevated interactive panels
- #11161B — Rail Abyss Navy: Extreme left primary brand dock housing the master application logo
- #C85338 — Terracotta Brand: Primary interactive trigger, key CTA buttons, and italicized editorial accent type
- #FCEEEB — Terracotta Wash: Active state background for navigation items and light badge fills
- #1E2229 — Deep Slate Ink: Primary headings, titles, active nav label text, and high-contrast numerals
- #75716B — Warm Muted Taupe: Secondary descriptions, inactive sidebar labels, and metadata tags
- #EBE6DF — Subtle Cream Hairline: Card borders, divider lines, and button outlines for soft separation

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px subheading, 22px heading, 36px display. Tracking -0.02em at display, 0em at body. The typography strikes a sophisticated balance between pragmatic SaaS utility and high-end editorial curation. The crisp geometric sans-serif (Plus Jakarta Sans) conveys authority and technical competence, while the single italicized serif accent (Playfair Display) injects humanity and premium craftsmanship. For open-source replacements, pair Inter or Plus Jakarta Sans with Fraunces or Instrument Serif.

GEOMETRY & SPACING
Corner radii — cards 20px, links 6px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 40px between sections, 1440px container, comfortable density.

DEPTH
Depth is delivered almost entirely through the physical rendering of the 3D clay models rather than aggressive CSS drop shadows. UI cards float on the canvas via an extremely gentle, diffused shadow (0 4px 20px -2px rgba(40, 30, 20, 0.04)) combined with a 1px hairline border in #EBE6DF. Interactive buttons remain intentionally flat to keep visual weight anchored on the illustrations.

IMAGERY
Illustrations are high-fidelity, matte-finished 3D isometric scenes with realistic soft diffuse lighting, claymorphic textures, and subtle reflections. Each vignette features a coherent palette of navy, muted forest green, terracotta, and soft neutral plastics depicting relatable business metaphors (megaphones, chess pawns, charts, lightbulbs). Flat vector art or photography is strictly forbidden.

SIGNATURE DETAIL — the thing that makes this design itself
The dual-personality hero heading: an authoritative sans-serif display title interrupted by a flowing, italicized serif word set in warm terracotta ('Choose your *marketing* focus'). Removing this hybrid typographic moment instantly flattens the interface into generic enterprise software; using it on more than one word per view destroys its curated, bespoke punch.

MUST
- Use italicized serif accents solely on single high-intent keywords within primary headings.
- Maintain high-contrast warm terracotta (#C85338) strictly for interactive primary actions and active navigation.
- Pair every domain card with an isometric, warm-clay textured 3D composition on the right half.
- Enforce generous 28px padding and 20px corner radius on major content containers.

AVOID
- Do not use cold blue or pure grayscale tones for borders; always tint toward warm cream (#EBE6DF).
- Never replace tactile 3D isometric renders with flat iconography or stock photography.
- Do not apply the italic serif font across entire sentences or button labels.
- Avoid harsh black drop shadows; keep elevation gentle with low-opacity warm ambient blur.

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.