Botanical Editorial

Set on a delicate off-white porcelain canvas (#F7F8F9), the interface marries an editorial serif masthead with bespoke visual data. Hierarchy relies on a commanding deep ink navy (#0D2040) for headings, balanced by natural botanical accents like sage green (#4E8D66) and soft pastel tints. Key statistics and historical volume bars use a muted celadon wash (#A8CEBA) behind photorealistic glass canning jars overflowing with blueberries. Spacing is comfortable and rhythmic, using 16px to 24px internal card padding and generous 24px outer margins. Cards feature smooth 24px corners with barely-there hairline borders or float on crisp white surfaces (#FFFFFF). The immediate focal anchor is the asymmetric top hero, where an elevated ceramic bowl cuts smoothly across the screen edge.

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: a sunlit apothecary journal blending tactile food photography with restrained neo-classical data visualization.

LAYOUT
The page follows a single-column mobile scroll structured into distinct narrative chapters. It opens with an asymmetrical hero section balancing a typographic block on the left against a circular food bowl bleeding off the top right. A standalone full-width white card houses the photographic bar chart and filter pill. The lower half features a section heading leading into a balanced 2x2 grid of benefit cards with colored badges.

PALETTE (use these exact hex values)
- #F7F8F9 — Porcelain Canvas: ambient background for the mobile screen surface behind cards
- #FFFFFF — Pure White: elevated card containers and floating circular icon buttons
- #0D2040 — Deep Midnight Navy: primary editorial titles, section headings, and emphasis metrics
- #4E8D66 — Orchard Leaf Green: hero subheading, chart highlights, and primary health iconography
- #A8CEBA — Muted Celadon: volume bar fills behind jar graphics in data visualization
- #616A75 — Heather Slate: body copy, unit labels, year markers, and descriptive notes
- #9B8DBF — Lavender Mist: fiber benefit icon circle and subtle background tint
- #76A2D6 — Cornflower Blue: vitamin c metric callouts and icon badge background
- #F07761 — Persimmon Coral: manganese icon circular badge and associated cardiovascular benefit card

TYPOGRAPHY
Typeface Recoleta (or Fraunces, Playfair Display, Cooper Light), weights 600/700. Sizes 10px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 20px heading, 38px display. Tracking -0.02em at display, -0.01em at headings. The voice is that of a sophisticated culinary and wellness monograph—scholarly yet tactile. The headline serif exhibits plump teardrop terminals and sharp bracketed serifs that evoke organic botanical prints and heritage packaging. For licensing constraints, Fraunces or Playfair Display will closely mirror the editorial gravitas of Recoleta.

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

DEPTH
Depth is handled predominantly through crisp white card surfaces layered over a slightly cooler off-white base canvas. Subtle, diffused drop shadows (0 6px 20px rgba(13,32,64,0.04)) are reserved for top circular icon buttons and floating photographic elements. Visual layering is reinforced by physical overlap, such as berries spilling forward over glass rims and chart baselines.

IMAGERY
Photography consists of hyper-crisp, studio-lit natural produce in natural stoneware ceramics and vintage wire-bale glass jars. Soft, natural daylight casting gentle directional contact shadows replaces artificial gradients or digital cutouts. Stock flat illustrations, abstract vectors, or 3D plastic renders are completely off-brand.

SIGNATURE DETAIL — the thing that makes this design itself
The integrated photographic-bar-chart hybrid, where photorealistic glass preserve jars progressively fill and spill over alongside pastel volume pillars. This turns an otherwise dry agricultural consumption dataset into an appetizing visual narrative. It is misused if replaced with sterile SVG vector bars or if jar proportions distort the actual data scale.

MUST
- Anchor charts with real physical object metaphors, like glass preserve jars reflecting realistic light.
- Retain the high-contrast serif typography for all section titles to preserve the editorial magazine feel.
- Use soft pastel background tints on card tiles that harmonize with their respective circular icon badge.
- Bleed the primary hero photograph beyond the top right viewport edge for dynamic asymmetry.

AVOID
- Never replace the editorial serif headings with neutral geometric sans-serif typefaces.
- Do not use harsh black borders or drop shadows with opacities exceeding 8 percent.
- Avoid standard flat vector rectangle bars; always incorporate the physical blueberry jar collage.
- Never saturate tile background fills; maintain 90 to 95 percent lightness tints.

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