Atelier Noir

A refined mobile portfolio interface anchored on an ultra-dark gradient canvas (#0C0F14 to #12161E) that elevates physical industrial design objects. Content cards use subtle tonal elevations (#151A22) with a uniform corner radius of approximately 16px and thin, almost imperceptible low-opacity borders. Typography relies on a clean, geometric humanist sans-serif set in pure white (#FFFFFF) for titles, muted slate-teal (#789D96) for category metadata, and soft silver-gray (#8E95A2) for descriptions. Layout structure prioritises breathability, framing studio photography on high-contrast pale light-gray backdrops (#E5E6E8) inset into deep charcoal cards. Navigation is stripped to minimal round icon buttons (40px circular containers with thin outlines) flanking stacked uppercase logotype.

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: quiet industrial luxury carved from deep obsidian shadows and precision typography.

LAYOUT
The mobile layout follows a single vertical column with 16px screen edge margins. The header positions utility actions symmetrically around a centered wordmark. Below, a landscape hero card introduces studio philosophy, transitioning directly into a labeled portfolio stream featuring balanced horizontal project list rows.

PALETTE (use these exact hex values)
- #0D1017 — Canvas Background: Deepest primary background canvas behind all views and layouts
- #151A22 — Card Surface: Background container fill for project list items and interactive modules
- #202734 — Card Stroke: Barely perceptible borders defining card edges and circle buttons
- #FFFFFF — Text Primary: Top-tier headings, brand title, and primary iconography
- #8C94A0 — Text Secondary: Descriptive copy, hero subtitles, and secondary navigation cues
- #638C84 — Accent Mineral: Uppercase project category tags and subtle highlighted meta text
- #E2E4E6 — Photo Neutral Base: Neutral studio gray interior for rendered product thumbnail cards

TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,SF Pro Display,General Sans), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 17px subheading, 20px heading. Tracking -0.01em at display, 0.05em at caps. The typography conveys restrained Scandinavian minimalism and architectural poise. A geometric sans-serif functions cleanly at both micro uppercase captions and fluid display sizes. The hierarchy relies on sharp contrast between airy uppercase trackers and relaxed, warm body descriptions.

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

DEPTH
Depth is created strictly through tonal value stepping rather than diffused drop shadows. The base level canvas (#0D1017) supports elevated panels (#151A22) delineated with delicate 1px hairline borders (#202734). Product image cutouts provide an intentional high-contrast reverse-elevation layer in soft studio gray (#E2E4E6).

IMAGERY
Photography adopts high-end industrial design editorial styling with diffused studio lighting, pristine architectural materials, and neutral warm-gray backdrops. Renderings emphasize tactile surfaces like matte wood, brushed aluminium, and cast plastics without harsh reflections. Busy lifestyle photography or brightly colored outdoor backgrounds are strictly off-brand.

SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of luminous, pale light-gray studio thumbnails inset cleanly into pitch-dark charcoal cards with mineral-green micro-caps metadata. This creates an optical gallery lightbox effect that honors physical object design without cluttering the screen.

MUST
- Use light gray studio backdrops exclusively within thumbnail containers to contrast dark UI surfaces.
- Keep card corner radii consistent at 16px to maintain unified tactile softness.
- Color category tags in desaturated sage/mineral green (#638C84) set in uppercase with 0.12em tracking.
- Render all action icons with thin 1-1.5px stroke weight inside circular outlines.

AVOID
- Never introduce saturated bright accent colors like vibrant blue, red, or yellow.
- Do not use harsh box shadows; rely solely on subtle fill step-ups and faint border strokes.
- Avoid full-bleed product photos without rounded framing on project list cards.
- Do not set body or description text in pure white (#FFFFFF); restrict it to muted gray (#8C94A0).

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.