Modern Finware

The canvas is built upon an ultra-warm off-white foundation (#FBFBFA) that deviates from sterile enterprise blues in favor of tailored editorial poise. Visual hierarchy is strictly enforced through monochromatic charcoal typography (#111318) disrupted strategically by a distinct burnt-clay terracotta (#C8533F) reserved for pivotal heading words and category badges. Spacing is expansive and calibrated to an 8px grid with generous section buffers exceeding 120px, creating breathing room for floating UI artifacts. Cards and containers leverage 16px to 20px radii, dressed in translucent white or crisp opaque panels with hairline borders (#EAE8E3). The user is immediately grounded by the juxtaposition between structured enterprise copy on the left and an airy, isometric credit-card composition suspended over soft pistachio and peach ambient glows (#75B88D, #F28E75) on the right.

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 fintech infrastructure softened by warm bone surfaces, crisp burnt-clay emphasis, and weightless isometric glass cards.

LAYOUT
The page flows as a structured single-column stack broken into strict 50/50 hero splits and 3-column feature grids. Header navigation anchors the top with inline utility links and a right-aligned CTA. Below the hero split and logo ribbon, sections alternate between 3-column micro-cards and asymmetric 40/60 copy-to-interface demonstration layouts, culminating in a full-width dark developer console.

PALETTE (use these exact hex values)
- #FBFBFA — Bone Canvas: dominant light background tone across hero and primary content blocks
- #FFFFFF — Card White: elevated card surfaces, metrics dashboard, and feature containers
- #111318 — Obsidian Dark: primary call-to-action buttons, dark code terminal section, and logo
- #C8533F — Terracotta Flame: highlighted focal words in primary headings, eyebrow labels, and icon tints
- #FBEFEB — Peach Blush: background for circular feature icons and category pill backgrounds
- #4EA874 — Terminal Sage: positive metrics indicators, checkmark badges, and chart trendlines
- #121417 — Charcoal Text: primary headings, prominent metrics values, and primary button labels
- #5A5E66 — Slate Body: explanatory paragraphs, navigation links, and inactive metrics
- #E9E7E1 — Hairline Border: subtle boundaries around feature cards, dashboard preview, and code containers

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, Haas Grotesk), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 38px heading, 64px display. Tracking -0.03em at display, -0.01em at body, 0.08em at eyebrow. The typographic tone is architectural, rational, and modern, conveyed via a neo-grotesque sans-serif with tight negative tracking at scale. It evokes Swiss institutional reliability while remaining friendly through open apertures and warm accenting. Inter or Plus Jakarta Sans are optimal substitutes due to their robust micro-legibility and geometric numerals.

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

DEPTH
Depth is delivered primarily through dimensional graphic rendering rather than aggressive UI dropshadows. Standard cards sit flat or slightly elevated with hairline 1px borders (#E9E7E1) and subtle 4px vertical offsets with 12px blur at 3% opacity. The dramatic floating effect is reserved for the hero illustration, using soft ambient blur pools beneath isometric cards.

IMAGERY
Imagery features weightless, floating 3D plastic/frosted credit cards set at a dynamic isometric incline. Cards cast soft colored reflections—pistachio green (#75B88D) and coral peach (#F28E75)—onto the floorplane. Photography of real people is completely absent; abstract dimensional hardware and clean mock UI vectors establish authority.

SIGNATURE DETAIL — the thing that makes this design itself
The signature visual device is the dual-tone heading pairing charcoal with warm terracotta (#C8533F), anchored beside floating isometric frosted payment cards that emit ambient peach and mint glows. Misusing this pattern by tinting entire paragraphs or applying vibrant neon hues will destroy its restrained financial elegance.

MUST
- Keep the canvas background strictly on warm tone #FBFBFA to avoid clinical sterile blues.
- Restrict the terracotta accent (#C8533F) strictly to eyebrow badges and 1-2 highlighted headline words.
- Enclose all feature icons inside 48px round blush discs (#FBEFEB).
- Maintain generous 128px vertical padding between top-level content sections.

AVOID
- Do not use pure black (#000000); use deep obsidian #111318 for type and buttons.
- Do not add drop shadows exceeding 8px blur on standard white feature cards.
- Never highlight entire paragraphs in terracotta; isolate emphasis to short header phrases.
- Do not use full pill (999px) border radius on the primary action buttons.

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