Cobalt Launchpad

Built on an ultra-clean #FFFFFF ground, this system relies on high-contrast royal blue (#2563EB) and deep midnight typography (#0F172A) to guide hierarchy. Color functions as an operational beacon rather than broad surface paint, keeping feature grids and pricing tiers crisp and legible. The typography favors an engineered geometric neo-grotesque set tightly with negative letter spacing at display scale (52px) down to clear 14px caption text. Structural spacing adheres to an 8px grid with generous section buffers around 96px and 12px card radii bounded by 1px hairline borders (#E2E8F0). What catches the eye first is the elevated dashboard mockup floating above an atmospheric radial glow transitioning between electric cyan, indigo, and soft magenta. This tension between structured monochrome data blocks and soft atmospheric illumination establishes a polished, enterprise-ready developer aesthetic.

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: crisp modern product canvas punctuated by royal blue accents and ambient violet glows.

LAYOUT
The page follows a strict vertical single-column narrative centered at a 1200px max container width. A minimalist navbar leads into a split hero featuring left-aligned sales copy and a right-aligned elevated UI preview. Content cascades sequentially: a 4-column feature deck, a split-column core features matrix, a 3-column pricing table, a 3-column testimonial row, and ends with a wide gradient banner.

PALETTE (use these exact hex values)
- #FFFFFF — Canvas Ground: Main page background and card fill across all light surfaces.
- #F8FAFC — Subtle Surface: Section backdrops, badge fills, and inner data card surfaces.
- #0F172A — App Sidebar Charcoal: Dashboard sidebar surface inside the floating UI preview window.
- #0F172A — Midnight Ink: Primary headings, display titles, and prominent metrics.
- #64748B — Slate Body: Descriptive body copy, metadata, secondary links, and subtext.
- #2563EB — Royal Blue: Primary call-to-action buttons, active navigation, key icons, and focal borders.
- #EFF6FF — Soft Blue Tint: Category pill badge backgrounds and selected navigation states.
- #E2E8F0 — Hairline Border: Card borders, divider lines, and button outlines.
- linear-gradient(90deg, #2563EB 0%, #D946EF 100%) — Banner Gradient: Bottom conversion card fill and atmospheric hero light glow.

TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 20px subheading, 32px heading, 52px display. Tracking -0.03em at display, 0em at body. The typographic tone is objective, precise, and distinctly modern SaaS, communicating speed and developer competence. Inter or Plus Jakarta Sans provides clean geometric clarity with tight display tracking that eliminates looseness in large headers. Free open-source alternatives like Geist or General Sans match this technical, high-polish voice effortlessly.

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

DEPTH
Depth is minimal and strictly reserved for product showcase elements. Flat surfaces are outlined with 1px hairline borders (#E2E8F0), while the floating hero UI window utilizes an expansive low-opacity shadow (0 25px 50px -12px rgba(15,23,42,0.12)) coupled with an ambient soft-focus radial color glow beneath the canvas.

IMAGERY
Visual imagery is entirely vector- and UI-driven, relying on pixel-accurate application mockups with clean line charts, data donut meters, and tabular lists. Circular author avatars (32px to 40px) provide human scale in testimonials. Abstract 3D objects, stock photography, and hand-drawn illustrations are strictly off-brand.

SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable motif is the crisp product dashboard floating above an expansive, diffused blue-to-violet atmospheric radial glow. To use it properly, keep the glow strictly behind the elevated preview card with broad blur (120px+) at low opacity, letting the high-contrast interface metrics sit cleanly on top without color bleeding into body copy.

MUST
- Use 1px solid #E2E8F0 borders to delineate content boundaries instead of heavy drop shadows.
- Limit atmospheric gradients strictly to the hero mockup background glow and bottom conversion banner.
- Pair #2563EB primary buttons directly with transparent hairline outline buttons for visual balance.
- Maintain -0.03em tracking on display typography above 40px to ensure a tight, engineered aesthetic.

AVOID
- Do not apply dark mode backgrounds to the main page canvas; maintain dominant white #FFFFFF space.
- Avoid colored backgrounds on standard feature cards; keep them white with hairline borders.
- Do not use sharp 0px corners on interactive controls; adhere to the 8px button radius standard.
- Avoid low-contrast grey text for titles; use #0F172A to preserve high visual hierarchy.

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