Cobalt Metric

The interface operates on a pristine porcelain-to-slate canvas (#F8FAFC) featuring an asymmetrical split-hero layout. Chromatic intensity is strictly rationed: ultra-dark ink (#0B0F19) commands text and primary actions, while vivid royal blue (#2563EB) is reserved for brand marks, active telemetry, and an expressive gestural underline. High-density data architecture is demonstrated via a lifelike floating software card with a 20px border radius and delicate perimeter strokes (#E2E8F0). Typography leverages an authoritative neo-grotesque set tightly with negative tracking at display sizes (56px) and crisp, tabular legibility across dashboard micro-copy (11px to 13px). Spacing maintains comfortable breathing room around high-density informational clusters. The viewer is immediately captured by the textural contrast between the gestural blue brush flourish and the surgical accuracy of the product preview.

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: clinical b2b instrumentation softened by organic cobalt ink gestures and airy porcelain canvas tones.

LAYOUT
The header spans full width with a clean split: brand and navigation on the left/center, authentication controls on the far right. The hero breaks into an asymmetrical two-column desktop arrangement where the detailed product preview occupies the left 52% and the marketing typography anchors the right 48%. Below the hero folds a clean four-column feature ribbon with consistent 24px horizontal rhythm and uniform icon-label alignments.

PALETTE (use these exact hex values)
- #F8FAFC — Porcelain Canvas: Global background providing a warm-tinted neutral base for elevated white panels
- #FFFFFF — Pure White: Primary surface for dashboard cards, dropdowns, and interactive white buttons
- #0B0F19 — Deep Onyx: Display headlines, primary CTA buttons, and dominant visual anchors
- #64748B — Slate Muted: Secondary descriptions, table headers, inactive navigation links, and graph axes
- #2563EB — Cobalt Electric: Logo glyph, hand-drawn brush stroke, primary dashboard action buttons, and chart fills
- #10B981 — Emerald Growth: Positive delta indicators, healthy account badges, and active status tags
- #F59E0B — Amber Alert: Mid-tier health score indicators and caution flags in telemetry rows
- #EF4444 — Coral Drop: Churn warnings, negative trend markers, and critical health score gauges
- #F3F0FF — Soft Lavender Tint: Subtle container background for security feature icon tiles
- #E0F2FE — Soft Cyan Tint: Subtle container background for collaboration and insight feature icons

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, DM Sans), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 24px subheading, 32px heading, 56px display. Tracking -0.03em at display, -0.01em at body, 0 at micro. The type communicates technical authority and executive readiness through Plus Jakarta Sans. Its wide apertures, geometric precision, and tall x-height allow micro-dashboard figures to remain legible while display headlines hit with bold, confident finality. Inter or General Sans serve as seamless substitutes without compromising structural clarity.

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

DEPTH
Depth is created through gentle, atmospheric ambient shadowing rather than stark layered elevation. The primary product mockup floats over the #F8FAFC canvas with an expansive, low-opacity drop shadow (0 24px 48px -12px rgba(15, 23, 42, 0.06)) bounded by a razor-sharp 1px neutral outline (#E2E8F0). Internal dashboard cards use minimal elevation, relying instead on 1px borders and subtle background value shifts.

IMAGERY
Avoid photographic lifestyle imagery entirely in favor of hyper-crisp, high-fidelity vector UI representations. The product preview acts as the primary visual hero, detailed with realistic micro-metrics, sparklines, and tabular rows. Feature icons employ dual-tone rounded squircle containers filled with low-saturation pastel tints (#E0F2FE, #FFE4E6, #F3F0FF).

SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable gesture is the vibrant cobalt brush underline (#2563EB) placed directly beneath the final word of an otherwise austere, dark neo-grotesque display title. It introduces a moment of human craft into a strictly engineered, corporate telemetry interface. It is commonly misused by turning it into a sterile vector line or repeating it on multiple elements across the page.

MUST
- Reserve the cobalt ink stroke strictly for one key noun in the primary headline.
- Maintain crisp 1px borders (#E2E8F0) around floating dashboard previews.
- Use multi-tone status badges (#10B981, #F59E0B, #EF4444) only for contextual health metrics.
- Keep background elevation gentle with multi-stop diffuse shadows rather than heavy blurs.

AVOID
- Do not duplicate the hand-drawn brush accent in secondary headers or cards.
- Never apply high-saturation gradients across the main landing page background canvas.
- Avoid sharp 90-degree corners on buttons; maintain the friendly 10px to 12px curvature.
- Do not tint body text with blue; use neutral slates (#64748B) to preserve hierarchy.

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