Midnight Neon Foundry

This interface is anchored on a very deep blue-black canvas (#070b14) partitioned by a fixed left navigation rail and a dark slate content field (#0b1220). Hierarchy relies on bright cobalt blue (#1d63ff) for key actions and active state fills, paired with crisp white (#ffffff) for primary headlines and muted blue-gray (#64748b) for metadata. Glowing hyper-rendered 3D product renders sit in rounded nested viewports within primary product cards, each lit by high-contrast ambient rim light. Container cards use subtle 1px border strokes (#1e293b) with approximately 16px corner radii, maintaining tight 16px to 24px inner gutters. What grabs attention first is the glowing quartet of metallic and glass 3D project tokens floating above dark recessed wells, creating an arresting sense of tactical hardware control.

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 dark-mode web interface screen: deep navy cockpit framing illuminated skeuomorphic 3d artefacts with electric blue precision controls.

LAYOUT
The frame uses a classic modern cockpit architecture: a slim left navigation sidebar (approx 200px) followed by a fluid dashboard canvas. The main area starts with a global search header and aggregated counter chips, leading into an energetic four-column product project row, and completes with an asymmetric two-column lower deck balancing analytical metrics against real-time operational feeds.

PALETTE (use these exact hex values)
- #070b14 — Abyssal Navy: Deepest canvas background behind the main application frame and navigation rail.
- #0b1220 — Panel Slate: Primary surface fill for workspace cards, metrics blocks, and activity panels.
- #0e182a — Elevated Recess: Sub-surface container color used behind 3D render displays and input wells.
- #1d63ff — Electric Cobalt: Primary action buttons, active navigation item pill, and leading donut chart segment.
- #00d2ff — Cyan Glow: Chart trace line for compute, ice orb highlight, and telemetry indicators.
- #f59e0b — Amber Glow: Storage line graph trace, activity icon backplate, and warning indicators.
- #10b981 — Emerald Spark: Positive delta indicators, project active status dots, and success icons.
- #1a2538 — Divider Stroke: 1px hairline borders bounding cards, header controls, and search inputs.
- #ffffff — Pure White: Primary headings, major numeric values, and active button text.
- #64748b — Steel Muted: Body labels, chart axes, inactive icons, and timestamp subtexts.

TYPOGRAPHY
Typeface Inter match (or Plus Jakarta Sans,SF Pro Display,Geist), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 24px display. Tracking -0.015em at display, 0em at body. The typography is disciplined, precise, and understated. By employing a clean neo-grotesque sans-serif like Inter or Plus Jakarta Sans, the interface stays out of the way of the high-energy 3D imagery and complex chart data, letting the bold weights communicate authority without feeling loud.

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

DEPTH
Depth is created without standard dropped cast shadows. Instead, it relies on optical luminosity stacking: a pitch canvas (#070b14) hosts mid-tone panels (#0b1220), which are bordered with low-contrast strokes (#1a2538) and contain high-contrast, self-illuminated neon 3D objects that simulate physical light emission.

IMAGERY
Centerpiece product imagery consists of glossy, hyper-detailed 3D skeuomorphic models (VR headset, glowing clothes iron, levitating icy sphere, charging station) illuminated by high-intensity cyan, blue, and amber ambient rim lights. Flat illustrations, stock photography, or low-poly unlit models would instantly destroy the high-tech hardware aesthetic.

SIGNATURE DETAIL — the thing that makes this design itself
The defining gesture is the showcase card's recessed top well housing an isolated, hyper-real 3D hardware icon bathed in an internal cyan-blue studio light. Recreate it by placing a 140px render over an #0e182a container with 12px inner radius, coupled with a pill identity icon in the upper-left corner.

MUST
- Use deeply saturated 3D renders with matching volumetric lighting against the dark viewport wells.
- Restrict bright electric blue (#1d63ff) to primary interactive states and critical progress indicators.
- Enclose all major modular zones in 16px corner-radius cards with subtle 1px border strokes (#1a2538).
- Pair numeric stat lines with upward or downward colored trend deltas (e.g. 11px text in #10b981).

AVOID
- Do not introduce light-colored or white card backgrounds anywhere within this interface frame.
- Do not use flat 2D vector clip art in place of illuminated 3D product showcase imagery.
- Do not use sharp 0px card corners; rounded 16px geometry is essential to the modern industrial tone.
- Avoid multi-colored button fills; reserve #1d63ff as the unified interactive trigger color.

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