Structural Blueprint

This mobile experience balances an atmospheric midnight-navy architectural hero with pristine, high-key white content cards resting on an off-white canvas. Color functions strictly as semantic hierarchy: luminous blueprint cyan (#3B82F6) drives digital schematics and primary actions, while warm terracotta coral (#EB6A58) punches out conversion touchpoints like the contact trigger. Type relies on an authoritative neo-grotesque sans, running from 11px uppercase tracked sub-headers to a massive 36px bold display title. Surface cards adopt generous 24px corner radii with whisper-light borders and diffuse drop shadows, grounding the interface in tangible physical layers. The reader immediately registers the stark transition from technical 3D CAD wireframe elevation at the top to hyper-tactile, photo-real safety gear below.

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 construction realism meets midnight wireframe architectural precision in an executive mobile enterprise suite.

LAYOUT
The interface proceeds in an alternating rhythm: full-bleed dark hero header with title and video trigger, transitioning into an elevated 24px rounded editorial card with physical prop imagery, followed by a 4x2 utility grid of service squircle tiles, terminating into a dark secondary vision banner peeking from the bottom edge.

PALETTE (use these exact hex values)
- #040914 — Midnight Blueprint: Deep navy base behind the wireframe hero rendering and navigation bar.
- #F4F6FA — Sheet Canvas: Muted grayish-blue background framing the middle content cards and service grid.
- #FFFFFF — Pure Card: Primary surface for interactive feature cards and individual service tile containers.
- #1E5AE6 — Blueprint Core: Hero action pill background, active carousel dot, and structural wireframe tint.
- #EB6A58 — Terracotta Punch: High-priority secondary CTA pill and notification indicator pill dot.
- #0F172A — Steel Navy: Primary headline typography on white surface panels.
- #64748B — Dust Slate: Secondary description text, supporting labels, and inactive carousel pips.
- #EBF3FF — Service Tint Blue: Pastel circular backdrop for project planning and infrastructure service icons.

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, Montserrat), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px subheading, 20px heading, 36px display. Tracking -0.03em on display, 0.08em on uppercase labels. The typographic stance is corporate, structural, and meticulously planned. Using Plus Jakarta Sans or a tight Inter cut, the bold display weight conveys immovable industrial trust, while wide-tracked 11px uppercase metadata labels evoke engineering draft specifications.

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

DEPTH
Depth is created through dramatic container value stacking rather than heavy dropshadows. Crisp white cards sit over a #F4F6FA base with an imperceptible 0 4px 20px rgba(0,10,30,0.04) blur, while dark midnight panels create physical weight at the viewport poles.

IMAGERY
Visual assets alternate strictly between two modes: abstract 3D cyan blueprint wireframes on pitch navy, and hyper-realistic studio renders of pristine white hardhats and architectural rolls. Avoid raw documentary construction site photos with dirt, yellow safety vests, or muddy job sites.

SIGNATURE DETAIL — the thing that makes this design itself
The deliberate collision between a technical, dark CAD wireframe hero and a sunlit, tactile physical hardhat render contained in smooth 24px floating cards. This visual shift bridges abstract engineering intelligence with concrete execution; misusing it by replacing blueprints with standard stock photography destroys the firm's elite engineering identity.

MUST
- Anchor high-level technical positioning with dark midnight navy blueprint containers.
- Use pure white 24px rounded cards for body content to ensure instant readability.
- Pair every action pill with an inline directional arrow to sustain forward momentum.
- Keep service grid icon backdrops within ultra-soft 10% opacity pastel circles.

AVOID
- Do not place low-contrast grey text directly over the dark wireframe hero graphics.
- Never use sharp 0px corners; all surfaces must honor the 16px to 24px radius system.
- Avoid generic flat vector clip art; imagery must look like CAD schematics or 3D physical models.
- Do not mix multiple high-saturation accent colors on a single card container.

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.