Spruce & Paws

The canvas rests on an ultra-soft off-white backdrop (#F9FAF9) that provides warmth without clinical starkness. Structural hierarchy is dictated by a deep spruce pine teal (#18413E), used deliberately for active state category pills, primary action indicators, and top-level brand iconography. Secondary content leans on warm biscuit amber (#DFA164) for playful callouts like hashtags and alert chips. Content modules are organized in airy horizontal tracks using rounded white cards (#FFFFFF) stamped with a 18px border-radius and ultra-soft ambient drop shadows (0 6px 20px rgba(24,65,62,0.06)). Typography relies on a friendly, rounded geometric sans-serif that balances modern legibility with approachable warmth. What captures the eye first is the full-width, 24px-radius hero card featuring rich macro pet photography overlaid with crisp white typography and a warm gold hashtag.

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 boutique pet commerce rendered with calm pine tones, soft pillowy cards, and warm amber accents.

LAYOUT
The mobile screen flows in a single-column modular stack framed by 20px horizontal margins. The rhythm cascades from a floating header to an immersive hero banner, into an edge-to-edge category circle rail, followed by staggered product and service carousels separated by utilitarian utility banners. Each block retains consistent 24px vertical separation.

PALETTE (use these exact hex values)
- #F9FAF9 — Canvas Ground: Global application page background behind scrollable cards and modules
- #FFFFFF — Card Surface: Elevated white surface for product tiles, service blocks, and header chrome
- #EEF4F1 — Soft Sage Tint: Background for inactive category circles, promo banner containers, and subtle badges
- #18413E — Spruce Teal: Primary brand identity, active category discs, iconography, and section titles
- #DFA164 — Biscuit Amber: Warm lifestyle accent for promo hashtags and secondary highlight typography
- #F39C12 — Alert Tangerine: Unread notification dot indicator on the top navigation bar
- #1E2524 — Charcoal Slate: Headings, card titles, and high-emphasis body text
- #7E8B87 — Muted Moss: Secondary product categories, shipping thresholds, and metadata labels

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Nunito Sans, DM Sans, Poppins), weights 400/500/600/700/800. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 17px subheading, 20px heading, 24px display. Tracking -0.02em for headings, 0 for labels. The typographic tone is warm, gentle, and reassuringly professional, perfectly embodied by geometric sans-serif curves with rounded terminals. It avoids the clinical feel of tech sans-serifs while retaining crisp legibility across small Brazilian Portuguese strings. For web or app distribution, Plus Jakarta Sans or Nunito Sans serve as direct, high-quality open-source equivalents.

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

DEPTH
Depth is handled strictly through soft, low-opacity ambient shadows (0 6px 16px rgba(24,65,62,0.05)) beneath pristine white tiles against the off-white canvas. There are no harsh borders or layered skeuomorphic bevels. Visual layering feels like physical cards laid gently upon a warm felt mat.

IMAGERY
Imagery combines high-end, tactile lifestyle studio photography of pets with crisp, shadowless 3D e-commerce cutouts. Animals are captured at eye-level with warm, natural lighting and soft focus backgrounds. Cluttered lifestyle backgrounds within small category tiles are prohibited.

SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the horizontal 'Species Pill Rail' composed of 56px soft-sage circular icon discs anchored by a single Spruce Teal active disc with a bottom indicator bar. It instantly communicates domain specificity and warmth while establishing a tactile, toy-like interactive paradigm. Breaking this circle into standard rectangular tabs destroys the friendly identity.

MUST
- Keep all card corners generously curved between 16px and 24px to preserve the friendly, safe pet-care atmosphere.
- Use Spruce Teal (#18413E) exclusively for intentional primary focus points and active category states.
- Isolate product packshots onto transparent backgrounds so card white surfaces remain pure and uncluttered.
- Pad horizontal scroll tracks with 20px edge insets so initial items align with header margins.

AVOID
- Never introduce harsh high-contrast black (#000000); always use charcoal slate (#1E2524) for dark text.
- Avoid sharp right-angled buttons or zero-radius cards anywhere in the interface.
- Do not saturate entire backgrounds with amber; reserve #DFA164 purely for secondary typographic accents.
- Do not use heavy drop shadows; keep elevation ambient and feathering soft (blur 12px to 20px).

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.