Cobalt Precision

The interface juxtaposes an immersive midnight-navy navigation rail (#0A0F1E) against an expansive, crisp alabaster workspace (#F8FAFC). Information density is handled with generous breathing room, employing pure white cards (#FFFFFF) bounded by whisper-thin outlines (#E2E8F0) and gentle 16px corner radii. Color operates strictly as an informational beacon: electric blue (#3B82F6) drives primary actions, while purposeful categorical tints—cyan, coral, and violet—distinguish metric streams without sensory overload. Typography relies on a neutral grotesque sans-serif with tight numeral tracking, ensuring dense statistics like 62.3K remain legible at a glance. Visual hierarchy descends cleanly from top-level KPI metrics to dual-column analytical visualizations and exhaustive tabular logs below.

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: deep navy anchor framing high-clarity data canvases illuminated with targeted chromatic sparks.

LAYOUT
Structured around a persistent left rail (approx 240px wide) and a primary responsive dashboard grid. The main content flows from an overarching title and utility bar into a 4-column KPI metric tier. Below sit a 2:1 split section for temporal trends and donut breakdowns, followed by a 3-column split for tables, geography, and real-time streams, concluding with a full-width tabular reports log.

PALETTE (use these exact hex values)
- #0A0F1E — Midnight Rail: structural backdrop for the persistent vertical sidebar navigation
- #F8FAFC — Canvas Background: dominant light background supporting all primary dashboard cards and headers
- #FFFFFF — Surface Card: container background for analytical modules, tables, and metric summaries
- #3B82F6 — Electric Cobalt: primary interactive fill for key CTAs, active navigation pill, and lead line plots
- #0F172A — Slate Text Primary: high-contrast body text, metric numerals, and major card titles
- #64748B — Muted Slate: secondary metadata, table headers, inactive navigation links, and axis lines
- #06B6D4 — Cyan Spark: visual category identifier for session indicators and secondary trendlines
- #F43F5E — Coral Glow: categorical marker for conversion events and negative delta anomalies
- #10B981 — Emerald Trend: positive percentage delta indicators and real-time status pulses
- #E2E8F0 — Subtle Border: card perimeter divider rules and interior table row delimiters

TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px subheading, 18px heading, 24px display. Tracking -0.02em at large numbers, 0 at captions. The type system communicates objective competence and executive clarity. Inter or an equivalent modern neo-grotesque ensures numbers remain tabular and balanced alongside compact, utilitarian UI labels. Text weights are distributed carefully: bold 600-700 weights are reserved for core quantities, while medium 500 anchors navigation links.

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

DEPTH
Depth is created almost entirely without blurred drop shadows. The design relies on flat planar layering: dark navy creates the background floor for navigation, while cards sit on an off-white plane (#F8FAFC) enclosed by crisp 1px borders (#E2E8F0). In rare interactive states, an imperceptible 0 1px 3px rgba(0,0,0,0.05) shadow is permitted.

IMAGERY
Visual media is strictly abstract, mathematical, and data-centric. Vector maps use soft periwinkle fills, chart segments feature solid saturated fills, and tiny 16px geometric line icons represent data categories. No photographic imagery, textured backgrounds, or skeuomorphic elements are permitted.

SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone structural architecture: an uncompromising midnight-navy operational rail seamlessly tethered to an expansive, airy porcelain workspace punctuated by multi-hued micro-sparklines. Misusing this pattern by turning the entire canvas dark or cluttering cards with decorative background gradients destroys its corporate balance.

MUST
- Anchor metric cards with soft, categorical-tinted sparklines directly matching the corresponding icon badge tint.
- Maintain high contrast between the midnight navy sidebar (#0A0F1E) and the bright alabaster workspace (#F8FAFC).
- Use 16px border-radius consistently across all analytical dashboard cards.
- Restrict vibrant primary cobalt (#3B82F6) strictly to active selection states, call-to-action buttons, and dominant chart paths.

AVOID
- Do not introduce heavy drop shadows; depth must rely on precise border lines and subtle tonal contrast.
- Avoid using multiple high-saturation colors inside a single metric card tile.
- Do not mix rounded pill buttons with sharp, square-cornered action elements.
- Never render table cell dividers in dark tones; maintain subtle #E2E8F0 hairpins.

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