Cobalt Flow

Cobalt Flow pairs a subtle cool-grey canvas (#F8FAFC) with pure white (#FFFFFF) rounded cards (16px radius) and razor-thin borders (#E2E8F0) to construct a high-clarity SaaS developer dashboard. The primary brand hue is a vibrant ultramarine blue (#1D68FE) used for active states, CTA buttons, and line charts, complemented by soft status tints of amber (#F59E0B) and emerald (#10B981). Typography relies on a modern humanist geometric sans (reminiscent of Plus Jakarta Sans or Inter) set in heavy display weights (700-800) for headlines and crisp, legible regular weights (400-500) for data tables. Spacing adheres to an 8px base rhythm with 24px grid gaps across panels. The hero banner balances punchy editorial copy with an elaborate 3D isometric illustration of developers working around floating code interfaces. Readers immediately register the contrast between dense data-table rows and spacious, inviting header framing.

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 corporate productivity rendered in crystalline cobalt, airy white card structures, and soft isometric craft.

LAYOUT
The workspace uses a fixed 240px vertical sidebar docked to the left containing brand identity, vertical navigation links, and bottom user profile card. The primary canvas begins with a top utility bar containing search input, shortcuts, and global primary actions. Below, the layout arranges an expansive hero announcement banner, followed by a 4-column metric stat row, and finishes with an asymmetric multi-column split (e.g. 7-column table/chart paired with 5-column activity feeds and doughnut charts).

PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Global application viewport background behind sidebar and cards
- #FFFFFF — Card Surface: Background for dashboard cards, sidebar, and floating modals
- #E2E8F0 — Subtle Border: 1px structural dividers, card outlines, and horizontal table rules
- #1D68FE — Cobalt Brand Primary: Primary action buttons, active navigation backgrounds, and primary trend metrics
- #EFF6FF — Cobalt Tint: Sidebar active item fill, badge backings, and metric icon square surfaces
- #0F172A — Text Heading: Display titles, section headings, card values, and author names
- #64748B — Text Secondary: Table column labels, metadata, dates, and subtitle copy
- #10B981 — Success Emerald: Positive delta percentages, completed status badges, and chart line 3
- #F59E0B — Warning Amber: In-review statuses, at-risk doughnut segment, and trend sparklines
- #EF4444 — Danger Coral: Overdue workload segment on circular ring chart

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Public Sans), weights 400/500/600/700/800. Sizes 11px caption, 12px body-sm, 14px body, 15px body-lg, 16px subheading, 18px heading, 24px heading-lg, 38px display. Tracking -0.025em at large titles, 0em at body. Plus Jakarta Sans delivers an energetic, Silicon Valley engineering feel that balances tech-forward geometry with warm humanist openness. The high x-height and circular apertures give clarity even in dense tabular layouts (11px-13px). Substitute with Inter for a slightly more neutral tone, or DM Sans for closer geometric character.

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

DEPTH
Depth is restrained and almost purely planar. Subtle elevation is achieved via a crisp 1px border (#E2E8F0) combined with a soft, ambient box-shadow: 0 1px 3px rgba(0,0,0,0.02), 0 6px 16px rgba(15,23,42,0.04). Interactive elements elevate slightly on hover using an increased shadow spread.

IMAGERY
Features clean, high-fidelity 3D isometric vector illustrations depicting stylized human characters interacting with oversized digital screens, code editor windows, and floating technology cubes. Floating elements use bright, glossy plastic-like materials in matching brand blue, mint, and warm yellow tones. Photorealistic or gritty photography would severely clash with this immaculate vector aesthetic.

SIGNATURE DETAIL — the thing that makes this design itself
The harmonious integration of an ultra-clean, white-bordered metric card grid anchored by a luminous cobalt blue (#1D68FE) signature primary CTA and an expressive 3D isometric tech illustration. Misusing this means stripping the 16px radius cards or replacing the vibrant cobalt with muted corporate slate, causing it to look like standard administrative software.

MUST
- Wrap all primary data groupings inside distinct white cards with 16px border radii and 1px #E2E8F0 borders.
- Use saturated cobalt #1D68FE exclusively for key interactive triggers and primary progress indicators.
- Maintain generous 20px to 24px gutters between grid widgets to let information breathe comfortably.
- Pair every primary metric value with its relative timeframe comparison text ('vs last week') in 11px #64748B.

AVOID
- Do not use dark or heavily tinted card surfaces; preserve pure #FFFFFF on #F8FAFC canvas.
- Never use sharp, 0px square corners on containers, inputs, or action buttons.
- Avoid heavy dark shadows; rely on 1px borders (#E2E8F0) and ultra-diffuse 0 4px 12px rgba(0,0,0,0.03).
- Do not omit the subtitle metadata beneath project names or activity feed actor names.

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