Nocturne Sphynx

Set against a deep obsidian canvas (#0d0f13), this mobile editorial experience treats hairless feline portraiture with the poise of high-fashion print journalism. The visual hierarchy pivots on dramatic alternating cards: luminous bone-white containers (#f4f3ee) punctuate the moody dark background to create rhythmic pauses, while secondary cards match the dark canvas tone (#161920) with fine borders. Typography marries an elegant display serif with high contrast for titles ('CATS' at 44px) against a neutral sans-serif body set at 13px with generous line height. Vibrant electric ultramarine (#3865ff) serves exclusively as an interactive accent, highlighting the active slide indicator bar, numeral underlines, and primary call-to-action pills. Generously rounded card corners (24px) soften the stark subject matter, creating an exclusive and tactile museum-like showcase.

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 luxury framing sculptural sphynx portraits with alternating ivory and obsidian interactive cards.

LAYOUT
A single-column vertical scroll tailored for mobile devices (390px base). The upper viewport is dominated by an immersive hero showcase featuring title typography, subcopy, and progress telemetry. Beneath the hero, content flows through stacked, alternating-tone rounded cards spaced by uniform 14px vertical gaps.

PALETTE (use these exact hex values)
- #0d0f13 — Canvas Obsidian: Root background of the viewport and ambient space behind cards
- #161920 — Card Dark: Background for alternating dark content cards and deep interactive modules
- #f4f3ee — Card Light: High-contrast off-white background for primary feature cards
- #3865ff — Electric Cobalt: Interactive accent for primary pill buttons, active progress indicator, and numeral underlines
- #ffffff — Pure White: Primary display text, hero headline, and status icons over dark surfaces
- #14161b — Deep Charcoal: Headlines and body copy appearing inside light-toned cards
- #7d8494 — Muted Slate: Secondary subtitles, slide total counter, and inactive segment indicators
- #2a2e3b — Subtle Outline: Hairline border for outline pills and dark card contours

TYPOGRAPHY
Typeface Cormorant Garamond (or Playfair Display, Canela, Didot), weights 400/600. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 26px heading, 44px display. Tracking -0.01em at display, 0.02em at section titles. The typographic tone is regal, editorial, and curated. Cormorant Garamond conveys heritage luxury and high-art sophistication, while Inter provides functional, utilitarian readability for operational details. Any replacement must preserve this tension between classical fine-art serif and modern Swiss sans.

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

DEPTH
Depth is created entirely through optical contrast rather than dropped shadows. The intense black background (#0d0f13) recedes infinitely, allowing the luminous bone-white cards (#f4f3ee) to project forward natively while dark cards sit in a mid-plane defined by 1px slate borders (#2a2e3b).

IMAGERY
Studio-lit macro portraits of hairless Sphynx cats captured against seamless dark or light backdrops. Lighting is directional, sculpting the folds of skin and reflective eyes with surgical clarity; casual or outdoor photography would instantly break the gallery elegance.

SIGNATURE DETAIL — the thing that makes this design itself
The alternating rhythm of bone-white and obsidian full-width cards featuring cut-out feline profiles breaking across the typographic grid, unified by electric blue navigational micro-accents.

MUST
- Alternate card background values systematically between ivory (#f4f3ee) and charcoal (#161920).
- Reserve the vivid electric blue (#3865ff) strictly for active states, index accents, and primary actions.
- Pair high-contrast classical serif headings with clean, low-contrast sans-serif body text.
- Isolate feline photography subjects with precise transparent cut-outs that bleed naturally into card boundaries.

AVOID
- Never introduce saturated colors other than the single electric blue (#3865ff) accent token.
- Do not stack two identical light cards immediately adjacent to one another.
- Avoid heavy drop shadows; cards should rely on surface color contrast and crisp borders for separation.
- Never set body paragraphs in the serif font—it must be reserved exclusively for titles and indexes.

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.