Artisanal Gelato Craft

The interface relies on a deliberate two-stage canvas: an atmospheric deep-cypress hero (#162f23) that grounds luscious food photography, sliding seamlessly into an immaculate porcelain-white sheet (#ffffff) anchored with 32px top radii. Colour functions strictly as brand architecture—deep forest green (#123524) replaces standard black for all typography, while a warm terracotta copper (#c89270) highlights authentic artisanal touches. Typography sets high-contrast geometric sans display titles beside an expressive italic serif accent for temporal cues like 'Daily'. Spacing follows an 8px grid with generous 24px horizontal gutters and 20px card inner padding. The first element to command attention is the high-fidelity macro photograph of dual-textured gelato in a paper cup, counterbalanced by the deep green pill CTA button.

1 design references

Prompt metadata
Shared by	@Devault
Model	GPT Image 2.5
Category	Mobile interfaces
Dataset	stretchcloud · awesome-gpt-image-prompt-2.5

The prompt

Design a light-mode mobile app interface screen: tactile warmth of milanese confectionery framed by deep cypress green and crisp porcelain sheets.

LAYOUT
The viewport begins with an atmospheric dark hero section occupying roughly 45% of the initial mobile fold, placing typography on the left and a cropped product hero on the right. Below, a full-width porcelain sheet smoothly cuts into the dark background, laying out two-column product vignettes and split storytelling cards. Sections alternate between textual left-alignments and photographic pairings with consistent 32px vertical pacing.

PALETTE (use these exact hex values)
- #162f23 — Cypress Dark: Hero background canvas and dark header field
- #123524 — Forest Primary: Primary headings, active icon glyphs, interactive text links, and dark pill backgrounds
- #c89270 — Copper Terracotta: Editorial accent for overline badges and italicized display words
- #ffffff — Porcelain White: Main bottom sheet surface and high-contrast hero typography
- #ebf3ef — Sage Mist: Background fill for circular feature icon chips
- #5c6d66 — Eucalyptus Slate: Secondary descriptive body copy and subheadings
- #f7f9f8 — Soft Card Field: Surface tint for content grouping cards and background contrast

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Outfit,DM Sans,Inter), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px subheading, 24px heading, 38px display. Tracking -0.02em on headings, 0.05em on caps. The typographic pairing delivers refined Italian hospitality: modern, clean geometric sans provides functional mobile legibility, while warm copper italic serifs inject artisanal soul. The system relies on weights 500 and 700 to establish crisp hierarchy without needing loud font scales.

GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 12px, buttons 999px. Spacing on a 8px unit, 16px gaps, 36px between sections, 390px container, comfortable density.

DEPTH
Depth is achieved through physical sheet layering rather than synthetic drop shadows. The porcelain white content block physically slides over the dark forest hero using a 32px corner radius, while photography relies on internal textural chiaroscuro.

IMAGERY
Photography focuses on tactile, highly textured food styling—soft swirls of cold gelato, rough biscuit edges, and condensation on paper cups. Atmospheric architectural photography depicts warmly illuminated nighttime Milanese facades. Bright cartoonish illustrations or sterile packshots are strictly forbidden.

SIGNATURE DETAIL — the thing that makes this design itself
The signature gesture is the transition between the deep cypress photographic canopy (#162f23) and the porcelain sheet (#ffffff) with 32px top corners, punctuated by a dual-font headline featuring an italic terracotta serif accent word. Applying this requires balancing the dark natural upper canvas with bright surgical white below; misusing it by adding a drop shadow or harsh square corners destroys the organic sheet aesthetic.

MUST
- Use deep forest green #123524 instead of neutral grey or pure black for all standard dark text.
- Pair clean geometric sans titles with occasional italic serif words (#c89270) to evoke artisan heritage.
- Curved bottom sheets must use an exaggerated 32px top-corner radius where overlapping hero backgrounds.
- Set feature badges into light sage circular discs (#ebf3ef) with exactly 44px outer diameters.

AVOID
- Do not use sharp 0px or small 4px corners on media cards; maintain 20px to 24px radii.
- Never replace the terracotta copper accent (#c89270) with bright saturated red or yellow.
- Avoid solid black backgrounds; the dark canvas must always retain an organic olive/cypress cast (#162f23).
- Do not drop shadows under content cards—differentiate blocks with negative space and subtle #f7f9f8 fills.

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

Mobile interfacesDesign reference

Abyssal Depth

The screen is grounded in an ultra-dark navy canvas (#040a14) that blends directly into deep-sea hero imagery without harsh cutoffs. Vibrant cyan (#4de1fc) and saturated royal blue (#1b4bf5) provide directional illumination, serving both as high-intent callouts and luminous gradients across interactive elements. Typography is clean and geometric, relying on high-contrast white (#ffffff) for display statements and muted slate (#8fa2be) for logistical information. Spacing uses an 8px grid with generous vertical cadence, accented by cards and pills with generous corner radii (ranging from 16px to 24px). The immediate visual hook is the cinematic submarine emerging from caustic ocean beams, anchored by a vibrant gradient CTA button with a seamless directional arrow.

Mobile interfacesDesign reference

Abyssal Sentinel

The layout splits between a turbulent, full-bleed oceanic photo canvas at the top and an overlapping high-radius clinical white card sheet (#FFFFFF) rising from the lower viewport. Color establishes an immediate cognitive pivot: the brooding marine navy (#10232B) evokes volatile real-world chaos, while soft glacial mint (#BDE4E0) and deep abyssal teal (#0E2A32) communicate calculated technological control. Typography relies on a geometric neo-grotesk with strict hierarchical tracking: loose +1.5px tracking on 11px uppercase category tags, contrasting against tightly-tracked 30px display headings. Layout rhythms alternate between fluid circular pill shapes (radius 999px) and architectural rounded hexagons for photo masking. The eye is first arrested by the stark white display type across the ocean storm, immediately pulled downward by the glowing mint CTA pill into the clean corporate interface below.

Mobile interfacesDesign reference

Adaptive Motion

The interface is grounded on a warm off-white canvas (#F8F9FB) that allows crisp white rounded containers (#FFFFFF) to float with near-weightless elevation. Primary interaction hinges on a spirited coral red (#F05D5E), which drives the hero CTA, notification ping, ring chart, and selective typographic emphasis on 'moves.'. Typography relies on a modern geometric sans-serif, using weight modulation (Regular 400 to Extrabold 800) rather than scale alone to establish hierarchy. Layout modules are organized into distinct cards with generous 24px corner radii, giving the entire viewport an approachable, pebble-soft hand-feel. A user immediately notices the tactile juxtaposition between the rendered metallic fitness equipment angled against a pastel blush circle (#FAD5D5) and the bright coral progress arc at 72% below.

Mobile interfacesDesign reference

Aero Coastal

The canvas is structured around an ultra-clean white backdrop (#FFFFFF) framed by an expansive 36px-radius hero image tile depicting a sunlit alpine coast. Color is strictly bifurcated: visual drama belongs to natural photography and subtle pastel surface cards (#FFF1EE, #EDF5FF, #F3F0FF, #EEF9F6), while operational cues use vivid coral (#EE6C58) and sky blue (#3B82F6). Typography is anchored in crisp modern grotesque letterforms, employing stacked 38px display titles over landscape photos and 14px bold headers inside micro-cards. Component shapes maintain generous curvature, from 999px pills to 24px rounded service modules. A viewer immediately registers the high-contrast white typographic stack against the lake landscape before flowing downward into pastel feature tiles.