Emerald Velocity

The canvas is built on a dual-atmosphere foundation: an ultra-clean #FFFFFF base supporting airy daylight browsing, crowned by a rich, moody spruce green (#0B2D33 to #041B20) hero stage. Text hierarchy relies strictly on sharp case shifts and tint, utilizing bold uppercase headings in dark spruce (#103238) against soft slate body copy (#5D7179). Structural surfaces transition seamlessly between full-bleed photographic hero cards and softly rounded rectangular product tiles (radius 18px) set against #F2F5F8 tints. The spacing is exceptionally balanced around a 16px horizontal screen gutter with 12px inter-card gutters in the 2-column grid. What catches the eye immediately is the luminous contrast between the dark emerald vehicle paintwork and the gleaming clinical white UI layer beneath.

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 light-mode mobile app interface screen: precision automotive engineering framed in deep spruce tones, crisp daylight surfaces, and technical geometric typography.

LAYOUT
The screen follows a strict single-column mobile flow with modular rhythm: top status bar and minimalist brand selector header (48px), followed by a dominant full-bleed dark showcase banner (~340px). Below rests a 5-item horizontal feature icon bar, leading into a bold uppercase section title ('NỔI BẬT') and a rigorous 2-column card grid with 12px gaps.

PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Global application background and crisp foreground card highlight surface.
- #0B2D33 — Spruce Deep: Dominant dark hero card backdrop evoking automotive paint depth.
- #041B20 — Spruce Abyss: Gradient anchor for the dark showcase banner floor.
- #103238 — Ink Spruce: Primary typography, titles, icons, and prominent headers across daylight surfaces.
- #5D7179 — Slate Muted: Secondary product descriptions, subtitles, and icon labels.
- #F2F5F8 — Ice Fog: Subtle cool-tinted fill for product feature cards and icon circles.
- #E3EBF0 — Ghost Spruce: Ultra-light hairline borders on category icon circles and dividers.
- #E53935 — Signal Crimson: High-visibility dot indicator on notification icon in the header.

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Montserrat, SF Pro Text), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 14px body, 15px subheading, 17px heading, 26px display. Tracking -0.01em at display, 0.02em at uppercase captions. Plus Jakarta Sans delivers a disciplined, engineered, and modern automotive feel. High-contrast uppercase headings communicate power and precision without shouting, while compact body copy maintains high legibility even in Vietnamese diacritics. Inter or SF Pro Display make seamless drop-in alternatives without losing technical authority.

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

DEPTH
Depth is created purely through ambient photographic drop shadows cast by the vehicles onto card floors, rather than CSS box-shadows. The interface remains intentionally flat and crisp, using 1px boundary borders (#E3EBF0) and tonal surface changes (#FFFFFF to #F2F5F8) to segment hierarchical planes.

IMAGERY
Imagery features studio-lit automotive exterior and interior studio shots cut out against gradients or environmental city backdrops. Vehicle reflections must echo the spruce and cool-teal palette, emphasizing sleek metallic surfaces, polished alloy wheels, and pristine interior leather dashboard angles.

SIGNATURE DETAIL — the thing that makes this design itself
The dramatic transition from a deep nocturnal spruce-green hero banner down to clinical, daylight-bright feature cards with fine circular wireframe action nodes.

MUST
- Use uppercase lettering for all high-level category titles and card headlines to maintain architectural punch.
- Restrict the deep spruce green palette to hero elements, car paint reflections, and key text headings.
- Maintain consistent 18px rounded corners across all secondary showcase cards.
- Isolate car photography cleanly with soft cast shadows rather than heavy drop shadows.

AVOID
- Do not use harsh pure black (#000000); use Spruce Deep (#103238) for deep contrast.
- Never add solid colored button backgrounds in the hero; keep the ghost outline aesthetic.
- Avoid flat rectangle cards; sharp 0px corners completely violate this system's smooth ergonomic language.
- Do not clutter secondary feature cards with complex badges or multiple call-to-actions.

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.