Cerulean Ledger

The design deploys an ultra-pure white canvas (#FFFFFF) structured with expansive architectural breathing room and high-clarity typography. High-saturation cobalt blue (#0D47EC) functions strictly as a directional vector and focal amplifier, appearing on the primary CTA button, the brand emblem, and the emphatic second line of the 56px hero display heading. Visual hierarchy is anchored by a sharp contrast between slate neutrals (#64748B) and deep obsidian headers (#0B0F19), preventing information overload across dense financial data. Radii follow a precise hierarchy: standard interactive buttons take an 8px radius, container pills measure 999px, and floating analytical cards employ smooth 16px corners. Isometric 3D glass-and-matte telemetry blocks hover in the right visual field, casting soft diffuse shadows with 24px blur and low opacity to establish weightless dimensional depth. A four-column modular grid at the base spans a 1240px container, grounding the interface with uniform 24px icon badges and crisp system copy.

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: crystalline financial infrastructure pairing sterile high-key whitespace with vivid isometric telemetry cubes and electric cobalt accents.

LAYOUT
The page adheres to an asymmetrical two-column hero layout inside a 1240px max-width container, flanked by generous 96px vertical margins. The left column hosts the vertical narrative stack: badge, massive split-color title, body description, dual CTAs, and a trust metric bar. The right column is entirely devoted to the intricate floating isometric illustration. Beneath this focal area, an expansive horizontal separator opens into a balanced four-column infrastructure feature grid.

PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Dominant background providing sterile, clinical whitespace for maximum contrast
- #0D47EC — Electric Cobalt: Hero display text accent, primary button fill, and active navigation indicator bar
- #0B0F19 — Obsidian Deep: High-contrast headings, main logo wordmark, and primary statistical values
- #64748B — Slate Muted: Body copy, inactive navigation links, secondary metadata, and feature explanations
- #F1F5F9 — Subtle Pill Fill: Background fill for top status badge and interactive utility tags
- #E2E8F0 — Border Frost: Ultra-subtle 1px boundary lines on floating isometric analytical cards and badges
- #10B981 — Telemetry Emerald: Positive stock percentage indicators, uptrend ticker points, and status dots
- #E11D48 — Telemetry Magenta: Isometric visual focal accents on 3D data block diagrams and order asks

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 20px subheading, 56px display. Tracking -0.03em on display, -0.01em on body. The typographic tone is authoritative, clean, and developer-centric, heavily influenced by contemporary fintech giants. Plus Jakarta Sans brings high legibility at micro sizes like financial ticker readouts while retaining sharp geometric authority at 56px display sizes. Inter or General Sans serve as frictionless open-source substitutes without compromising rhythm or stroke balance.

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

DEPTH
Depth is achieved through axonometric perspective rather than layered surface elevations. Foreground cards and the central isometric cube cast featherlight, expansive ambient shadows (#0B0F19 at 0.04 to 0.08 alpha, 24px blur, 12px Y-offset) creating a weightless, floating hardware aesthetic over sterile white.

IMAGERY
Imagery consists exclusively of clean, matte-finish 3D isometric technical blocks and pristine data cards. Diagrams utilize soft pastel gradient highlights (sky blue, subtle violet, gentle rose) over crisp architectural geometries. Never use real-world photography, stock lifestyle photos, or noisy textures.

SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the dual-tone hero display header paired with an axonometric 3D technical node diagram that translates abstract API concepts into tangible floating hardware. To apply it properly, let the primary noun carry the cobalt highlight while surrounding it with strict black lettering and pristine white space. Misusing it involves tinting multiple phrases or cluttering the 3D visual field with non-isometric flat artwork.

MUST
- Retain pure white (#FFFFFF) dominance across at least 70% of visible viewport area.
- Isolate electric cobalt (#0D47EC) strictly to high-priority user actions and display emphasis.
- Use 56px Plus Jakarta Sans bold with negative tracking (-0.03em) for hero headlines.
- Maintain exact 16px corner radius and 1px border (#E2E8F0) on all floating data containers.

AVOID
- Never tint the primary page canvas with full-bleed gray or dark themes.
- Do not add dark outlines or solid fills to secondary CTA links.
- Avoid heavy drop shadows; use diffuse multi-stop shadows with less than 8% opacity.
- Do not use non-isometric or photorealistic imagery in place of modular 3D diagrams.

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