Terracotta Horizon

The canvas is anchored on a near-white background (#FFFFFF to #FBFBFC) framed by generous internal margins and delicate card delineations. Color functions as intentional directional signage rather than decorative sprawl: a signature warm terracotta (#C25A45) commands primary attention across action buttons and uppercase eyebrow text, while slate blue (#4A6FA5) and sage green (#87A99C) provide secondary contextual grouping. Typography relies on an approachable geometric grotesque with tight display tracking and generous body leading (1.5). Cards and surface containers utilize modest border-radii (12px to 16px) with ultra-subtle hairline borders and minimal soft shadow offset (0 4px 20px rgba(0,0,0,0.03)). A viewer immediately registers the massive 64px display headline juxtaposed with the whimsical editorial vector illustration of a figure riding a rocket.

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: editorial pastel warmth meets soft aerospace optimism on an airy modular canvas.

LAYOUT
The page follows an asymmetric top-heavy hero layout that transitions into an orderly 3-column data grid. Left column dominates with strong typographic hierarchy (eyebrow, massive title, descriptive copy, CTAs, feature pills), while the right column breathes through a large illustration bleeding past the container edge. Below the fold, a three-column KPI card rack provides balanced analytical anchoring before concluding with a unified full-width subscription utility bar.

PALETTE (use these exact hex values)
- #FFFFFF — Pure Canvas: main page background and top-level card surface fill
- #F8FAFC — Muted Panel: background fill for nested input containers and subtle metric card backgrounds
- #C25A45 — Terracotta Flame: primary call-to-action fills, brand icon mark, and uppercase hero kicker typography
- #4A6FA5 — Astronaut Blue: secondary action button fill on newsletter subscribe and metric graphic accents
- #7CA693 — Sage Herb: soft nature accent for sparklines, micro-badges, and illustration shading
- #FBEBE7 — Warm Peach Tint: icon badge container fill for terracotta-themed metric items
- #192231 — Deep Space Charcoal: display headlines, card numerical metrics, and primary interactive link labels
- #697586 — Muted Slate: subtitles, metadata descriptions, and input placeholder typography
- #EEF2F6 — Subtle Hairline: perimeter divider and card border line throughout layout modules

TYPOGRAPHY
Typeface Plus Jakarta Sans (or DM Sans, Manrope, Inter), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 16px body, 20px subheading, 28px heading, 64px display. Tracking -0.03em at display, +0.06em at uppercase kicker. The typographic tone is forward-looking yet approachable, balancing industrial precision with friendly clarity. Plus Jakarta Sans (or DM Sans) brings clean circular geometry to the massive 64px display titles while maintaining legible structure in dense metric numbers. The wide-tracked uppercase eyebrow ('EXPLORE WITHOUT LIMITS') sets an editorial cadence that grounds the whimsical headline.

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

DEPTH
Elevation is achieved through boundary lines rather than dramatic cast shadows. Surface boundaries are defined by delicate 1px solid hairline borders (#EEF2F6) over crisp white cards, backed only by a vanishingly subtle ambient shadow (0 4px 16px rgba(25, 34, 49, 0.02)). Floating geometric dot matrices and soft background blobs create atmospheric depth behind vector elements without adding drop shadows.

IMAGERY
The visual anchor is a whimsical, narrative-driven vector illustration featuring a stylized rocket launch with organic leafy foliage and a rider in mid-flight. Color palette in artwork strictly aligns with the UI: muted terracotta, eucalyptus green, pale sky blue, and cloud creams. Hyper-realistic photography, glossy 3D renders, or abrasive high-contrast neon graphics are completely off-brand.

SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of the terracotta eyebrow and button color (#C25A45) juxtaposed against soft organic foliage and an aerospace rocket illustration. It reconciles technical software aesthetics with warm, editorial bookishness. It is commonly misused by turning the terracotta into an aggressive high-saturation red or pairing it with generic corporate isometric vector art.

MUST
- Pair the terracotta (#C25A45) CTA color strictly with clean white text for optimal contrast.
- Maintain generous padding (minimum 48px) separating the hero headline lockup from metric cards.
- Use soft tint circles (#FBEBE7, #EEF2F6) behind monochromatic line icons to reinforce hierarchy.
- Keep display typography tight (-0.03em tracking) and headlines stacked across multiple short lines.

AVOID
- Do not apply heavy drop shadows; cards must rely on 1px subtle borders (#EEF2F6) for definition.
- Never use generic 3D rendered graphics; imagery must remain soft-shaded vector editorial illustrations.
- Do not color the newsletter subscribe button terracotta; reserve that hue for primary conversion paths.
- Avoid pill-shaped buttons; all rectangular controls must strictly honor the 8px corner radius.

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