Civic Horizon

The design establishes a trusted, modern civic portal over a warm, photographic dawn skyline backdrop that gracefully fades into a crisp, light canvas (#F9FBFA). Deep spruce green (#155E57) serves as the primary visual anchor for brand icons, title highlights, and interactive states, avoiding bureaucratic coldness. Spacing is comfortable with a clear 8px base rhythm, relying on heavily rounded cards (radius 20px–24px) with soft ambient drop shadows to create stacked physical layers. The search bar takes prominence as a large 52px-high pill form floating between the atmospheric hero photography and the content stream. The typographic hierarchy uses a clean, humanist geometric sans-serif that balances accessibility with welcoming approachability.

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: serene civic engagement grounded in warm dawn imagery, pillowy white surfaces, and deep pine accents.

LAYOUT
The layout follows a progressive top-to-bottom discovery funnel designed for one-handed mobile interaction. It starts with status and identity over photographic sky, drops into an immediate search bar at thumb height, followed by a segmented quick-action directory. Below, horizontal carousels organize popular everyday tasks into distinct cards, anchored finally by wide contextual civic announcement cards.

PALETTE (use these exact hex values)
- #155E57 — Deep Spruce: Primary brand color used for key iconography, header titles, active states, and circular accent badges
- #E1F1EE — Mint Wash: Soft tint background for primary icon containers and category badges
- #F9FBFA — Base Off-White: Canvas background behind cards and under the fading hero image
- #FFFFFF — Pure White: Main elevated surface for cards, navigation sheets, floating search bar, and utility buttons
- #1A252C — Deep Slate: Primary typography color for major headings, greeting, and card titles
- #5E6D77 — Muted Slate: Secondary typography for descriptions, subheadings, and input placeholders
- #E3ECE9 — Border Gray: Subtle stroke for circular arrow buttons and card outlines

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,DM Sans,SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 20px heading, 26px display. Tracking -0.02em at headings, 0 at body. The typographic tone is warm, authoritative, and deeply democratic. Using a humanist geometric sans-serif like Plus Jakarta Sans or Inter gives civic announcements a contemporary, approachable feel without compromising institutional credibility. Clean letter spacing and balanced x-heights ensure high legibility for municipal services across diverse age demographics.

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

DEPTH
Depth is rendered organically using soft, ambient dropshadows (0 10px 30px rgba(26, 37, 44, 0.06)) beneath pure white cards. Surfaces hover smoothly over the dawn-tinted photo backdrop rather than relying on heavy structural outlines or dramatic 3D layers. Subtle border strokes (#E3ECE9) appear strictly on internal affordances like the circular forward buttons.

IMAGERY
Photography captures real municipal landmarks, suspension bridges, or historic civic halls during golden hour or early morning sunlight. Tones are warm, hopeful, and clear, avoiding gloomy weather or generic stock-photo corporate handshakes. The lower boundary of hero photos dissolves via a transparent vertical gradient directly into the canvas background.

SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the floating, rounded white content layer docking over an evocative golden-hour skyline photograph. The integration of high-radius surfaces (20px) with soothing spruce-and-mint iconography immediately transforms municipal administration into a pleasant lifestyle service. To preserve this identity, never replace the soft dawn imagery with flat solid color bars or harsh civic seals.

MUST
- Use warm, real-world civic photography that transitions softly into the off-white background (#F9FBFA).
- Keep icon containers pillowy and light by using mint wash (#E1F1EE) behind spruce icons (#155E57).
- Maintain generous card border radii between 20px and 24px for all foreground modules.
- Pair bold, humanistic greetings with friendly touches like standard emoji glyphs.

AVOID
- Do not use harsh primary blues or generic institutional government color palettes.
- Never use sharp, 0px-radius rectangles for content cards or search inputs.
- Avoid solid dark overlays on hero imagery; let natural golden hour lighting remain visible.
- Do not crowd horizontal carousels; allow cards at least 12px gap with cards peek visible.

OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1632: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.