Porcelain Studio

The interface operates on an ultra-light dual canvas: an off-white outer background (#F6F8FC) flanking a pure white core layout (#FFFFFF). Saturated cobalt blue (#2B66F6) serves strictly as an intentional focal driver, reserved for active sidebar pills, primary CTAs, numbered badges, and key metric progress bars. Typography is rooted in geometric sans-serif styling, commanding strong hierarchy through massive bold headings (around 46px) contrasted with airy light-grey body copy (#636B79). Spacing is disciplined around an 8px grid with generous section buffers and uniform 12px to 24px rounded card silhouettes. Soft ambient dropshadows (such as 0 10px 30px rgba(0,0,0,0.04)) create float without tactile friction.

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: clinical off-white minimalism animated by saturated cobalt accents and translucent glassy curves.

LAYOUT
The composition is structured around an asymmetrical split. A slim fixed navigation rail occupies the leftmost band, while the main body flows within a wide, air-filled single-column layout. The hero features a two-column distribution with left-aligned typographic pitch and right-aligned 3D glass sculpture. Subsequent modules cascade sequentially: a five-column linear process chain, followed by an asymmetric portrait/biography pairing.

PALETTE (use these exact hex values)
- #F6F8FC — Canvas Ice: Outer structural page background and left vertical nav rail container
- #FFFFFF — Pure White: Primary content container, floating card surfaces, and elevated overlays
- #2B66F6 — Cobalt Blue: Primary buttons, active navigational pills, process badges, and skill progress fills
- #EEF3FF — Pale Blue Tint: Active navigation item background and soft hover highlights
- #1A1D24 — Charcoal Black: High-contrast headings, main page titles, and dark stat numbers
- #636B79 — Muted Slate: Paragraph body copy, secondary metadata labels, and inactive nav icons
- #E6ECF5 — Ghost Border: Light card strokes, outline buttons, and connector link rules
- #27C278 — Status Green: Availability indicator dot in floating badges and contact metadata

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,General Sans,Urbanist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 28px heading, 46px display. Tracking -0.03em at display, 0.05em at caps. The typographic tone is composed, rational, and modern, conveyed through clean geometric grotesk shapes (Plus Jakarta Sans or Inter). Tight negative tracking on large weights brings contemporary editorial elegance, while uppercase micro-labels inject architectural discipline. The handwritten signature in the About module breaks the rigidity with personal warmth.

GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, airy density.

DEPTH
Depth is handled through whisper-soft ambient diffusion rather than layered stacking. Cards and floating pill overlays use low-opacity dropshadows (0 10px 30px rgba(26,29,36,0.05)) paired with crisp 1px borders (#E6ECF5). Background illustrations employ translucent 3D glass morphic curves that sit flush behind typography.

IMAGERY
Photography consists of warm, naturally lit editorial portraits of the creator styled in minimal monochromatic attire, clipped with generous 24px rounded corners. 3D accents take the form of fluid, translucent glass ribbon shapes tinted in subtle periwinkle, sky blue, and white reflections. Avoid harsh realism, busy collages, or high-contrast stock renders.

SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of ultra-clean corporate monochrome layouts interrupted by a fluid, frosted 3D glass ribbon sculpture behind a floating 'Available for Freelance' status pill. To execute properly, keep the 3D element low in saturation with high specular translucency, anchoring a soft glassmorphic pill directly over its core vortex.

MUST
- Anchor the layout using a stark white core canvas flanked by the soft #F6F8FC rail.
- Limit saturated blue (#2B66F6) solely to critical interaction indicators and numbered points.
- Maintain high padding (minimum 64px to 80px) between distinct vertical content modules.
- Use geometric sans-serif typography with tight letter spacing (-0.03em) on headings larger than 32px.

AVOID
- Do not apply dark, muddy drop shadows; keep elevation soft with under 6% opacity.
- Do not use saturated blue for generic card backgrounds or large solid blocks.
- Do not crowd portrait photography; overlap only with dedicated metric pill overlays.
- Do not use heavy black borders; use #E6ECF5 or transparent alpha strokes.

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.