Nocturne Intelligence

Built on a near-black obsidian background (#07090e), this design uses high-contrast white text (#ffffff) and electric cobalt blue (#1c68f3) as functional focal points rather than frivolous ornamentation. The layout seamlessly connects a conversion-oriented value proposition with an expansive site index footer. The primary visual weight is held by a floating dark-mode dashboard window with a 16px radius, suspended over an ambient radial blue glow that anchors the user's eye. Micro-details include muted cyan-tinted eyebrow copy, fine 1px slate borders (#1e2634), and subtle vector contour line-art in the lower perimeter. Spacing is strictly regimented around an 8px scale, maintaining generous 80px breathing room between macro tiers.

1 design references

Prompt metadata
Shared by	@Devault
Model	GPT Image 2.5
Category	Pricing & calls to action
Dataset	stretchcloud · awesome-gpt-image-prompt-2.5

The prompt

Design a dark-mode website section: authoritative dark enterprise canvas illuminated by focused cobalt backlights and razor-sharp institutional telemetry.

LAYOUT
The interface operates on a two-tier architectural cadence inside a 1280px max-width container. The top tier features an asymmetric split hero: a 45% left-aligned conversion copy lockup facing a 55% floating product dashboard window. The lower tier transitions via ample 80px vertical space into a multi-column corporate footer anchored by brand identification on the left and a 4-column link matrix in the center.

PALETTE (use these exact hex values)
- #07090e — Obsidian Deep: Root background canvas providing maximum contrast for glowing UI elements and white typography.
- #0f141e — Dashboard Slate: Background fill for the central preview container and secondary interactive cards.
- #151b28 — Widget Charcoal: Nested telemetry card surface inside the preview interface.
- #1e2634 — Border Hairline: 1px structural dividers, container outlines, and input borders.
- #1c68f3 — Electric Cobalt: Primary CTA button fills, newsletter subscribe button, and key telemetry indicators.
- #34d399 — Metric Mint: Positive delta indicators and success status checkmarks inside dashboard.
- #ffffff — Text Stark White: H1 hero display, primary section headers, and high-emphasis labels.
- #94a3b8 — Text Muted Slate: Paragraph copy, footer navigation links, and inactive telemetry captions.

TYPOGRAPHY
Typeface Inter (or SF Pro Text, Plus Jakarta Sans, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 32px heading, 48px display. Tracking -0.03em at display, 0.05em on small caps. The typographic character is authoritative, clinical, and institutional. Set in an unadorned neo-grotesque sans-serif (matched closely by Inter), the tight display tracking (-0.03em) conveys technological precision, while generous body line-heights (1.6) keep corporate disclosures effortlessly readable on pitch-black viewports.

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

DEPTH
Depth is created through chromatic backlighting rather than drop shadows. The primary UI card floats on surface level 1 (#0f141e) above canvas level 0 (#07090e), illuminated by an electric cobalt radial aura situated behind the card. Nested telemetry widgets sit at level 2 (#151b28) with sharp 1px borders delivering precise internal stratification.

IMAGERY
This design eschews photographic imagery in favor of high-fidelity, live-rendered software UI artifacts. The dashboard preview serves as the central visual proof piece. Subtle geometric decorations like dotted array grids and faint concentric wireframe curves sit low in opacity (<15%) in the canvas periphery.

SIGNATURE DETAIL — the thing that makes this design itself
The singular identifying move is the crisp, dark-mode institutional dashboard card framed by an ethereal cobalt-blue ambient backlight (#1c68f3 at 20-30% opacity with ~60px blur). Misusing this requires splashing the blue glow across the entire canvas or blurring text; it must remain strictly localized behind the card silhouette.

MUST
- Keep the canvas near obsidian (#07090e) to let glowing cobalt blue (#1c68f3) elements hold focal power.
- Pair the primary solid blue button with a subtle adjacent text link carrying an angle-bracket affordance.
- Enclose complex data previews in a single 16px radius container with a 1px slate hairline border (#1e2634).
- Use uppercase tracking (0.08em) strictly on 11px kicker headers and footer category titles.

AVOID
- Do not use light or white backgrounds for card containers anywhere on the page.
- Do not apply heavy drop shadows with black opacities; use diffused colored radial glows instead.
- Do not mix rounded pill buttons (9999px) with rectangular components; stick to uniform 8px radii.
- Do not style footer navigation links in white; reserve stark white strictly for column headers.

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

Pricing & calls to actionDesign reference

Abyssal Biofoundry

The canvas is anchored on an ultra-dark navy-black surface (#02050b) layered with a luminous horizon glow dividing the primary call-to-action from the structural site directory. Typography relies on a neutral neo-grotesque sans-serif rendered in pure white (#f8fafc) for high-impact display titles (48px) and a soft slate-blue (#94a3b8) for secondary narrative and navigational text. Vibrant electric blue (#1d6bf3) functions as the concentrated action color, isolated to high-intent pill tags, primary action triggers, and glowing vector iconography. Compact cards and inline code snippets utilize a slightly elevated surface (#070d18) with disciplined 1px borders (#162238) and subtle 8px to 12px border radii. A reader immediately registers the luminous horizontal seam at the fold, drawing the eye directly to high-trust credentials before descending into developer-grade utility.

Pricing & calls to actionDesign reference

Abyssal Defense

Built on an impenetrable canvas of deep void navy (#090d14), this interface uses darkness not as absence of light, but as an operational deep-sea medium. Color is deployed with surgical discipline: primary calls-to-action ignite in a radiant periwinkle-to-indigo gradient (#4f46e5 to #6366f1) while operational indicators flash a restrained coral-orange (#fb7185) against slate neutrals. The primary visual weight is anchored by an expansive 24px-radius CTA panel housing an autonomous submarine render sliced by a conical cyan spotlight. Typography balances a towering condensed grotesque wordmark in the footer with clinical, hyper-legible neo-grotesque sans-serif in the CTA lockup. Structural dividers and social pill buttons use faint 1px hairline borders (#1e293b) to define boundaries without interrupting the nocturnal continuity. Inline spacing is generous, keeping legal and navigational tiers legible and calm.

Pricing & calls to actionDesign reference

Abyssal Defense Matrix

The canvas is set on an ultra-dark navy surface (#030712 to #050b14) evocative of the deep ocean, establishing a high-stakes maritime defense atmosphere. Color is utilized strictly for status and strategic hierarchy: electric blue (#2563EB to #38BDF8) demarcates autonomous superiority, while muted red (#DC2626) badges identify legacy vulnerabilities against neutral slate typography. Primary typography is a clean, neo-grotesque sans-serif with tracked uppercase badges and sharp header contrast (44px display down to 11px micro-labels). Shapes rely on subtle rounded cards (radius: 16px) with hairline semi-transparent borders (#1E293B) and glassmorphic translucent fills. A reader immediately notices the highlighted autonomous column encased in a vibrant glowing blue frame beside an illuminated stealth submarine.

Pricing & calls to actionDesign reference

Aerospace Dark Spec

This interface pairs deep abyssal navy canvas (#040911) with electric cybernetic cyan accents (#19E0B2) to deliver a high-assurance defense and aerospace identity. The layout organizes a prominent enterprise conversion banner directly above a dense, multi-column navigation footer. A glowing 3D particle landscape wave acts as an atmospheric horizon separator between the CTA area and footer columns. Visual weight relies on bold, clean geometric display typography (around 44px) paired with sharp tabular figures (32px) and translucent glassmorphism cards framed by subtle semi-transparent borders (rgba(255,255,255,0.08)). Subtle cyan micro-accents highlight key conversion triggers like the primary booking button, monospaced eyebrow trackers, and inline trust indicators.