Obsidian Atelier

The interface operates on an ultra-dark navy-slate canvas (#090D13) that lets isolated furniture photography take center stage. Instead of flat monochromatic cards, the viewport introduces atmospheric tinting—pairing an expansive high-key bone-white (#F2F3F5) hero carousel card against lower-half deep pine (#132624) and sapphire (#0D2238) feature blocks. Mint teal (#52C49C) serves as the primary functional accent, guiding interaction states, cart counters, star highlights, and secondary action buttons. Typography relies on a crisp geometric neo-grotesque sans-serif rendered from 11px micro-labels to a confident 28px display headline on the light card. Spacing is strictly rhythmic using 12px and 16px cell gutters paired with a generous 22px card border radius, producing an executive boutique atmosphere.

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 mid-century modern objects spotlighted across deep midnight atmospheric surfaces with soft mint accents.

LAYOUT
The mobile page follows a top-to-bottom editorial flow starting with a transparent status and navigation bar, followed immediately by an inset search box. The primary focal point is an expansive inverted-light hero card anchored with carousel dots, descending into a horizontally scrolling icon ribbon of categories, a balanced 2-column feature duo, and ending in an asymmetric split product row.

PALETTE (use these exact hex values)
- #090D13 — Obsidian Void: Deepest background surface for the entire application viewport.
- #131924 — Midnight Slate: Default dark container fill for search input and list item cards.
- #F2F3F5 — Bone Studio: Light studio backdrop used exclusively for the featured hero card.
- #132624 — Deep Forest Teal: Tinted background surface for inspiration and curated campaign cards.
- #0D2238 — Deep Marine Blue: Tinted background surface for the quality craftsmanship card.
- #52C49C — Mint Glaze: Primary interactive accent for cart badges, category outlines, and add-to-cart buttons.
- #FBBF24 — Starlight Gold: Rating stars and customer review indicators.
- #FFFFFF — Pure White: Primary text on dark containers and navigation labels.
- #11161F — Charcoal Black: Primary heading and body text inside the light hero container.
- #8A94A4 — Atmospheric Gray: Secondary subtitles, metadata, input placeholders, and inactive pagination dots.

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Text, Outfit), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 17px subheading, 22px heading, 28px display. Tracking -0.02em for headings, 0 for body. The typographic tone is architectural, rational, and understated, realized through Plus Jakarta Sans. Its wide round bowls and modern geometric grotesque proportions offer pristine readability at 11px micro-scales while looking tailored and upscale at large headline sizes.

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

DEPTH
Depth is created purely through surface color layering rather than heavy blurry drop shadows. Elevated surfaces move from base void (#090D13) to card slate (#131924), with selective ambient glow suggested by muted forest and marine gradients in secondary feature modules.

IMAGERY
Photography consists of hyper-clean, tactile 3D renders of mid-century Scandinavian furniture, matte ceramic vases, and modern architectural studio spaces. Products are presented isolated on smooth, solid-colored ground planes with soft diffused contact shadows; lifestyle scenes with noisy domestic backgrounds are strictly off-brand.

SIGNATURE DETAIL — the thing that makes this design itself
The inverted daylight studio hero card nestled within a pitch-black midnight mobile shell. This dynamic shift from dark UI chrome into a crisp, illuminated interior scene creates an instant 'gallery window' effect that commands immediate focus before returning users to ambient dark browsing.

MUST
- Keep the canvas deeply dark (#090D13) to elevate high-end 3D product renders.
- Use the bone-white card strictly for the topmost hero module to establish dramatic entry contrast.
- Apply mint green (#52C49C) exclusively for conversion actions, active pagination, and category line icons.
- Maintain a uniform 22px border radius across all main featured surface cards.

AVOID
- Do not invert the entire design into a light theme; the dark canvas provides essential premium atmosphere.
- Do not use saturated or bright neon green; stick to the soft muted mint glaze (#52C49C).
- Avoid sharp right-angled corners; cards and inputs must maintain soft organic radii.
- Do not crowd category pills; leave at least 14px horizontal breathing room between items.

OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1296: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.