Intermodal Express

This mobile design establishes an authoritative logistics interface by anchoring a dark nautical navy (#081B2E) hero section against an airy, clinical light-gray (#F7F9FC) canvas. Key interactions rely on a signature warm coral (#EB5757) for actionable conversions, preventing corporate detachment while retaining functional clarity. Modern neo-grotesque typography prioritizes scanning with heavy display headings (28px) paired with concise, low-contrast body text (#64748B at 12px). Surface structure relies on generous 20px card radii and overlapping layers, such as the 4-column freight mode selector bridging the hero and content plane. Visual hierarchy is strictly partitioned: dark cinematic photography and maps in the upper third yield to clean white surfaces and blue circular iconography (#1E6091) below. The reader immediately registers the deep blue hero and vibrant red container imagery before settling into the crisp operational cards.

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: industrial freight logistics rendered through high-contrast nautical darks and warm industrial coral.

LAYOUT
The mobile layout opens with a dark 45% screen-height hero container featuring system status, navigation, H1 copy, CTA, and container graphics. Directly overlapping the hero seam sits a 4-column white freight mode card. Below the seam, a balanced two-column section provides value proposition bullet points on the left and a rounded media carousel on the right, punctuated by pagination dots.

PALETTE (use these exact hex values)
- #081B2E — Midnight Marine: Deep navy background for the hero header, navigation bar, and dark container accents.
- #F7F9FC — Canvas Off-White: Primary mobile canvas background underlying all content cards and scroll areas.
- #FFFFFF — Card Surface: Pure white surface for interactive mode cards, floating modules, and list containers.
- #E85854 — Industrial Coral: High-visibility primary call-to-action buttons and conversion highlights.
- #1D5987 — Oceanic Cobalt: Secondary accent used for circular list badges, metadata pills, and active pagination.
- #EBF2F7 — Ice Blue Tint: Soft neutral fill for icon squircle backgrounds in service navigation.
- #0F172A — Deep Charcoal: Primary headline and title typography on light surfaces.
- #64748B — Slate Muted: Body copy, supporting micro-text, and inactive pagination indicators.

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, Manrope), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 22px heading, 28px display. Tracking -0.02em at display, 0.04em at captions. The type selection projects modern industrial efficiency, technical precision, and absolute dependability. Heavy sans-serif headlines convey structural authority akin to high-tonnage transport, while generous line heights in body text ensure quick parsing under field conditions. If Plus Jakarta Sans is unavailable, Inter serves as an exact metric-compatible replacement.

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

DEPTH
Depth is created primarily through strategic layer overlapping rather than heavy drop shadows. The pure white quick-action card overlaps the dark hero header by 24px, casting an extremely diffuse 0px 12px 32px rgba(8,27,46,0.06) shadow. Secondary elements remain flat against the #F7F9FC canvas to keep scanning speeds fast.

IMAGERY
Photography embraces realistic, high-grade commercial freight assets: container stacks at dusk and gleaming long-haul semi-trucks under natural golden-hour lighting. Hero graphics subtly incorporate a dotted world map silhouette behind the physical shipping containers. Avoid generic cartoon flat illustrations, synthetic 3D renders, or chaotic warehouse clutter.

SIGNATURE DETAIL — the thing that makes this design itself
The distinctive spatial signature is the seamless transition between the dark nautical hero header and the clinical off-white content sheet via the floating 4-column transport mode card. This component anchors the user's eye at the natural thumb-reach zone. Misusing this pattern by turning the mode strip dark or removing its card enclosure ruins the visual balance.

MUST
- Anchor actionable items with warm coral (#E85854) to stand out against heavy navy accents.
- Round all major cards and imagery modules to a cohesive 20px border radius.
- Pair a dark navy hero container with a light canvas body for dynamic depth.
- Keep service mode icons within soft squircle tints (#EBF2F7) rather than harsh outlines.

AVOID
- Do not use harsh 0px sharp corners on content cards or media modules.
- Do not invert the app canvas entirely to dark mode; preserve the light content plane.
- Do not style the primary CTA in blue; reserve blue strictly for informational glyphs.
- Do not crowd the 4-column freight selector; wrap text cleanly under 12px font size.

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.