Terracotta Nordique

This interface pairs an expansive, warm off-white canvas (#F8F7F5) with deliberate, high-impact terracotta vermilion accents (#BD4B37). The hierarchy relies on sharp typographic weight contrast rather than ornamental containers, allowing pure product photography on neutral cutouts to dominate. Subtle structural divisions use 1px borders (#EBEAE6) and soft 6px radii to maintain a restrained editorial presence. Spacing is airy, employing generous vertical section gaps of 80px to 100px that let items breathe. The single standout hue is reserved strictly for primary interactive states, discount callouts, and key promotional feature blocks. A reader immediately notices the warm studio hero composition anchored by the terracotta dot signature in the brand wordmark.

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: scandinavian functionalism grounded by earthen terracotta accents and warm architectural whitespace.

LAYOUT
The page structure employs a strict 12-column rhythm bounded to a maximum width of 1320px with generous margins. A slim utility announcement sits atop the main header, flowing directly into an asymmetric two-panel hero section. Below, a bento-style feature mosaic shifts the rhythm before giving way to a muted brand logo bar and an orderly four-column product grid.

PALETTE (use these exact hex values)
- #F8F7F5 — Canvas Sand: Primary page background providing a warm, non-glare editorial base.
- #FFFFFF — Surface Pure White: Product card cards, dropdowns, and circular slider control backgrounds.
- #BD4B37 — Brand Terracotta: Primary CTAs, notification badges, active tab underlines, and highlight promo cards.
- #1A1A1A — Deep Obsidian: Headings, logo mark, primary prices, and high-emphasis labels.
- #767676 — Slate Muted: Body copy, struck-through regular prices, breadcrumb navigation, and category tags.
- #EBEAE6 — Earthen Border: Product card boundaries, vertical header dividers, and grid lines.
- #407153 — Badge Forest Green: Small status pills indicating new product arrivals.
- #E5A93C — Star Ochre: Star rating review glyphs on product listing cards.

TYPOGRAPHY
Typeface Jost (or DM Sans, Plus Jakarta Sans, Futura), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 32px heading, 48px display. Tracking -0.02em for headings, 0.08em for uppercase metadata. The typographic tone is architectural, rational, and modern, anchored by a geometric sans-serif similar to Jost or DM Sans. Strict hierarchy balances confident 48px bold headlines with delicate 11px uppercase category badges spaced at 0.12em. This pairing conveys quiet luxury, functional utility, and contemporary design rigor without needing decorative serif flourishes.

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

DEPTH
Depth is communicated almost exclusively through planar layering and tonal surface contrast rather than physical drop shadows. White cards sit cleanly upon a warmer #F8F7F5 foundation with razor-thin 1px borders (#EBEAE6). Where elevation is required, such as circular pagination arrow buttons, an imperceptible 0 4px 12px rgba(0,0,0,0.06) blur is utilized.

IMAGERY
Photography emphasizes Nordic minimalism: natural daylight studio lighting, clean cut-out items on uniform off-white backdrops, and muted apparel colorways. Models look candid, approachable, and refined, wearing contemporary casual streetwear or tailored separates. Overly dramatic flash photography, chaotic outdoor locations, or hyper-saturated lifestyle compositions are strictly prohibited.

SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the 'Terracotta Punctuation'—a tiny terracotta period (#BD4B37) terminating the brand wordmark that cascades into active pagination rings, category indicators, and singular feature blocks. It gives an otherwise disciplined, monochromatic Scandinavian layout an identifiable designer signature. It must be used sparingly; applying it to secondary body copy or multiple competing buttons destroys its role as a beacon.

MUST
- Keep all photography cut out on pure neutral or daylight studio backgrounds.
- Restrict the terracotta red (#BD4B37) strictly to high-conversion focal points.
- Preserve open vertical spacing of at least 80px between major merchandising sections.
- Use geometric sans-serif typography with restrained 11px uppercase tracking for metadata.

AVOID
- Do not introduce pure black backgrounds or harsh saturated neon accent colors.
- Never make cards or buttons pill-shaped except for the carousel navigation circles.
- Avoid heavy drop shadows; rely on 1px subtle surface borders for separation.
- Do not remove the distinctive terracotta dot from the primary brand title.

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