Terracotta Atelier

Built upon an ultra-clean, warm oyster-toned canvas (#F8F7F4), the interface functions like a contemporary art and architecture periodical. Pure white card containers (#FFFFFF) float subtly with crisp 1px borders (#EBE8E3) and soft 14px corner radii, avoiding heavy drop shadows entirely. Dominating the viewport is a monumental 96px display heading in near-black charcoal (#0D131F), counterbalanced by a delicate terracotta (#BD593D) brand accent used sparingly on badges, active filters, and call-to-actions. The card system establishes clear editorial hierarchy through asymmetric layout compositions: a dominant two-thirds hero card paired with stacked secondary stories, shifting effortlessly down into three-column and four-column rhythms. Micro-tags utilize pill-shaped tinted fills (#F4F2EE) with understated typography, while circular 36px icon buttons provide effortless browsing prompts.

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: sculptural editorial minimalism grounded in warm terracotta accents, stark geometric typography, and gallery-grade spatial pacing.

LAYOUT
The page adheres to a 12-column responsive grid centered at 1360px maximum width. It opens with an expansive title row pairing an oversized left-anchored headline against a right-anchored editorial summary, followed by a streamlined single-line filter bar. Content flows downward through an asymmetrical hierarchy: a dominant 8-column hero card paired with stacked 4-column cards, shifting to a symmetrical 3-column middle section, a standalone subscription module, and a final 4-column grid.

PALETTE (use these exact hex values)
- #F8F7F4 — Gallery Canvas: Global background tone providing warm, paper-like warmth across the entire application viewport
- #FFFFFF — Card White: Background fill for all editorial article cards and the input container box
- #0D131F — Charcoal Ink: Primary typography color used for oversized headlines, card titles, and active nav elements
- #BD593D — Terracotta Rust: Accent punch used for the logo tile, active category indicator, 'Featured' pill, and 'Subscribe' button
- #76726B — Muted Stone: Secondary text for dates, article tags, hero deck description, and inactive filters
- #F4F2EE — Subtle Chip: Fill color for tag pills, newsletter banner canvas, and inactive filter pills
- #EBE8E3 — Hairline Border: Very faint border for cards, input containers, and circular interactive arrow buttons

TYPOGRAPHY
Typeface Plus Jakarta Sans (or General Sans, Clash Grotesk, Manrope), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 28px heading, 96px display. Tracking -0.03em at display, -0.01em at headings, 0.01em at body. The typographic character is authoritative, intellectual, and sharply contemporary. Utilizing a modern geometric sans like Plus Jakarta Sans or General Sans, it provides high-contrast impact at massive sizes (96px) through tight letter-tracking, while remaining pristine and readable in micro metadata tags (11px). It evokes a Scandinavian design monograph or international architecture review.

GEOMETRY & SPACING
Corner radii — cards 14px, links 999px, inputs 6px, buttons 6px. Spacing on a 4px unit, 24px gaps, 64px between sections, 1360px container, comfortable density.

DEPTH
Depth is created entirely through planar layering without blur or drop shadows. Crisp white (#FFFFFF) cards rest flatly upon the slightly deeper off-white (#F8F7F4) canvas, demarcated purely by delicate 1px borders (#EBE8E3). Interactive states rely on subtle opacity shifts and border tone changes rather than physical Z-axis elevation.

IMAGERY
Photography follows an architectural and sculptural museum-catalogue aesthetic. Visuals feature studio workshops, raw plaster textures, ceramic objects, minimal furniture design, and thoughtful human interactions bathed in diffused, natural light. Artificial 3D renders, oversaturated stock imagery, or fluorescent commercial snapshots are strictly prohibited.

SIGNATURE DETAIL — the thing that makes this design itself
The monumental left-aligned 96px bold display headline sitting in direct tension with a single terracotta-accented active navigation state and asymmetric hero card layout. This establishes instant editorial authority without clutter. It is commonly misused by reducing the headline scale or scattering the terracotta hue across non-essential decorative elements, which dilutes the magazine-cover impact.

MUST
- Retain the warm off-white canvas (#F8F7F4) to preserve gallery-catalogue ambiance.
- Restrict the terracotta tone (#BD593D) strictly to functional interactive cues and brand accents.
- Ensure the hero title 'Magazine' is styled at least 80px to 96px with negative letter spacing.
- Keep card surfaces pure white (#FFFFFF) with a 1px hairline border (#EBE8E3) and 14px border radius.

AVOID
- Do not introduce standard blue, purple, or high-saturation primary colors.
- Do not apply heavy dark drop shadows; depth is strictly articulated via subtle borders and planar contrast.
- Never replace the modern geometric sans-serif with an ornamental serif or playful script.
- Do not crowd the display heading with graphics, illustrations, or background gradients.

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