Nocturne Ledger

The screen rests on an ultra-dark navy-black canvas (#07090e) structured around elevated container modules finished with subtle 1px hairline borders (#1a2333). Vibrant electric blue (#387aff) and mint emerald (#22c55e) inject dynamic telemetry into an otherwise restrained slate palette, immediately directing attention to the balance summary and performance gains. Typography relies on a clean, geometric neo-grotesque with tight tracking, using a hierarchy where the primary balance commands 32px bold while metadata recedes into 12px muted slate (#7e8c9f). Surface elements utilize generous corner radii (24px on primary cards, 14px on nested action tiles), creating distinct nested nesting levels without drop shadows. What a reader notices first is the high-contrast $24,750.75 figure paired with the glowing spline chart on the hero gradient panel (#0e172a).

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: tactile dark-mode wealth cockpit balancing luminescent cyan graphs against deep midnight bedrock.

LAYOUT
The screen follows a structured single-column vertical flow tailored to mobile viewports (~390px width). Starting with an intimate profile header and notification icon, it moves directly into the hero balance summary card holding four inline action triggers. Below this anchor, content is segmented into distinct titled blocks ('Accounts' followed by 'Recent Transactions') each enclosed in modular rounded groups.

PALETTE (use these exact hex values)
- #07090e — Obsidian Base: Root background canvas behind all primary mobile views and status indicators.
- #0d131f — Midnight Surface: Background for secondary list modules, container enclosures, and transaction blocks.
- linear-gradient(145deg, #0e172b 0%, #111f38 60%, #162b4d 100%) — Hero Glow Gradient: Gradient fill applied to the primary balance display card for atmospheric depth.
- #1a2333 — Subtle Edge Border: Hairline 1px borders delineating card perimeters and nested quick-action buttons.
- #387aff — Electric Cobalt: Hero accent used for the avatar base, quick action icons, and text action links.
- #4ea1ff — Neon Telemetry Cyan: Vector stroke and glow highlight representing balance growth trends.
- #22c55e — Yield Emerald: Used for positive returns, upward percentage deltas, and income indicators.
- #f43f5e — Signal Crimson: Used for negative transaction balances and debit line items.
- #ffffff — Starlight White: Primary balance amounts, account headings, and active interactive titles.
- #7e8c9f — Muted Slate: Account masked numbers, transaction timestamps, and category labels.

TYPOGRAPHY
Typeface SF Pro Display (or Inter, Roboto, Helvetica Neue), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px subheading, 18px heading, 32px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is technical, institutional, yet approachable, closely matching Apple's SF Pro Display. Its neutral letterforms and tight numerical spacing make it exceptionally suited for high-density financial ledgers. Free alternatives like Inter or Roboto easily maintain this disciplined tabular clarity.

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

DEPTH
Depth is created entirely through color luminance stacking rather than blurred drop shadows. The deep black canvas (#07090e) sits at ground level, while containers elevate using navy tones (#0d131f) and hairline borders (#1a2333). The hero card utilizes a directional gradient with a soft top-right blue backlight to feel nearest to the glass.

IMAGERY
No photographic imagery is present; the visual language relies purely on vector UI iconography and dynamic charts. Icons are housed inside 40px rounded-square or circular containers with distinct semantic category colors (e.g., green for savings, blue for checking). Graphic assets must remain flat, geometric, and functional without illustrative clutter.

SIGNATURE DETAIL — the thing that makes this design itself
The integrated hero card combining a massive white balance ($24,750.75), a floating neon blue spline, and an embedded 4-column quick-action dock into a single 24px rounded obsidian unit. Misuse typically involves detaching the action buttons into a separate floating row or removing the ambient glow.

MUST
- Wrap multi-item account groups into unified rounded container modules with thin dividers.
- Use high-contrast electric green (#22c55e) strictly for positive yields and deposit amounts.
- Maintain a 1px subtle hairline border (#1a2333) on dark cards to distinguish depth.
- Set monetary decimals at the same baseline but slightly reduced opacity or scale.

AVOID
- Do not introduce diffuse black drop shadows; rely on surface tone and borders.
- Do not use saturated background fills behind full lists; confine them to icon badges.
- Avoid high-contrast white text for secondary metadata; always demote to #7e8c9f.
- Do not mix rounded corner values randomly; constrain strictly to 14px and 24px.

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.