Warm Terracotta Archive

The layout pairs a monolithic dark charcoal navigation rail (#12151a) with an expansive, warm linen canvas (#f7f4ee) that grounds the entire content area. Terracotta rust (#b84334) serves strictly as the high-intent accent, deployed on primary action buttons, active navigation pills, and focal vector graphic shapes. Typography relies on a clean, humanist geometric sans paired with a distinct handwritten script accent for editorial charm in key promotional graphics. Cards maintain a clean white ground (#ffffff) with subtle 1px structural borders (#e7e2d8) and 12px corner rounding, letting clean vector illustrations anchor every cell. Spacing is rhythmic and disciplined, using 24px grid gutters and 16px to 24px card padding. Readers immediately register the split-personality contrast between the sleek, dark productivity sidebar and the inviting, warm paper-toned editorial catalog.

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: warm parchment gallery balancing deep charcoal navigation with editorial terracotta accents and vector vignettes.

LAYOUT
A two-pane structure composed of a fixed 230px left obsidian sidebar alongside a responsive warm canvas. The main canvas stacks vertically: a utility search and user actions header, an expressive hero billboard, a row of three micro-value proposition cards, a horizontal category filter row with sorting dropdowns, and an expansive four-column grid of preview cards.

PALETTE (use these exact hex values)
- #12151a — Obsidian Sidebar: Full-height vertical app navigation background providing high contrast against the content canvas.
- #f7f4ee — Warm Linen Canvas: Dominant background canvas across all workspace pages, providing a soft paper-like tone.
- #ffffff — Pure White Card: Background surface for template preview cards, search inputs, and popover menus.
- #b84334 — Terracotta Primary: Primary action buttons, active tab indicators, promotional badges, and highlight vector fills.
- #2a1b1b — Terracotta Muted: Subtle tint background for selected navigation items inside the dark sidebar rail.
- #16191f — Charcoal Ink: Primary headings, titles, active category pill text, and card headlines.
- #e7e2d8 — Subtle Sand Border: Hairline dividers, input outlines, and preview card bounding strokes.
- #767982 — Pewter Grey Text: Inactive sidebar items, card category subtitles, secondary metadata, and icon strokes.

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 28px heading, 36px display. Tracking -0.02em at headings, 0 at body. The typographic tone balances contemporary SaaS functionalism with modern boutique publishing. Plus Jakarta Sans (or Inter) provides absolute clarity, dense numeric readouts, and architectural structure in navigation and lists. A discreet touch of warm cursive script introduces a handcrafted, artisanal touch to promotional drop badges.

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

DEPTH
Depth is handled entirely flat and structural, relying on high-contrast surface color stepping rather than blurred shadows. Canvas elements sit cleanly on #f7f4ee, while white interactive tiles use a subtle 1px border (#e7e2d8) to delineate planes. Where elevation is required, an ultra-faint 0 2px 4px rgba(0,0,0,0.03) shadow maintains the crisp, print-like discipline.

IMAGERY
Vector-based editorial spot illustrations featuring corporate business characters drawn in flat, modernist silhouettes with solid terracotta, navy, dusty blue, and sage tones. Photography is completely avoided in catalog cards in favor of clean graphic mockups. Photographic assets are restricted solely to small user profile avatars.

SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an ink-black obsidian control column against a warm, parchment-toned gallery punctuated by muted terracotta (#b84334) accents and rounded archvector graphics. This creates the feel of an upscale design agency's curated vault rather than a sterile software repository. Misusing it by shifting the canvas to cold hex white breaks the boutique atmosphere immediately.

MUST
- Keep the canvas strictly on #f7f4ee to preserve the warm editorial, paper-like atmosphere.
- Reserve the terracotta red (#b84334) strictly for primary triggers and deliberate visual anchors.
- Ensure all card frames use a crisp 1px border (#e7e2d8) instead of fuzzy, dark box shadows.
- Maintain high typography contrast: bold headings in #16191f paired with clean #767982 captions.

AVOID
- Do not switch the main canvas to stark cool white (#ffffff); it destroys the warm editorial tone.
- Avoid multi-colored neon CTA buttons; stick exclusively to the signature terracotta #b84334.
- Do not introduce heavy multi-layered box shadows on content cards.
- Never use dark sidebar themes on the main canvas; the split contrast is foundational.

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.