Cobalt Funnel

Built upon a tinted cool-grey canvas (#F5F7FA) framed by a dedicated white navigation rail, this layout establishes analytical hierarchy through precise color mapping rather than decorative tinting. Each core business dimension possesses a dedicated hue—electric blue (#3170FE) for visitor volume, emerald (#10B981) for conversions, royal purple (#8B5CF6) for conversion rate, and warm amber (#F59E0B) for top-line revenue. Typography relies on a high-legibility geometric neo-grotesque with distinct tabular numeric scaling, anchored by 28px bold metric readouts paired with 12px secondary delta badges. Spatial structure follows an orderly 20px grid, housing rounded cards with a uniform 16px corner radius and hairline borders (#E5E9F0). The visual centerpiece is the three-dimensional, multi-tiered conical funnel diagram that translates the five analytic stages into a cohesive pastel-to-saturated spectrum.

1 design references

Prompt metadata
Shared by	@Devault
Model	GPT Image 2.5
Category	Web design
Dataset	stretchcloud · awesome-gpt-image-prompt-2.5

The prompt

Design a light-mode web interface screen: crisp porcelain analytics driven by tiered chromatic gradients and disciplined multi-metric clarity.

LAYOUT
The workspace uses a locked two-column architecture: a persistent 240px vertical sidebar on the left and a responsive analytical canvas on the right. Content flows vertically starting with an action header, followed by a 4-column KPI card rack, a split 50/50 mid-tier containing the Funnel Performance and Time Series charts, a three-column modular row for donuts and insights, and terminates in a full-width campaign data table.

PALETTE (use these exact hex values)
- #F5F7FA — Canvas Ground: Background workspace surrounding all dashboard cards and utility controls.
- #FFFFFF — Surface White: Card backgrounds, sidebar container, dropdown panels, and clean panel bases.
- #E5E9F0 — Border Neutral: Subtle borders separating sidebar navigation, card boundaries, and data table rows.
- #3170FE — Primary Action Blue: Active navigation states, primary buttons, visitor tracking lines, and top funnel stage.
- #10B981 — Conversion Emerald: Conversion indicators, positive metric sparklines, and active state pill badges.
- #8B5CF6 — Rate Purple: Conversion rate KPIs, direct traffic slices, and intermediate funnel segmentations.
- #F59E0B — Revenue Amber: Gross revenue metrics, financial chart traces, and alert warning badges.
- #F43F5E — Conversion Rose: Bottom-stage funnel conversion graphic anchor and critical notification highlights.
- #111827 — Heading Text: Main page title, bold KPI numbers, card headers, and campaign labels.
- #6B7280 — Body Text: Subheadings, axis timestamps, table headers, and navigation item labels.

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Manrope, DM Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 28px heading-lg. Tracking -0.02em at display, 0 at body. The typographic character is engineered, modern, and highly legible, delivered by Plus Jakarta Sans. Its wide apertures and crisp numerical geometry prevent misreading dense tabular figures while remaining warm and inviting in UI controls. Inter serves as an ideal zero-cost open-source replacement without degrading layout integrity.

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

DEPTH
Depth is handled entirely flat through subtle 1px perimeter borders (#E5E9F0) contrasting against a tinted cool-grey background (#F5F7FA). Drop shadows are virtually absent or suppressed into ultra-soft ambient blurs (0px 2px 4px rgba(0,0,0,0.02)). Floating popovers and dropdown triggers rely on crisp white fills and distinct hairline outlines for separation.

IMAGERY
Iconography consists of minimal, single-color 1.5px stroke geometric line icons housed within circular tinted medallions. Complex visual imagery is restricted to vector data visualisations—notably the stylized 3D layered funnel graphic with clean bevels and saturated segment gradients. Photographic elements and photorealistic mockups are strictly excluded.

SIGNATURE DETAIL — the thing that makes this design itself
The layered chromatic 3D funnel diagram at the center of the Funnel Performance card, which cascades from vibrant blue through cyan, violet, and electric rose to dramatize the conversion drop-off. Never replace this with a flat wireframe trapezoid or unshaded bar chart without losing the app's visual identity.

MUST
- Always maintain color continuity between a metric's icon, its sparkline trace, and its corresponding card indicator.
- Enforce a strict 16px corner radius across every top-level card on the dashboard.
- Keep table dividers to exactly 1px solid #F0F2F5 to ensure effortless vertical scan paths.
- Pair every large numeric headline (28px) with its delta indicator (12px) directly underneath.

AVOID
- Never introduce dark saturated cards onto the #F5F7FA canvas; preserve the stark white panel motif.
- Do not use multi-colored gradients on standard line charts; use single solid strokes with smooth bezier curves.
- Avoid sharp 0px or 4px radii on dashboard containers, which would break the friendly soft-tech aesthetic.
- Never mix metric colors arbitrarily—emerald must exclusively denote conversion or positive outcomes.

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

Web designDesign reference

Abyssal Ledger

The canvas is submerged in a rich midnight petrol slate (#0b121b), eschewing pure black in favor of deep oceanic navy undertones. Surfaces sit on elevated dark containers (#111c26) demarcated by razor-thin slate borders (#1c2a38) rather than heavy drop shadows. High-luminance electric cyan (#1de9b6) acts as the primary brand beacon and indicator of positive momentum, harmonized with electric violet (#a855f7) and amber gold (#f59e0b) for categorical multi-series data. Numerical metrics dominate the visual hierarchy through high-contrast bold white numerals (24px to 28px) paired with quiet slate captions (#64748b). Cards feature generous 16px corner radii and 20px internal padding, balancing information density with breathing room. A viewer immediately registers the four top-tier summary cards with seamless, borderless bottom sparklines before moving into the split data-visualization grid.

Web designDesign reference

Acoustic Minimal

This layout pairs a permanent dark charcoal sidebar (#121316) with an airy, pale grey-beige canvas (#F5F5F7) housing rounded structural cards (#FFFFFF). The aesthetic borrows heavily from high-end Danish and Japanese acoustic industrial design, contrasting stark architectural typography against tactile metallic renders in bronze and milled aluminium. Vibrant electric blue (#1E6BFF) serves strictly as a high-contrast functional accent for interactive triggers like primary CTA pills and cart badges, while amber (#E5A93C) indicates availability statuses. Typography is set in a neutral neo-grotesque with sharp tracking shifts between wide uppercase micro-labels and compressed display headlines (e.g., 'NB—32' at ~52px). Generous 24px internal card padding and large 20px card corner radii create soft modular islands. The primary visual tension arises from the interplay between monolithic pitch-black elements and luminous warm whites.

Web designDesign reference

Aegis Clinical

The interface operates on an ultra-clean white (#ffffff) and pale ice-blue surface hierarchy, using high-contrast slate (#0f172a) typography to project institutional authority and medical safety. Brand royal blue (#1668e3) functions strictly as a primary interaction and focal anchor, highlighting critical conversion paths and anchoring the dual-tone display headline. Secondary service departments are differentiated through soft pastel icon discs (spanning 48px to 56px in diameter) in tinted crimson, mint, lavender, and sky blue. Structural cards employ soft 16px corner rounding paired with faint, diffused ambient shadows (0 10px 30px rgba(15,23,42,0.04)). The prominent architectural hero imagery dissolves into the white canvas via a gentle gradient mask, visually uniting the physical facility with the digital portal.

Web designDesign reference

Aegis Cyber Luxe

The interface marries an ultra-dense, dark command rail (#070e1c) with a radiant, airy light canvas (#f8fafd) that houses executive-level threat intelligence. Hierarchy relies on high-contrast text sizing and surgical neon accents: vivid royal blue (#165dfc) for primary actions and safe-state telemetry, juxtaposed against alert crimson (#f04438) for imminent malware breaches. Typography is rendered in an ultra-clean geometric sans with tight headline tracking (-0.02em) and muted slate body copy (#64748b). Surface containers exhibit subtle 1px borders (#e8edf5) with a uniform 16px corner radius, floating gently above pale atmospheric radial gradients. The eye is immediately captured by the hero 3D composition, featuring a hyper-detailed dark monitor flanked by translucent glassmorphic telemetry cards and glowing threat icons.