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.

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: precision industrial audio hardware framed by warm off-white architecture and pure deep slate contrasts.

LAYOUT
Asymmetrical dashboard-meets-editorial grid anchored by a 200px fixed dark navigation rail on the left. The content viewport arranges a hero presentation tile up top, followed by an irregular 4-column bento grid where featured products occupy double-height or double-width slots, terminating in trust badges and a dark multi-column footer.

PALETTE (use these exact hex values)
- #121316 — Pitch Sidebar: Vertical fixed navigation rail and bottom footer background.
- #F4F4F6 — Canvas Warm Grey: Global application body background behind cards.
- #FFFFFF — Card Island White: Modular content tiles, hero container, and search fields.
- #1E6BFF — Electric Cobalt: Primary purchase buttons, active carousel dots, and notification count badges.
- #16171A — Carbon Text: Main titles, product names, prices, and high-emphasis labels.
- #767982 — Muted Slate: Category superheaders, descriptive copy, navigation inactive items.
- #E5A93C — Amber Status: Status indicator dot for new release badges.
- #E8E9ED — Subtle Border Grey: Input outlines, divider lines, and button carousel arrows.

TYPOGRAPHY
Typeface Inter (or SF Pro Display, Neue Haas Grotesk, Helvetica Neue), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 32px heading-lg, 52px display. Tracking -0.03em at display, 0.08em at uppercase micro labels. Disciplined, clinical, and sophisticated. The typography channels minimalist Swiss graphic design and modernist industrial identity, letting product specs and titles speak with measured authority through stark contrast in scale rather than decorative font switches.

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

DEPTH
Depth is rendered flat and graphic without traditional blurred drop shadows. The design relies entirely on surface stacking: a dark level-0 sidebar and footer, level-1 warm grey canvas, and level-2 pure white cards with crisp 1px borders or boundary contrast against the background.

IMAGERY
Studio-grade industrial 3D product renders showcasing tactile materials: ribbed dark bronze, brushed aluminium, turned knobs, and fluted acoustic cones. All photography is hyper-detailed with dramatic rim lighting and subtle reflections, avoiding real-world lifestyle clutter.

SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric bento card grid of crisp white rounded islands (#FFFFFF) resting on a warm grey canvas (#F4F4F6), framed by a pitch-black vertical rail (#121316) and punctuated by rare hits of pure electric blue (#1E6BFF). Misusing it involves softening the sidebar to grey or scattering blue throughout text links.

MUST
- Keep card backgrounds crisp #FFFFFF against the pale grey #F4F4F6 canvas.
- Reserve vibrant cobalt blue (#1E6BFF) exclusively for primary CTAs and interactive indicators.
- Use generous 20px corner radii on all card containers.
- Format category labels in tracked, muted uppercase at 11px or 12px.

AVOID
- Do not use heavy drop shadows; depth is conveyed purely via surface color contrast.
- Never tint card backgrounds with blue or warm saturation.
- Avoid centered text within product catalog cards; always left-align typography.
- Do not make buttons rectangular or sharp; always use full 9999px pill radii.

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

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.

Web designDesign reference

Aegis Health

The interface operates on a three-tier light architecture: an ultra-pale slate-tinted canvas (#F8FAFD), pristine white card containers (#FFFFFF), and selective saturated cobalt accents (#2B6BEE). Color is restrained strictly to interactive triggers, status indicators, and category iconography, preventing clinical software fatigue. Typography relies on a crisp geometric sans-serif, using heavy display scale (around 48px) against subdued body copy (#64748B at 14px) for rapid scanning. Radii remain generously soft throughout, settling at 16px to 20px on cards and 10px on interactive buttons, instilling calm and approachable professionalism. The primary visual hook is the layered hero montage combining human medical photography, translucent cyan backing discs, and crisp floating statistic chips with 16px blur shadows.