Obsidian Mint

Built on an ultra-dark navy foundation (#0B101B), the interface organizes personal wealth telemetry across modular container cards rendered in a lifted slate-navy (#131C2E) with hairline borders (#1E2A42). Color functions strictly as semantic hierarchy: a vibrant seafoam mint (#38BDF8 / #2DD4BF) designates primary actions and positive trajectory, supported by an alert coral (#F43F5E) for negative deltas, alongside purposeful amber and indigo accents confined to portfolio segmentations. Typography relies on a neutral grotesque sans-serif set with tight tracking (-0.02em) on high-contrast numerals ($842,680.54 at 28px) and muted mid-gray (#94A3B8) for secondary descriptors. Card corners maintain a uniform 14px radius with internal cell paddings strictly locked to 20px and 24px. The eye is immediately captured by the top-row wealth totals and the dual-engine portfolio visualization uniting a multi-tone donut chart with a glowing area line graph.

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-sea dark mode precision where glowing mint telemetry guides high-net-worth decisions with effortless institutional calm.

LAYOUT
A rigid two-column layout pairs a fixed ~240px dark sidebar navigation on the left with a fluid, multi-row dashboard canvas on the right. The canvas opens with a utility top-bar followed by a personalized welcome row, leading into a 4-column metric card deck. Below sits a 50/50 split panel housing asset allocation and growth analytics, followed by a full-width accounts ledger and a final two-column split between transactions and market tickers.

PALETTE (use these exact hex values)
- #0B101B — Abyssal Navy: Root application background canvas behind all modular panels and global navigation chrome
- #131C2E — Elevated Midnight: Primary surface fill for KPI containers, data tables, and chart grouping frames
- #1E2A42 — Deep Slate Stroke: Hairline perimeter stroke separating card boundaries and table row dividers
- #2DD4BF — Signal Mint: Primary action button fill, positive delta text, and active chart telemetry paths
- #F43F5E — Vivid Coral: Explicit downward percentage shifts and negative outflow transaction indicators
- #6366F1 — Royal Iris: Allocation chart segment denoting fixed-income assets and secondary chart categories
- #F59E0B — Amber Gold: Commodity ticker badge and cash reserve visual identifier in donut distributions
- #F8FAFC — Pure Crisp: Highest-contrast text for critical financial balances, titles, and section headers
- #94A3B8 — Muted Slate: Labels, meta timestamps, table column headers, and inactive navigational states

TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Text, Geist), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px heading, 28px display. Tracking -0.02em at display, 0.01em at caption. The typography is disciplined, institutional, and technical, perfectly aligned with executive wealth monitoring. Using Inter or comparable geometric-grotesque typefaces ensures numbers remain legible at microscopic resolutions (11px captions) while carrying commanding authority at display sizes ($842,680.54 at 28px). Plus Jakarta Sans or Geist can serve as exact drop-in replacements.

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

DEPTH
Depth is achieved through surface tone stacking rather than blurred drop shadows. The bottom layer (#0B101B) serves as the floor, while primary content cards lift one level upward into #131C2E bounded by 1px stroke (#1E2A42). Inner controls like inputs, badges, and active state chips introduce a third elevation (#1A253C) with zero shadow blur.

IMAGERY
This interface avoids photographic imagery entirely, relying instead on clean vector brand glyphs (Apple, Starbucks, Tesla) encased in minimal circular or rounded-square asset badges. Charts and sparklines serve as the visual centerpieces, emphasizing mathematical exactness through smooth Bézier lines and gradient fills. Any realistic photography or decorative 3D illustrations would feel profoundly out of place.

SIGNATURE DETAIL — the thing that makes this design itself
The dual-engine Portfolio Overview module combining a multi-color segmented donut chart with a glowing seafoam-mint spline graph against a deep slate container. It instantly telegraphs both balance distribution and historical yield in a single glance. Misusing it means separating these two data points into disconnected, full-width cards or replacing the glowing mint vector line with a flat monochrome curve.

MUST
- Keep card backgrounds strictly in #131C2E with subtle 1px borders (#1E2A42) rather than high-contrast drop shadows.
- Restrict pure white (#F8FAFC) to primary financial values and titles to maintain reading hierarchy.
- Use signal mint (#2DD4BF) exclusively for positive performance trends, key actions, and active telemetry paths.
- Format tabular numbers with tabular figures (tnum) or mono styling to guarantee financial column alignment.

AVOID
- Never apply saturated background fills to cards; surfaces must remain deep dark navy (#131C2E).
- Do not use generic blue hyperlinks; all navigation relies on muted gray rows transitioning to crisp white.
- Avoid thick borders greater than 1px; panel separation should feel precision-milled, not blocky.
- Never mix bright neon greens for positive deltas; adhere strictly to balanced mint (#2DD4BF).

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