Midnight Obsidian

The interface operates on an ultra-deep charcoal black canvas (#04070D) paired with subtle elevated navy-charcoal cards (#070E18 to #0A1320). Vibrancy is concentrated purely into electric cyan-sky highlights (#4DD4F0) which illuminate call-to-actions, category selections, and gradient headline spans. Typography is crisp and geometric, featuring high-contrast pure white headlines (#FFFFFF) alongside low-luminance slate text (#7E8B9B) for secondary metadata. Containers maintain strict rounded-rectangle geometry with radii averaging 12px to 16px, framed by faint dark-slate hairline borders (#162232). A persistent left-hand SaaS navigation sidebar frames the landing layout, bridging marketing presentation and live app experience seamlessly.

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 cyan neon against an obsidian glass canvas for meticulous legal SaaS.

LAYOUT
The page implements a dual-pane framework: a persistent left vertical app navigation bar (~180px) coupled with a two-to-three column content grid on the right canvas. The header is right-aligned with standard SaaS navigation links and a cyan CTA. Sections progress from an expansive hero presentation to stacked two-column feature spotlights, a structured 4-column service grid, and an asymmetric CTA/testimonial closure block.

PALETTE (use these exact hex values)
- #04070D — Canvas Obsidian: The absolute bottom canvas layer underpinning the entire viewport and page body.
- #080F1B — Elevated Midnight: Background fill for standard module cards, testimonials, and sidebar panels.
- #0D1826 — Active Card Surface: Interactive card hover states and the active category card fill.
- #4DD4F0 — Cyan Electric: Primary actionable CTA buttons, active sidebar tab indicator, and headline accent text.
- #1A465B — Muted Cyan Glow: Low-opacity glow halos, active outline borders, and subtle badge tints.
- #15202E — Border Hairline: 1px hairline divider lines, inactive card outlines, and input strokes.
- #38B2D6 — Border Active: 1px highlighted border for selected practice area card and focused inputs.
- #FFFFFF — Text Primary: Primary headings, high-emphasis titles, and dark button labels.
- #7E8D9F — Text Secondary: Body copy, supporting explanatory copy, inactive nav links, and sub-captions.
- #475466 — Text Dimmed: Footer copyright lines, metadata notes, and faint input placeholders.

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,General Sans,DM Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 26px heading, 32px heading-lg, 44px display. Tracking -0.02em on headings, 0.05em on all-caps micro-badges. The typographic tone is technical, commanding, and impeccably crisp, utilizing Plus Jakarta Sans (or Inter). The font brings geometric rigor with neutral curves that prevent the interface from feeling playful, asserting professional confidence appropriate for enterprise and legal tooling. Clean weights (400, 500, 700) guarantee razor-sharp legibility at miniature scales against pitch-black backgrounds.

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

DEPTH
Depth is created through luminescence layering rather than drop shadows. Surface 0 sits in dark void (#04070D), while Surface 1 modules lift slightly through deep midnight blue (#080F1B) wrapped in 1px low-contrast strokes (#15202E). Top-tier focus states utilize a delicate cyan border glow (#38B2D6) to simulate backlighting from beneath the glass.

IMAGERY
Visual assets feature 3D isometric dark-mode user interfaces bathed in ambient deep blue and cyan rim lighting, alongside stylized minimalist 2D character vignettes interacting with illuminated workstations. All graphics conform to a nocturnal blue palette; bright, photographic daylight lifestyle imagery would clash aggressively with the system.

SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the dual-tone headline technique ('run a better practice') where the final phrase shifts into vibrant electric cyan (#4DD4F0), echoing the primary CTA and active module border. Misusing it across entire multi-line sentences dilutes its punch; it should strictly be applied to the terminal 2-3 impact words of a display heading.

MUST
- Reserve solid electric cyan (#4DD4F0) strictly for primary call-to-actions, accent keywords, and active selection borders.
- Use 1px hairline borders (#15202E) to define cards rather than heavy dropped shadows.
- Pair pure white (#FFFFFF) bold titles with muted blue-grey (#7E8D9F) supporting text for strict clarity.
- Maintain uniform 12px outer radii on standard content containers.

AVOID
- Do not use saturated warm hues like yellow, red, or orange except for critical operational error states.
- Do not use stark white backgrounds on any surface or modal interior.
- Do not apply diffuse, multi-colored drop shadows; use crisp borders or tight cyan inner-glows instead.
- Do not set body paragraphs in full white; keep them muted at #7E8D9F to preserve headline hierarchy.

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