Cobalt Clay

The canvas rests on a crisp white (#FFFFFF) background energized by a soft apricot-amber ambient gradient (#FEF3C7) glowing in the upper-right hero corner. Color operates strictly with functional hierarchy: deep slate (#0F172A) for commanding display typography, vivid cobalt blue (#2563EB) for critical interaction targets and accented headline lines, and fresh mint green (#10B981) for trust validation checkmarks. Type is set in an architectural geometric sans with heavy 800 weights at 56px displays and tight letter-spacing (-1.5px). Cards employ a generous 16px radius, hairline borders (#F1F5F9), and 32px internal padding. The eye is instantly drawn to the 3D isometric matte clay laptop and server render surrounded by floating white metric chips.

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 isometric devtools illuminated by precise cobalt accents and luminous white card surfaces.

LAYOUT
The page opens with a standard top navigation anchored by a brandmark left, centered plain text links, and an accent button right. The hero employs an asymmetrical two-column layout: left-aligned 56px stacked display text with dual CTA buttons, balanced by an isometric 3D illustration against an ambient warm glow. Below the hero sits an uppercase monochrome partner logo bar, leading into a centered 4-column feature grid and an asymmetric security split section.

PALETTE (use these exact hex values)
- #FFFFFF — Pure White Canvas: Primary surface background across the page and interior of all feature cards
- #2563EB — Electric Cobalt: Primary CTA button fill, highlighted headline words, category tags, and bottom CTA banner
- #0F172A — Deep Slate: High-contrast headings, feature titles, and primary navigation text
- #64748B — Muted Slate: Paragraph descriptions, partner logo icons, and secondary caption labels
- #10B981 — Validation Mint: Checkmark icons, positive trend metrics (+12.5%), and verified security bullet icons
- #FDE68A — Warm Dawn Glow: Top-right soft ambient gradient radiating behind the 3D hero isometric illustration
- #F1F5F9 — Hairline Border: 1px structural divider lines enclosing feature cards, buttons, and floating chips
- #EFF6FF — Soft Azure Tint: Background fill for eyebrow pills like the 'FEATURES' badge

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,Public Sans,system-ui), weights 400/500/600/700/800. Sizes 12px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 36px heading, 56px display. Tracking -0.03em at display, 0 at body, 0.05em at caps. Plus Jakarta Sans delivers an unapologetically technical, confident, and crisp product demeanor. The extreme weight delta between bold 800 headings and refined 400-500 body text creates instant hierarchy typical of top-tier developer platforms. If substituting, Inter or Public Sans provide identical legibility and neutral authority.

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

DEPTH
Depth is created strictly through atmospheric, soft drop shadows (0 12px 32px -4px rgba(15, 23, 42, 0.06)) behind floating white UI chips and 3D clay objects. Cards sitting on the main page avoid hard drop shadows, relying instead on clean 1px hairline borders (#F1F5F9) to distinguish themselves from the white canvas. The isometric perspective gives natural spatial layering without heavy skeuomorphic shading.

IMAGERY
Imagery relies entirely on 3D isometric claymorphism: smooth matte white, soft blue, and lilac geometries depicting server racks, shields, and laptops. UI screens inside illustrations display hyper-simplified line charts and monospace-styled data tables. Photographic portraits, hand-drawn doodles, and harsh flat vector graphics are strictly off-brand.

SIGNATURE DETAIL — the thing that makes this design itself
The two-tone display headline split ('Your data. / Our business.') juxtaposed immediately against a 3D isometric clay scene with a luminous apricot corner backdrop. This balances sterile developer-tool credibility with warm consumer-grade approachable craft.

MUST
- Reserve #2563EB strictly for primary actions, pill tags, and deliberate title emphasis words.
- Maintain high display typography contrast using 800 weight with tight tracking (-0.03em).
- Enclose all feature cards in 1px #F1F5F9 borders with exact 16px corner radii.
- Pair isometric 3D renders with floating white metric chips to anchor visual context.

AVOID
- Do not use dark gray or black backgrounds; keep the canvas predominantly pure white.
- Do not apply heavy dark drop shadows; shadows must remain diffused and light (rgba <= 0.08).
- Do not round main CTA buttons to pills; keep buttons at 8px radius while badges remain 999px.
- Do not color entire headings in blue; color only the second phrase or decisive keyword.

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

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.