Nordic Atelier

Nordic Atelier presents an ultra-clean, high-end e-commerce interface grounded on a warm off-white canvas (#F8F9FA). Visual hierarchy is driven by crisp typographic scales paired with a signature terracotta coral (#E2634C) that highlights primary CTAs, active pagination pips, and notification counters. High-contrast, beautifully shot editorial imagery commands the hero banner, while category and product displays utilize isolated studio furniture set over subtle radial neutral discs. Cards and inputs share a generous, hyper-smooth border radius ranging from 20px to 28px, eliminating hard digital edges. Micro-typography balances soft grey secondary metadata (#9E9E9E) with deep charcoal headings (#1E2022). A reader immediately notices the dramatic moody hero photography contrasting effortlessly against the bright, pillowy catalog below.

1 张设计参考图

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

完整提示词

Design a light-mode mobile app interface screen: scandinavian minimalism softened by warm terracotta accents, gentle pill corners, and atmospheric studio shadows.

LAYOUT
The mobile interface follows a tight 16px horizontal viewport margin with fluid vertical cadence. Top sticky navigation features a three-part floating layout (menu button, flexible search bar, cart). Below is an expansive hero banner carousel, followed by a horizontal category strip, leading directly into two-column horizontal snap-scroll product rails keyed with section headers.

PALETTE (use these exact hex values)
- #F8F9FA — Canvas Background: Global application viewport background backing all scrollable modules
- #FFFFFF — Surface Pure White: Background fill for floating search bar, round utility buttons, and product cards
- #E2634C — Terracotta Coral: Primary action button fill, badge highlights, active carousel pips, and notification badges
- #1E2022 — Charcoal Black: Primary headline typography, section titles, price indicators, and high-emphasis icons
- #75787E — Muted Slate: Secondary copy, hero subtitle descriptions, and search bar placeholder text
- #A0A3A8 — Soft Grey: Product category metadata, item counts, and inactive pagination indicators
- #EFF1F4 — Subtle Surface Neutral: Circular photographic background tint behind category items and soft badge surfaces
- #E8F4EC — Badge Tint Green: Background fill for 'New' product status tag
- #EFEAFC — Badge Tint Purple: Background fill for 'Popular' status tag
- #E6F0FA — Badge Tint Blue: Background fill for 'Sale' status tag

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, DM Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 17px subheading, 20px heading, 24px display. Tracking -0.015em at display, 0em at body. Plus Jakarta Sans delivers a clean, geometric warmth that mirrors modern Scandinavian industrial design. Its rounded terminals and open apertures feel approachable while maintaining editorial polish at 24px display sizes. If licensed alternatives are needed, Inter with adjusted tracking or DM Sans faithfully preserve the rhythm.

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

DEPTH
Depth is handled through surface layer separation and whisper-quiet ambient shadows (0 4px 14px rgba(0, 0, 0, 0.03)) rather than stacked borders. The crisp contrast between the #F8F9FA canvas and #FFFFFF cards creates natural visual relief. Products within cards feature natural photographic contact drop shadows that ground furniture realistically.

IMAGERY
Photography follows two distinct rules: Hero banners feature warm, moody ambient studio lighting with real environment props (books, greenery, tinted glass lamps). Product catalog cards feature meticulously isolated, transparent PNG furniture renders with natural, soft downward ground shadows against clinical white.

SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the juxtaposition of an atmospheric, dark-toned interior hero banner against pillowy, ultra-rounded (24px) white furniture cards, punctuated exclusively by warm terracotta pill CTAs and matching active state indicators.

MUST
- Use 999px full pill geometry for all inputs, micro-tags, and interactive action buttons.
- Pair rich dark editorial hero imagery with bright white product cards below.
- Keep card corner radii consistently soft between 22px and 26px.
- Isolate secondary product cutouts on pure white backgrounds with realistic drop shadows.

AVOID
- Never use sharp 0px or square corners on cards, buttons, or image wrappers.
- Do not apply heavy dark borders; separate cards via canvas tone (#F8F9FA) contrast.
- Avoid bright pure primary red or blue; use desaturated pastel tints for product badges.
- Do not place busy lifestyle images inside the catalog category or product 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.

在 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.