Neon Midnight SaaS

This mobile interface is framed by a pure pitch-black canvas (#030408) populated by rounded surface containers (#0b0f19) that hold structured modular cards (#0f1422). Color is wielded sparingly and with extreme intent: electric blue-to-indigo gradients (#2b5bf7 to #7b3fe4) define high-priority interactive touchpoints, while illuminated borders (#8545e8 and #246bfd) isolate active card selections. Typography uses a clean, modern neo-grotesque sans-serif with bold display headings at 24px and muted body copy at 12px tinted in a desaturated slate (#7e8b9f). Spacing relies on a generous 16px lateral gutter and generous 24px radii on macro sections with 14-16px on inner component tiles. The primary visual hook is the glowing hero carousel featuring dark moody laptop mockups balanced against neon micro-indicators.

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 dark-mode mobile app interface screen: deep obsidian surfaces illuminated by soft violet and electric azure gradients with disciplined mobile cards.

LAYOUT
The mobile layout follows a top-down stacked capsule rhythm. A compact header bar anchors the top, immediately succeeded by an expansive hero showcase card containing rich copy and mockups. Beneath the hero, discrete section blocks with rounded 24px frames encapsulate horizontally scrolling cards for benefits and a 4-column carousel for services, ending with a metric preview header.

PALETTE (use these exact hex values)
- #030408 — Void Black: Absolute background behind all modular sections and system status bars
- #0a0e1a — Section Midnight: Container background for grouped functional blocks and cards
- #0f1523 — Tile Elevated: Individual card tile background for inactive services and feature blocks
- linear-gradient(135deg, #2355fc 0%, #763ced 100%) — Electric Indigo Gradient: Hero primary button background and focal accent fills
- #2768fd — Neon Azure: Active stroke highlights, primary dot indicators, and category text accents
- #9c4dfc — Orchid Violet: Featured card borders and secondary gradient terminal highlights
- #f43f5e — Notification Crimson: Notification dot on top app bar header bell icon
- #ffffff — Pure White: Primary headings, card titles, and high-emphasis labels
- #768297 — Muted Slate: Subtitles, descriptive paragraphs, and inactive status indicators
- #192236 — Subtle Outline: Default borders on secondary buttons and inactive feature cards

TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Manrope), weights 400/500/600/700. Sizes 10px caption, 11px body-sm, 13px body, 15px body-lg, 18px heading, 24px display. Tracking -0.02em at display headings, 0.01em at body-sm. The typography employs a pristine, geometric neo-grotesque sans-serif that radiates enterprise technical precision and sleek modernity. Tight tracking on display headlines delivers punchy executive confidence, while open letter-spacing on small captions preserves crisp legibility on dark glass. Inter or Plus Jakarta Sans are the standard open-source matches.

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

DEPTH
Elevation is expressed strictly through luminance shifts and selective neon back-glows rather than drop shadows. Surface level 0 is pitch black (#030408), level 1 sections sit at deep navy-slate (#0a0e1a), and interactive cards float at #0f1523. Selected state borders emit an ultra-soft radial glow to simulate phosphor illumination against dark glass.

IMAGERY
Imagery features photorealistic, high-end technical photography showing modern laptops or dashboards engulfed in dark, ambient office environments with rich magenta and cyan reflections. Visuals are treated with dark vignette gradients to merge seamlessly into container backgrounds. Stock photography showing daylight, brightly lit offices, or smiling faces is strictly off-brand.

SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the dual-tone neon perimeter stroke applied to selected card tiles (such as the 'Affordable Pricing' and 'Photography' cards). Instead of flat borders or filled backgrounds, active items are outlined with a fine 1.5px violet-to-cyan gradient that makes them look laser-etched into dark acrylic.

MUST
- Use deep #0a0e1a containers with 24px corner radii to partition major content groupings.
- Highlight selected cards with vibrant 1.5px gradient borders in #9c4dfc or #2768fd.
- Keep descriptive body typography constrained to 10px–12px in desaturated slate (#768297).
- Confine heavy gradient fills strictly to primary CTA buttons and active indicator states.

AVOID
- Do not use light gray or pure white backgrounds anywhere in the UI.
- Do not give secondary buttons solid saturated fills; use dark glass with 1px border.
- Avoid harsh high-contrast drop shadows; use soft colored glow diffusion instead.
- Do not drop container corner radius below 16px; generous curves define this aesthetic.

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.