Artisan Hearth

The canvas rests on a soft, warm flour-ivory background (#F9F6F0) that rejects clinical sterile whites in favor of organic warmth. Color is used strictly for contextual wayfinding: each modular card employs a distinct muted pastel tint (sage #EBF2EB, lilac #EFEBF4, and wheat #F7ECE1) matched to natural culinary ingredients. Typography relies on a high-contrast editorial serif for headlines paired with an understated neutral sans-serif for explanatory microcopy. Cards adopt generous 20px rounded corners with organic cut-out food imagery bleeding organically over boundaries. An unmistakable burnt terracotta pill button (#D46850) provides tactile call-to-action anchor points. The resulting mobile layout balances dramatic macro hero photography with intimate editorial product cards.

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 editorial craft pairing flour-dusted warmth with airy pastel card vignettes.

LAYOUT
The layout uses a 390px mobile viewport with an unbordered header, flowing directly into a cinematic full-bleed hero banner that anchors the narrative. Below the hero, the page transitions into a balanced 2-column card grid with uniform 14px gutters and 16px outer margins. Each card maintains an asymmetrical internal rhythm, placing text and micro-actions on the left while food cutouts bleed off the right boundary.

PALETTE (use these exact hex values)
- #F9F6F0 — Flour Cream: Primary screen backdrop across entire viewport behind hero and card grid
- #D46850 — Terracotta Crust: Hero primary button, logo badge, and primary action callout pills
- #1C1816 — Charcoal Hearth: Card headings, navigation label, and high-emphasis editorial titles
- #5C5550 — Muted Baker Grey: Card body copy, descriptions, and metadata subtitles
- #EFEBF4 — Lavender Dust: Card background for personnel/baker profile spotlight
- #F7ECE1 — Wheat Husk: Card background for educational guides and grain topics
- #EBF2EB — Herbal Sage: Card background for sourcing and fresh ingredient features
- #FFFFFF — Pure White: Hero text overlay and hamburger menu button background

TYPOGRAPHY
Typeface Playfair Display (or Canela, DM Serif Display, Ogg), weights 600/700. Sizes 10px caption, 12px body-sm, 14px body, 16px subheading, 18px heading, 22px heading-lg, 36px display. Tracking -0.015em at display, -0.01em at heading. The typography balances heritage storytelling with modern editorial clarity through a pairing of Playfair Display and Plus Jakarta Sans. The display serif carries literary warmth and artisanal sophistication, evoking cookbook covers and independent culinary journals. Clean sans microcopy ensures immediate utility and legible mobile scannability without diluting the handmade charm.

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

DEPTH
Depth is communicated purely through planar layering and tonal tint contrast rather than drop shadows. The hero image establishes physical presence via full-bleed tactile photography, while secondary cards sit flat against the flour-cream canvas with soft, color-tinted fills. The top menu button employs a hairline border and barely perceptible ambient diffusion rather than cast elevation.

IMAGERY
Photography is tactile, warm-toned, and artisanal, showing human craft like flour-dusted hands shaping dough and crisp open-crumb bread. Card images are isolated cutouts (raw wheat stalk, baker profile, fresh botanical leaf, cucumber toast) anchored to card perimeters. High-contrast clinical studio shots or hyper-saturated fast-food styling would break the rustic editorial ethos.

SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the paired pastel card grid featuring ingredient cutouts anchored seamlessly along card borders alongside delicate serif headlines. Removing the distinct tinted surfaces (#F7ECE1, #EFEBF4, #EBF2EB) and perimeter-bleeding botanical/culinary photography would instantly collapse this into a generic e-commerce app.

MUST
- Tint card backgrounds with delicate pastel-natural tones that complement the food imagery.
- Use warm, high-contrast serif typography for headings to evoke bakery heritage.
- Maintain generous 20px corner radii on all internal grid cards.
- Position cutout ingredient photography flush against the bottom and right card boundaries.

AVOID
- Never use pure stark white (#FFFFFF) for the primary screen background.
- Avoid heavy dropshadows; cards should feel flat, quiet, and tint-separated.
- Do not use cold blue or neon accents that clash with artisanal bakery warmth.
- Never crowd text over the cutout imagery within small 2-column cards.

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