Obsidian Cyberdeck

A deep midnight-black operations dashboard built on an ultra-dark canvas of #080c14, engineered for enterprise service discovery. Hierarchy relies on high-contrast luminescent accents—predominantly electric violet #6336f5 for primary CTAs and neon cyan #00f2fe for key system telemetry—against low-luminance slate containers (#0e1322) framed by razor-thin 1px borders (#182033). Clean neo-grotesque sans typography sets titles in crisp white #ffffff (28px hero, 16px card headers) over muted blue-gray #707e94 descriptive text. Content is rigorously modular, deployed across an 8px grid with uniform 12px card corner radii and consistent 24px grid gaps. The immediate visual anchor is the suite of glowing, isometric 3D dioramas illuminating each modular tile like miniature server racks suspended in space.

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: dark isometric command console bathed in neon cyan and ultraviolet phosphor glow.

LAYOUT
The workspace features a persistent 240px left-hand vertical sidebar containing categorized tool links, flanked by an expansive main canvas. A top utility strip handles universal command search and primary project instantiation. Below, the catalog header pairs an overview statement and a 4-part KPI strip with an oversized hero isometric cluster, followed by a filter toolbar and an infinite 3-column service card grid.

PALETTE (use these exact hex values)
- #080c14 — Void Canvas: Root application background behind sidebar, topbar, and main content grid
- #0e1322 — Panel Slate: Background fill for service cards, filter dropdowns, and stats container
- #182033 — Border Hairline: 1px structural outline on cards, inputs, and divider rules
- #6336f5 — Electric Violet: High-priority actions like 'Create Project' button and active navigation indicators
- #00f2fe — Cyber Cyan: Metric counter numerals, category tag borders, and primary 3D illumination
- #10b981 — Emerald Spark: SLA uptime telemetry metric and micro-trend sparkline indicators
- #e024c3 — Fluorescent Magenta: Accent lighting within isometric illustrations and unread notification pips
- #ffffff — Pure Optic White: Primary headings, active labels, and card titles
- #707e94 — Steel Fog: Secondary copy, supporting paragraphs, inactive navigation, and placeholder text

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, Montserrat), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px subheading, 22px heading, 28px display. Tracking -0.02em at display, 0 at body. Clean, crisp, and mechanical: a modern geometric neo-grotesque (Plus Jakarta Sans or Inter) set in heavy weights for titles and high-tracking small caps for metadata. It conveys engineering rigor and high-frequency cloud infrastructure without feeling overly stylized or playful. Free alternatives like Inter or SF Pro Display match the exact cadence effortlessly.

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

DEPTH
Depth is created entirely without diffuse drop shadows. Hierarchy is achieved through luminescent value contrast: an obsidian canvas (#080c14) underlies slightly raised navy slate panels (#0e1322), which are delimited by 1px hairline borders (#182033) and lit from within by the intense neon reflections radiating off the isometric 3D artwork.

IMAGERY
Every service is visually defined by an isometric 3D diorama built from dark polished hardware, glowing translucent cubes, and holographic UI panels lit with neon cyan, purple, and magenta. Photography, hand-drawn editorial art, or flat corporate vector graphics would completely break the cyber-command immersion.

SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the glowing isometric miniature diorama centered on each catalog tile, reflecting cyan and magenta light directly onto the dark slate background. It transforms a routine enterprise service listing into an interactive cybernetic server room. It is commonly misused by using inconsistent lighting angles or replacing the 3D dioramas with flat, muted 2D icons.

MUST
- Ground every floating surface in #0e1322 with a precise 1px #182033 stroke.
- Pair isometric 3D models strictly with neon cyan (#00f2fe) and magenta (#e024c3) edge lighting.
- Reserve vibrant electric violet (#6336f5) strictly for primary call-to-action buttons.
- Maintain strict 24px gutter spacing between all service cards in the primary grid.

AVOID
- Never introduce photographic portraits or flat corporate vector illustrations.
- Do not use warm yellow or orange accents that compromise the cool cybernetic palette.
- Avoid heavy drop shadows; rely on hairline borders and internal image glows for depth.
- Do not render card backgrounds in pure pitch black #000000; depth requires the #0e1322 substrate.

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

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.