Malte Nocturne

Designed on an ink-black canvas (#0c0c0e), this interface transitions from a sensory macro-photography hero into a vertical stack of vibrant, monochromatic craft beer edition cards. Color is strictly thematic rather than decorative: each bottle variant owns a deeply saturated, vignetted card surface (navy #123368, crimson #7a080d, amber #dc8504) accompanied by matching colored titles and custom botanical/elemental background illustrations. Typography establishes extreme tension between an ultra-thin geometric numeral display ('01' at 44px weight 200) and ultra-heavy, compact uppercase titles (weight 900). Cards share a uniform 18px corner radius with 14px vertical stacking gaps, while spec iconography anchors the lower-right third with delicate 1px line drawings. A user notices the organic bottle silhouettes breaking the horizontal hierarchy first, immediately followed by the bold two-digit numeric identifiers.

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 sommelier tasting cards suspended over macro effervescence with chromatic chapters for each craft brew.

LAYOUT
The mobile view follows a top-down sensory narrative: iOS status bar flows into the dark branded header, dissolving into an ambient full-bleed photographic hero carousel. Below the pagination dots, the feed transitions into a rhythmic vertical stack of rounded colored product cards separated by consistent 14px gutters.

PALETTE (use these exact hex values)
- #0c0c0e — Canvas Midnight: Root background canvas framing the hero fluid header and floating product cards
- #123368 — Hop Cobalt: Primary background fill for the Hop Arábica product tasting card
- #7a080d — Gasoline Crimson: Primary background fill for the Gasoline Soul roasted malt card
- #dc8504 — Vienna Ochre: Primary background fill for the Double Vienna amber lager card
- #2862d8 — Cobalt Title: High-contrast electric blue applied to Hop Arábica card title
- #cc1822 — Carmine Title: Punchy red tone applied to Gasoline Soul card heading
- #ffffff — Text Primary: High-contrast white for header typography, numbers, bottle sizes, and navigation icons
- #a6b1c2 — Text Muted: Lightened slate used for multi-line tasting notes and spec labels across dark cards

TYPOGRAPHY
Typeface Montserrat (or Gotham,Proxima Nova,Inter), weights 200/400/700/900. Sizes 10px caption, 11px body-sm, 13px body, 15px subheading, 22px heading, 38px heading-lg, 44px display. Tracking 0.05em on titles, -0.02em on large numerals. The typography creates a deliberate clash between industrial craft heritage and crisp modern luxury. The hero's textured stencil serif conveys artisan manual brewing, while the clean geometric sans in the cards delivers surgical information clarity through radical weight contrasts.

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

DEPTH
Depth is created through photographic occlusion and drop shadows rather than layered UI drop shadows. Bottles and botanical/fire illustrations cast subtle diffuse black shadows directly onto card surfaces, while the cards themselves sit flat on the ink-black root canvas.

IMAGERY
Hero imagery relies on hyper-detailed macro photography of effervescent golden beer backlit to show bubbles and froth. Product imagery pairs high-fidelity cutout glass bottles with stylized thematic line or painterly illustrations (coffee branches, leaping flames) embedded within the card background.

SIGNATURE DETAIL — the thing that makes this design itself
The dual-weight heading lockup—pairing an ultra-thin 44px edition number with an ultra-black 22px saturated title beside an overlapping bottle cutout—instantly defines the layout. Misusing it by matching font weights or centering the text eliminates the structural tension.

MUST
- Dedicate one rich, distinct monochromatic background color to every unique craft beer card.
- Pair ultra-thin (weight 200) index numerals directly with ultra-heavy (weight 900) variant titles.
- Position real bottle photography cutouts overflowing slightly against bespoke thematic backdrop illustrations.
- Keep spec indicators (ABV, glass, volume) rendered strictly as thin 1px white line icons.

AVOID
- Do not use generic white or light grey card surfaces; cards must remain deeply pigmented.
- Avoid solid filled circular arrow buttons; keep the detail trigger delicately stroked.
- Never replace the distressed stencil display font in the hero with a clean sans-serif.
- Do not crowd more than three technical specifications in the bottom card row.

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.