Cobalt Lumina

The interface is built on a pristine porcelain-grey base (#F4F6FC) that shifts the typical SaaS dashboard into an editorial, spacious workspace. Colour hierarchy is strictly disciplined: structural neutral slate (#0F172A) drives reading contrast, while vibrant cobalt blue (#2B66F6) commands interactive focus and key display text. Secondary accents appear exclusively in soft pastel pods (#E1F8F6, #FEECEB, #F0EBFE) backing vector icons to distinguish analytical categories without cognitive noise. Spacing is airy and breathable with generous margins around a hero lockup flanked by claymorphic 3D imagery. The bottom metric bar sits inside an elevated 20px rounded card with delicate multi-layered ambient drop shadows (blur 30px, opacity 4%).

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: tactile enterprise precision wrapped in airy porcelain and luminous cobalt blue.

LAYOUT
The screen uses a distinct hybrid layout: an 80px fixed vertical navigation rail on the far left, an open top header carrying breadcrumbs and actions, and a 60/40 two-column hero composition. The left hero column holds the narrative stack (pill tag, display title, paragraph, button row, micro-features), while the right accommodates the sprawling 3D clay illustration. The bottom is anchored horizontally by an elevated four-column metric summary deck.

PALETTE (use these exact hex values)
- #F4F6FC — Porcelain Canvas: dominant background canvas across the full viewport and sidebar backing
- #FFFFFF — Pure White: elevated surface for metric container, button backgrounds, and active state highlights
- #2B66F6 — Electric Cobalt: primary call-to-action fills, key headline emphasis, and active navigation indicators
- #0F172A — Deep Slate: primary display typography, header brand label, and prominent stat numerals
- #64748B — Muted Ash: secondary body copy, inactive navigation labels, and metric descriptor text
- #EDF4FE — Soft Ice Blue: subtle background wash for pill tags, sidebar active tab, and metric icon tiles
- #E0F7F5 — Pastel Aqua: background for data-driven analytics feature and metric indicator badges
- #FDECEB — Blush Coral: background tint for conversion and success rate statistic icons
- #F1ECFE — Pastel Violet: background backing for velocity and time-to-value performance indicator tiles

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 32px heading, 52px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is authoritative yet approachable, driven by geometric clarity, circular bowls, and open counters. Plus Jakarta Sans balances technical precision with warmth, perfectly matching strategic digital consulting. For drop-in replacements, Inter provides similar clarity, while DM Sans or Outfit can match the slightly friendlier geometric display weights.

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

DEPTH
Depth is created using extremely diffuse ambient shadows (0 16px 36px rgba(43,102,246,0.04) and 0 8px 24px rgba(15,23,42,0.03)) rather than hard drop-shadows or borders. Surface hierarchy rises from the tinted porcelain base to pure white metric islands. The 3D scene elements cast gentle directional ground shadows that visually integrate them into the screen surface.

IMAGERY
Visual assets leverage tactile 3D claymorphic renders with soft, directional studio lighting and matte ceramic materials. The hero pairs a white laptop displaying clean vector workflow diagrams with a monumental cobalt blue chess knight piece and botanical desktop accents. Flat photography, generic vectors, or harsh metallic renders would completely break the organic high-craft tone.

SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone headline split ('What Is' in deep slate, 'Digital Strategy' in electric cobalt) floating immediately above a frosted 3D clay setup with a matte cobalt chess piece. Replicate it by pairing two-tone high-contrast display type with soft pastel-grounded stat pods and tactile non-glossy 3D metaphors. It fails if the 3D assets become hyper-realistic or glossy.

MUST
- Keep the primary background strictly tinted porcelain (#F4F6FC) rather than pure clinical #FFFFFF.
- Reserve solid electric cobalt (#2B66F6) strictly for interactive primary buttons, active states, and headline emphasis.
- Enclose descriptive icons inside square rounded containers with 20-30% pastel color fills.
- Use generous whitespace around 3D illustrations so shadows can fade without clipping.

AVOID
- Do not use dark high-contrast borders; boundaries should rely on surface color shifts and soft shadows.
- Never apply saturated primary blue to more than one word group in the main headline.
- Do not render flat stock photography; visual assets must be tactile, 3D clay/matte renders.
- Avoid harsh black typography; anchor all dark text to deep navy slate (#0F172A).

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