Obsidian Aureate

Obsidian Aureate employs a pitch-black foundation (#080809) overlaid with lifted charcoal container cards (#131416) featuring 18px rounded borders. High-contrast typography drives visual weight, led by large condensed uppercase display headers in crisp white (#FFFFFF) paired directly with warm burnished gold (#C99E5C). Color is reserved strictly for hierarchy: gold denotes actionable affordances and editorial eyebrow subtitles, muted slate-gray (#8F9297) carries auxiliary body information, and restrained pastel tints isolate circular stat markers. Generous 20px card insets and deliberate vertical pacing establish a high-fashion, gallery-grade atmosphere. A viewer first registers the high-key gold leaf makeup against the deep black hero portrait, followed immediately by the dual-toned 'DIGITAL PHOTOGRAPHY' typography block.

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: dark editorial staging draped in deep obsidian with razor-sharp gold accents and cinematic contrast.

LAYOUT
The mobile viewport is structured vertically starting with a lightweight branded app bar integrated into the hero imagery. The top 55% of the viewport is dedicated to a full-bleed cinematic hero image supporting left-aligned editorial typography and a pill CTA. Below the hero pager, the interface transitions into modular stacked cards (#131416) with 18px rounded corners that compartmentalize business statistics and horizontal portfolio galleries.

PALETTE (use these exact hex values)
- #080809 — Canvas Obsidian: Root background canvas behind the hero photograph and primary scroll area.
- #131416 — Card Charcoal: Background fill for floating section cards including statistics and galleries.
- #202227 — Card Border Dark: Subtle 1px boundary stroke enclosing section card containers.
- #C99E5C — Burnished Gold: Brand hero titles, active pagination pill, tracking subtitles, and primary button outlines.
- #FFFFFF — Pure White: Primary headings, display titles, and prominent numeric statistics.
- #8F9297 — Muted Silver: Secondary descriptive body copy, passive status icons, and inactive carousel dots.
- #4A6B82 — Icon Tint Blue: Circular outline and glyph fill for experience stat badge.
- #D87A68 — Icon Tint Rose: Circular outline and glyph fill for photoshoot and client stat badges.
- #6BBFA0 — Icon Tint Mint: Circular outline and glyph fill for awards stat badge.

TYPOGRAPHY
Typeface Barlow Condensed (or Oswald, League Gothic, Anton), weights 600/700. Sizes 10px caption, 11px body-sm, 13px body, 15px subheading, 18px heading, 22px heading-lg, 38px display. Tracking 0.04em at display, 0.12em at subheadings. The typographic tone is authoritative, high-fashion, and strictly architectural. Condensed geometric sans-serif headings echo modern luxury editorial mastheads, while clean neutral grotesque body text provides legible utility. The pairing feels deliberate and restrained, avoiding expressive script or ornamental serifs in favor of modernist prestige.

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

DEPTH
Depth is achieved purely through surface tone layering without soft blur shadows. The baseline obsidian canvas (#080809) recedes, allowing slightly elevated cards (#131416) to emerge cleanly via crisp geometry and subtle dark perimeter boundaries. High-contrast photographic highlights provide the only organic dimensional depth.

IMAGERY
Photography follows high-fashion, dramatic low-key studio lighting with strong subject separation against deep black backgrounds. Human subjects feature gold leaf, metallic cosmetics, or high-contrast gloss finishes. Off-brand imagery includes bright daylight consumer snapshots, flat lay graphics, or low-contrast washed-out images.

SIGNATURE DETAIL — the thing that makes this design itself
The two-tone stacked headline ('DIGITAL' in white over 'PHOTOGRAPHY' in warm burnished gold) coupled with a dark charcoal floating container card architecture. This signature balances editorial art direction with functional app card modularity. It is misused when gold is applied haphazardly to entire paragraphs or when background cards lose their subtle tone separation from the canvas.

MUST
- Pair pure white and burnished gold (#C99E5C) for split display headlines to maintain editorial prestige.
- Enclose distinct informational sections inside rounded #131416 charcoal cards to create rhythm over black.
- Use uppercase tracking (0.12em to 0.15em) on 10px subheadings to mimic luxury print typography.
- Restrict bright saturated colors to muted, thin 1px icon badges inside dark surfaces.

AVOID
- Do not use saturated primary yellow or neon amber in place of desaturated burnished gold (#C99E5C).
- Never introduce pure white backgrounds or light theme card containers.
- Avoid standard system drop shadows; rely solely on #131416 tone lifts against #080809 base.
- Do not crowd hero typography into the model's face or subject focal area.

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.