FinVista Midnight

FinVista Midnight presents a high-density wealth management canvas built on an ultra-dark navy foundation (#080d18) with layered container cards (#0d1527). Color is applied with deliberate functional discipline: structural surfaces remain deeply desaturated, while glowing accents (emerald #10b981, electric teal #06b6d4, and cobalt #3b82f6) codify the three-stage priority progression and asset distribution. Typography leverages a crisp, geometric neo-grotesque set in pure white (#ffffff) for primary balances and muted slate (#64748b) for metadata, maintaining rigorous contrast without visual vibration. Cards utilize generous internal padding of 24px paired with soft 16px corner radii and hairline borders (#1e293b). What commands immediate attention is the sequential glow motif on the priority tier, drawing the eye across the financial onboarding milestones before dropping into dense, analytical metrics.

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 dark-mode web interface screen: deep-navy financial telemetry illuminated by progressive emerald, cyan, and sapphire radial glows.

LAYOUT
The viewport is configured as an asymmetrical fixed-rail layout: a narrow 240px dark sidebar pinned to the left, and a multi-tiered workspace occupying the remaining canvas. The main workspace flows top-to-bottom: header utility row with personalized greeting and quick actions, a three-column horizontal priority roadmap, a split two-column data tier (65% portfolio metrics, 35% recent transactions), and a full-width bottom alert banner. Horizontal grid gaps are rigorously locked to 20px, preserving structured vertical rhythm.

PALETTE (use these exact hex values)
- #080d18 — Canvas Deep Void: Global application viewport background behind sidebar and workspace
- #0d1527 — Card Navy Surface: Background fill for all modular dashboard panels and metric containers
- #19243a — Subtle Border Line: Delicate 1px outline isolating cards, active pill states, and dividers
- #0a101f — Sidebar Elevated Surface: Persistent left navigation column background container
- #ffffff — Text Primary White: Primary headings, major financial balances, and selected active labels
- #8493a8 — Text Muted Slate: Secondary labels, inactive navigation links, timestamps, and captions
- #10b981 — Foundation Emerald: Priority stage one radial indicator, badge, and positive delta values
- #06b6d4 — Wealth Cyan: Priority stage two illumination, line graph trajectory, and bond asset slice
- #3b82f6 — Freedom Blue: Priority stage three radial background and majority stock allocation category
- #1f173b — Insight Plum: Subtle atmospheric tinted banner fill for automated AI notifications

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Manrope, DM Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 24px heading, 30px display. Tracking -0.02em at display sizes, 0.01em at caption. The typography is clean, analytical, and authoritative, perfectly encapsulated by Plus Jakarta Sans. Its rounded geometrical forms provide warmth and modern fin-tech accessibility while maintaining supreme legibility across dense tabular financial numbers. When deploying fallback fonts like Inter, ensure tabular figure features are activated to maintain ledger alignment.

GEOMETRY & SPACING
Corner radii — cards 16px, links 9999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 24px between sections, 1440px container, comfortable density.

DEPTH
Depth is achieved entirely through chromatic luminance stepping and translucent hairline borders rather than blurred drop shadows. Base canvas sits at #080d18, elevating to #0d1527 for panels, with actionable controls rising to #152037. Subtle backlighting emerges via soft radial gradients positioned beneath key iconography to indicate prominence without physical elevation.

IMAGERY
The design eschews photographic raster assets in favor of ultra-clean, minimalist line-art glyphs set within illuminated circular badges. Vector iconography is strictly monochromatic or two-tone with consistent 1.5px stroke weights. Any real-world photography or busy 3D renders would break the sleek, data-first terminal aesthetic.

SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the trio of sequential roadmap cards featuring atmospheric radial glow halos (emerald, cyan, and royal blue) that anchor the upper fold. Each halo softly illuminates a geometric line icon beneath a floating circular stage number, turning dry financial setup tasks into an alluring, gamified onboarding journey. If replaced with flat gray containers, the interface loses its distinctive premium fintech glow.

MUST
- Use hairline 1px strokes in #19243a on all card containers to guarantee separation on deep black-blue canvases.
- Restrict neon accents strictly to functional data tokens: emerald for positive performance, cyan for active curves.
- Render currency balances in bold weight 700 with tabular figure alignment to avoid decimal jitter.
- Maintain high internal card padding of 24px to give financial telemetry breathing room.

AVOID
- Do not introduce sharp card corners; maintain a strict 16px radius throughout primary dashboard widgets.
- Never use solid neon backgrounds for buttons or cards; keep fills dark (#152037) and text illuminated.
- Do not drop drop-shadows with black spread; use subtle colored glow or border luminance instead.
- Avoid multi-colored text headlines; maintain pure #ffffff for typography titles across dark surfaces.

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