Cobalt Atelier

The screen uses a cool-tinted off-white canvas at #F4F6FB upon which pure white #FFFFFF cards float with generous 24px corner radiuses. Visual drama is established immediately at the top by a dark 24px-radius photographic hero card showcasing twilight canal reflections beneath clean white type. Color acts strictly as interactive guidance or tonal categorization: electric royal blue #3D68FF marks primary interactions, active tabs, and navigation links, while soft pastel tints (#EDF3FF, #FFF0EE, #EAF7F0, #F6EEFD) give discrete identities to service offerings. Typography relies on a friendly geometric grotesque with heavy, compact headings (#161B2E) paired with airy, slate-gray body text (#7C8BA0). Generous vertical padding of 24px inside modules combined with tight 16px inter-card gutters establishes a clean, modern mobile portfolio cadence. A reader first notices the contrast between the dark cinematic hero banner and the crisp, modular white cards below.

1 张设计参考图

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

完整提示词

Design a light-mode mobile app interface screen: floating porcelain cards anchored by twilight imagery and punchy cobalt interactive accents.

LAYOUT
The mobile layout follows a top-down single-column modular stack over an edge-to-edge canvas. It opens with an uncontained navigation header, immediately followed by the dark immersive hero card. Below the hero, distinct content chunks ('About Me', 'My Services', 'Featured Projects') each occupy self-contained 24px-radius white cards with consistent 20-24px internal padding, utilizing horizontal carousels to preserve vertical density.

PALETTE (use these exact hex values)
- #F4F6FB — Base Canvas: Background canvas beneath all floating modular cards and navigation
- #FFFFFF — Card Surface: Primary surface for content cards, filter chips, and modular containers
- #3D68FF — Cobalt Accent: Primary CTA buttons, active filter chip fill, view-all links, and active pagination dot
- #161B2E — Deep Midnight Navy: Primary section titles, main hero headings, and brand iconography
- #7C8BA0 — Muted Slate: Body copy, service descriptions, and inactive filter chip text
- #8E9AA8 — Eyebrow Steel: Uppercase section overline labels and category tags
- #EDF3FF — Pastel Blue Tint: Background tint for web design service card and icon badge
- #FFF0EE — Pastel Coral Tint: Background tint for branding service card and icon badge
- #EAF7F0 — Pastel Mint Tint: Background tint for print design service card and icon badge
- #F6EEFD — Pastel Lilac Tint: Background tint for illustration service card and icon badge

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Poppins, DM Sans, Inter), weights 400/500/600/700. Sizes 10px caption, 11px body-sm, 13px body, 14px body-lg, 18px subheading, 24px heading. Tracking -0.02em at headings, 0.05em at uppercase eyebrows. Plus Jakarta Sans delivers an approachable yet disciplined modernist voice with geometric geometry and rounded terminals. Its heavy 700 weights ground section headers with confidence, while the light-to-medium body scales offer effortless mobile readability. Poppins or DM Sans serve as frictionless drop-in substitutes without disrupting proportion.

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

DEPTH
Depth is handled predominantly through crisp surface separation: white #FFFFFF cards sitting on a slightly cooler #F4F6FB matte backdrop. Shadows are extremely soft or omitted entirely in favor of shape boundary contrast and rounded silhouettes. The photographic hero card leverages internal depth through twilight lighting rather than external box shadows.

IMAGERY
Photography balances mood and clarity: the hero features atmospheric twilight urban scenery with deep water reflections and warm architectural lighting. Portfolio thumbnails show tactile, high-definition physical mockups, stationery, and editorial layouts with warm ivory and paper tones. Cartoonish stock illustrations or harsh corporate stock photos are strictly avoided.

SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the contrast between the immersive dark photographic hero banner and the crisp, pastel-accented white card stack beneath it. The sudden shift from atmospheric cinematic twilight to pristine porcelain modules makes the portfolio feel instantly bespoke. Misuse happens when designers make all subsequent cards dark or fail to tint the service wells with coordinated pastels.

MUST
- Maintain uniform 24px corner radius across all major top-level modular cards.
- Use uppercase 10px typography with 0.8px letter-spacing for all section eyebrows.
- Keep card container margins consistently at 16px from screen edge on mobile.
- Rely exclusively on #3D68FF for primary interactive focus and selected states.

AVOID
- Do not introduce sharp 0px or small 4px corners on modular content cards.
- Never apply harsh black drop shadows; keep elevation flat or subtly feathered under 8px blur.
- Do not color section headers in accent blue; reserve #161B2E for structural heading hierarchy.
- Never mix multiple photographic styles within the hero; stick to moody twilight or ambient tones.

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.