Verdant Atelier

Verdant Atelier is an airy, light-mode mobile commerce interface built on a pristine pure white (#FFFFFF) background populated by softly tinted sage-stone (#EFF2EE) surface cards. Hierarchy is established through extreme contrast between crisp utilitarian sans-serif UI elements and striking high-contrast editorial serifs used for promotional percentages. Functional color is rigorously restrained: a single deep spruce green (#314E3F) anchors all key conversion actions, while muted moss (#6C835A) handles badge accents. Structural cards favor generous 20px corner radii, paired with clean, zero-shadow flat planes that rely on tinted containers rather than elevation to separate visual depth. A viewer immediately registers the tranquil daylight studio product photography balanced against sharp display type.

1 张设计参考图

提示词信息
分享者	@Devault
模型	GPT Image 2.5
分类	移动端界面
数据集	stretchcloud · awesome-gpt-image-prompt-2.5

完整提示词

Design a light-mode mobile app interface screen: sunlit scandinavian homeware gallery framed in muted botanical greens and crisp editorial typography.

LAYOUT
The mobile layout adheres to a single-column stacked hierarchy on a 390px viewport. A minimal top navigation bar leads into an expansive promotional hero card with pagination dots. Directly beneath sits a three-column horizontal category shelf, followed by a compact horizontal promo banner and a cleanly anchored section header for upcoming product grids.

PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Screen background canvas providing maximum negative space and daylight feel
- #EFF2EE — Sage Mist: Background fill for promotional hero banners and category card containers
- #314E3F — Spruce Green: Primary interactive button fill and active pagination indicator
- #191E1B — Deep Forest: High-contrast headings, promotional discount serifs, and primary labels
- #6B756F — Stone Slate: Subtitles, secondary descriptions, and uppercase eyebrow tags
- #E2EAE3 — Pale Celadon: Background fill for circular arrow action buttons inside category cards
- #6C835A — Olive Leaf: Notification badge fill for active shopping cart count
- #D3DCD5 — Dot Inactive: Unselected dots in the promotional banner pagination track

TYPOGRAPHY
Typeface Playfair Display (or Cormorant Garamond, Freight Text, Bogart), weights 500/600. Sizes 11px caption, 13px body-sm, 15px body, 17px subheading, 19px heading, 34px display. Tracking -0.015em. The typography pairs the editorial elegance of high-contrast modern serif headlines with the quiet utility of geometric grotesque sans-serifs. The serif imparts a sense of crafted atelier luxury suited for interior styling and botanical living, while the sans-serif ensures legible catalog browsing. Cormorant Garamond or Playfair Display are ideal drop-in open-source pairings for the headline display roles.

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

DEPTH
Depth is communicated purely through plane tinting rather than drop shadows. Flat surfaces in Sage Mist (#EFF2EE) float against the pristine Pure White (#FFFFFF) canvas. Interactive micro-elements use slightly differentiated tints (such as #E2EAE3 for circular icon bases) to indicate tap targets without simulating 3D lighting.

IMAGERY
Photography follows an organic Scandinavian studio aesthetic: diffused natural daylight, soft cast shadows, ceramic stoneware, and clean foliage. Products are styled in calm compositions with neutral textured walls and pale wood. Lifestyle shots with chaotic backgrounds, dark mood lighting, or bright digital saturation are strictly forbidden.

SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of the bold, editorial serif 'Save 50%' floating inside a softly rounded Sage Mist container (#EFF2EE) alongside a solid deep spruce (#314E3F) CTA. This establishes a high-end magazine feel on a standard mobile grid. Misuse occurs when standard bold sans-serifs replace the display serif or when high-saturation red discount badges are introduced.

MUST
- Pair high-contrast transitional serif display typography with neutral sans-serif body copy.
- Use tinted light-sage (#EFF2EE) surfaces to delineate cards instead of adding drop shadows.
- Maintain generous 20px card border radii for a soft, architectural visual rhythm.
- Apply wide letter-spacing (0.08em) to uppercase category eyebrows such as 'SUMMER SALE'.

AVOID
- Never use harsh black (#000000); use deep charcoal forest (#191E1B) for text.
- Do not apply drop shadows or heavy blur elevation to promo cards.
- Avoid high-saturation warm colors (bright reds, oranges) for discount announcements.
- Never use serif typography for small UI labels, buttons, or metadata.

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.

在 DraPub 中尝试

看看同一视觉方向里的其他提示词。

返回提示词画廊

移动端界面设计参考

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.

移动端界面设计参考

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.

移动端界面设计参考

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.

移动端界面设计参考

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.