Mindful Canopy

This interface pairs an ultra-clean, warm ivory canvas (#FAFAF9) with a deep, authoritative emerald green summary card (#0E483B). The top header balances gentle editorial greeting type with a cut-out photographic portrait framed against a soft sage arch (#E4EFEA). Information hierarchy relies on high-contrast emerald anchoring the primary dashboard metrics, followed by whisper-soft border treatments (#EBEBE8) for secondary quick action tiles. Typography is clean and rounded-geometric with distinct optical weights—thin for greetings ('Good morning,') and bold-cut for names ('Alex'). Subtle tinted circular gauge rings in mint (#4ADE80) and cyan (#38BDF8) translate multi-modal tracking data directly over dark teal surfaces. Radii are generously rounded at 24px for macro cards and 16px for utility action buttons, creating an approachable, organic cadence.

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: forest canopy calm meets soft tactile wellness metrics in balanced daylight.

LAYOUT
The mobile screen follows a structured single-column vertical stack with 20px horizontal margins. The top region features utility navigation buttons and an asymmetrical hero greeting flanked by an arched portrait. The center is anchored by the solid 24px rounded teal progress card, directly followed by a 4-column grid of equal-width quick action tiles, transitioning into structured active challenge rows below.

PALETTE (use these exact hex values)
- #FAFAF9 — Canvas Ground: Primary light background behind page sections, headers, and quick actions.
- #0E483B — Deep Forest Teal: Hero metrics dashboard card surface providing high-contrast focal weight.
- #FFFFFF — Card Surface White: Floating action cards, circular navigation icon bases, and progress card backdrop.
- #4ADE80 — Leaf Green Accent: Active progress rings, status badges, and decorative leaf icon beside username.
- #38BDF8 — Serene Aqua: Progress metric ring for water intake tracking on dark surface.
- #E4EFEA — Soft Sage Backdrop: Organic arched graphic backdrop layered behind the hero photographic cut-out.
- #19221E — Charcoal Ink: Primary heading typography, user name, and bold section labels.
- #76827D — Muted Slate: Secondary subtitles, measurement targets, and inactive metric fractions.
- #EBECE8 — Card Border Tint: Very faint 1px border stroke on quick action tiles and lower cards.

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Outfit, DM Sans, Inter), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 18px subheading, 20px heading, 34px display. Tracking -0.02em on headings, 0em on body. The typography is humanized geometric sans-serif (typified by Plus Jakarta Sans), pairing geometric precision with soft, warm terminals. The stark weight contrast between the whisper-light greeting and the grounded bold display name injects an editorial magazine sensibility into a health dashboard. For licensing or web substitution, DM Sans or Outfit serve as excellent open-source alternatives.

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

DEPTH
Depth is handled predominantly through surface tone shifts and crisp separation rather than layered shadows. The hero teal card floats flatly against the warm canvas, whereas top circular navigation buttons utilize a nearly imperceptible diffuse ambient blur (0 4px 14px rgba(0,0,0,0.04)). The bottom white cards rely on delicate 1px border strokes (#EBECE8) to delineate boundaries.

IMAGERY
Photography consists of warm, peaceful lifestyle cut-outs featuring natural lighting, closed eyes, and serene mindfulness expressions. Subjects are accompanied by biological accents such as monstera leaves or balanced zen stones, silhouette-cropped and integrated into muted geometric backdrops (#E4EFEA). High-contrast studio flash or chaotic fitness imagery is strictly avoided.

SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the contrast between the deep organic canopy card (#0E483B) with glowing neon-soft progress rings, and the warm, airy daylight greeting header beside an arched lifestyle cut-out. Losing this rich forest card reduces the interface to a generic pale fitness tracker, while omitting the arched portrait eliminates its human, mindful character.

MUST
- Use deep forest teal (#0E483B) exclusively on the focal progress card to anchor visual weight.
- Pair a lighter font weight greeting (400) directly above a heavy bold name (700).
- Maintain generous 24px corner radii on major card components and 16px on quick action tiles.
- Keep quick action icon backgrounds completely transparent inside their bordered white containers.

AVOID
- Do not use sharp 0px or 4px radii anywhere; every corner must feel smooth and approachable.
- Do not add heavy black drop shadows; keep elevation gentle with 4% opacity or pure border strokes.
- Do not color quick action cards with dark teal; reserve deep green strictly for the hero dashboard.
- Do not crowd the 4-column metric layout; ensure labels remain legible under 54px rings.

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.