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.

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: tactical cyber intelligence anchored in stormy oceanic depth and clinical mint-frosted sheet surfaces.

LAYOUT
The screen uses a vertical split layout tailored for mobile viewports. The top 42% is reserved for full-bleed dark hero photography containing glass navigation, centered display typography, and a pill CTA. The remaining 58% is an overlapping white sheet containing a split feature block followed by a horizontal capability bento scroller.

PALETTE (use these exact hex values)
- #0E2A32 — Abyssal Teal: Primary typography, prominent interactive buttons, and high-contrast iconography across light surfaces.
- #BDE4E0 — Glacial Mint: Hero primary CTA fill, active indicator underlines, and soft accent highlights.
- #10232B — Storm Marine: Base canvas underlay behind hero photography and floating navigation elements.
- #FFFFFF — Clinical Sheet: Dominant background for the main content bottom sheet and elevated modules.
- #F1F7F6 — Frost Seafoam: Background fill for capability cards and horizontal scroll containers.
- #D8EFEA — Sea Glass: Icon container backgrounds and floating hexagonal status badges.
- #5C747E — Muted Slate: Explanatory body copy, secondary statistics labels, and inactive navigation links.
- #2A7D75 — Teal Pine: Uppercase section kickers, category eyebrows, and high-emphasis focal links.

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, DM Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 22px heading, 30px display. Tracking -0.03em at display, 0.12em at uppercase labels. The typographic tone is Nordic, authoritative, and scientifically calm. Plus Jakarta Sans delivers wide, open counters and clean geometry that feels human yet engineered. Inter or General Sans can be freely substituted provided display weights maintain tight negative tracking.

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

DEPTH
Depth is achieved through layering rather than cast shadows. A dark photographic canvas sits in the background while a pure white sheet slides vertically over it with a crisp perimeter. Subtle 1px translucent borders and hairline dividers (#E2EBEA) maintain separation within light modules.

IMAGERY
Photographs must feature desaturated, atmospheric oceanic swells, foam, and deep teal storm clouds. Secondary imagery inside tech hexagons depicts sparse, glowing 3D vector point clouds or neural topography. Avoid sunny skies, neon cyberpunk aesthetics, or literal hardware server photography.

SIGNATURE DETAIL — the thing that makes this design itself
The interlocking rounded-hexagonal photo vignette: two organic-cut tiles showing surging ocean water and algorithmic neural meshes, unified by a floating security checkmark badge. It visually defines the 'nature meets intelligence' thesis and must not be replaced with standard rectangles.

MUST
- Anchor all major content inside the white #FFFFFF bottom sheet with 32px top corner radii.
- Use uppercase tracking (+1.4px) exclusively on 11px category labels like 'OVERVIEW'.
- Pair natural chaos imagery (stormy ocean) with clinical digital wireframes inside hexagonal masks.
- Set hero headlines strictly in centered pure white with an explicit mathematical '×' glyph.

AVOID
- Do not use harsh pure black (#000000); always substitute with deep abyssal teal (#0E2A32).
- Do not round the bottom sheet corners with less than 24px radius; it destroys the sheet illusion.
- Do not apply heavy dropshadows; rely entirely on high tonal contrast and clean border perimeters.
- Do not clutter the stormy hero section with secondary links or floating metric 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.

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

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.

Mobile interfacesDesign reference

Aero Obsidian

A high-density executive aviation dashboard built on a cavernous midnight blue canvas (#080D14) with layered charcoal-blue elevation surfaces (#101A26). Hierarchy relies on high-contrast crisp white typography (#FFFFFF) paired with a singular energetic mint green accent (#2EE59D) reserved for live flight states, affirmative actions, and brand highlights. Surface containers feature deep 20px rounded corners with faint slate border highlights (#1A2838) creating an architectural bento-grid feel. Typography exhibits tight geometric tracking with oversized IATA airport codes (32px) balancing compact micro-labels (11px). A photorealistic commercial jet emerges from dark storm clouds in the header, anchoring the dark tactical tone while tactile skeuomorphic details like radar rings and cabin seating humanize the data.