Editorial Obsidian

The canvas is built on a deep obsidian foundation (#0d0f12) paired with layered slate cards (#16191f) to present editorial culture and media. Color operates strictly as contextual identification and typographic hierarchy: bright crimson (#c61b1b) marks print issue numbers, electric blue (#2f6fed) drives interactive links and carousels, while soft pastel badges tag media formats. Typography relies on a refined, high-clarity neo-grotesque sans-serif ranging from 44px punchy numerical displays to 11px micro-caps. Visual cards exhibit a consistent 16px corner radius, framed by generous negative margins (16px lateral gutter) and micro-spaced content groupings (4px to 8px gaps). A viewer immediately registers the high-contrast tension between deep monochrome portrait photography and stark crimson issue cards.

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: curated cultural journalism bound in high-contrast cinematic dark mode with vibrant issue-driven color pops.

LAYOUT
Vertical mobile hierarchy begins with a utility header, immediately transitioning to an asymmetrical horizontal hero carousel. Content below breaks into distinct themed blocks ('Discover' card scroll, followed by 'Collections' vertical list), separated by 28px gaps and anchored by identical section header patterns.

PALETTE (use these exact hex values)
- #0d0f12 — Deep Obsidian Base: Screen background canvas behind all feeds, cards, and navigation headers.
- #16191f — Elevated Slate Card: Background fill for horizontal collection rows and subtle container elements.
- #c61b1b — Editorial Crimson: Hero card tint and collection badge background designating physical issue releases.
- #2f6fed — Electric Royal: Interactive text links, active pagination indicator, and 'NEW' tag pill.
- #72d5a3 — Sage Mint: Category badge background for audio and podcast editorial items.
- #f16363 — Soft Coral: Category badge background for photo essay cards and notification alert dots.
- #ffffff — Pure White: Primary headings, titles, active glyphs, and high-emphasis cta button surface.
- #8e95a2 — Muted Ash: Secondary subtitles, article counts, dates, and inactive pagination indicators.

TYPOGRAPHY
Typeface SF Pro Display (or Inter, Plus Jakarta Sans, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 15px subheading, 20px heading, 24px heading-lg, 44px display. Tracking -0.03em at display, 0.05em at micro-caps. The typographical voice is modern, rigorous, and restrained, echoing luxury print culture magazines through stark neo-grotesque weights. Tight negative tracking on large display numbers pairs with spacious positive tracking on tiny uppercase labels to establish crisp architectural authority. Inter or SF Pro Display serves as the ideal drop-in replacement.

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

DEPTH
Elevation is purely flat and tonal, completely omitting drop shadows. Hierarchy is achieved by layering dark slate containers (#16191f) over the deep obsidian base (#0d0f12), punctuated by vibrant imagery and high-contrast typography.

IMAGERY
Photography leans toward cinematic portraiture, high-fashion monochrome crops, and evocative atmospheric stills with deep shadows. Avoid oversaturated lifestyle stock, clip art, or playful illustrative figures; imagery must read as high-end print editorial.

SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of stark oversized crimson issue blocks displaying monolithic numerals ('21', '31') directly beside full-bleed cinematic photography. To execute it properly, set numerals at 40px+ bold white over solid #c61b1b, paired strictly with clean uppercase labels ('ISSUE'). Misusing it by introducing subtle gradients or non-issue marketing copy destroys its print-periodical character.

MUST
- Use solid white buttons with black text only for primary calls-to-action against photographic cards.
- Pair full-bleed imagery with a bottom-up black gradient (#000000 0% to transparent 70%) to ensure label contrast.
- Reserve vibrant crimson (#c61b1b) exclusively for issue numbers and active alert dots.
- Maintain uniform 16px border-radius across all carousel cards and portrait media thumbnails.

AVOID
- Do not introduce light-colored background sheets; maintain #0d0f12 base canvas throughout.
- Do not apply drop shadows to cards; rely entirely on surface fill tone differences (#16191f vs #0d0f12).
- Do not color section headings; reserve color accents strictly for 'View All' links and badges.
- Do not mix serif typography into headlines; keep the sans-serif geometric voice pure.

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.